1.
Fons Sonnemans
Reflection IT
What's new in Blend for
Visual Studio 2015
@fonssonnemans

2.
Topics
• Blend 2015
• XAML
• New Universal Controls
• New Properties
• Visual Studio 2015
2

3.
Fons Sonnemans
• Software Development Consultant
• Programming Languages
• Clipper, Smalltalk, Visual Basic, C#
• Platforms
• Windows Forms, ASP.NET (Web Forms, MVC), XAML (WPF, Silverlight, Windows
Phone, Windows 8 & 10)
• Databases
• MS SQL Server, Oracle
• Role
• Trainer, Coach, Advisor, Architect, Designer, App Developer
• More info: www.reflectionit.nl
3

4.
My Apps
4
http://reflectionit.nl/apps

5.
Blend 2015
What’s new

6.
Pre Blend 2015
• Blend is a tool for creating great user experiences, with deep
focus on best-in-class UI design capabilities.
• Visual Studio is a tool for creating great apps, with focus on
best-in-class code editing and debugging capabilities.
• Supports
• WPF, Silverlight (Phone), Windows 8 & 8.1
6

7.
Feedback themes
• No XAML or C# IntelliSense
• File reload experiences when switching between VS and
Blend
• Inconsistent shell & project system experiences with VS
• Git and TFS
• Expand/collapse of project nodes
• Performance and scalability of large solutions
7

8.
Visual Studio & Blend 2015
• File reload experiences when switching between VS and
Blend
8

9.
Blend for Visual Studio 2015
• Adds Windows 10 support
• Rebuilt from the ground up using VS technologies
• Editors (XAML + C#): IntelliSense, GoTo Definition, Peek
• Debugging
• Window Layouts
• Customizing Menu + Toolbar
• NuGet
• Retains almost all of the unique Blend capabilities
• SketchFlow is killed
9

10.
Blend 2015
10

11.
4” Phone (800 x 480) 150% scale
• Create this XML file in
• C:Program Files (x86)Windows Kits10DesignTimeUAPDevices1033
<?xml version="1.0" encoding="UTF-8"?>
<!-- C:Program Files (x86)Windows Kits10DesignTimeUAPDevices1033100_4inchphone.xml -->
<Device name="Phone" width="480" height="800" scale="150" size="4" default="false"
resize="false" icon="Assets/phone_icon.ico" generic="Generic/generic.xaml"
MinVersion="10.0.0.0">
<Device.Qualifiers>
<Qualifier Name="DeviceFamily">Mobile</Qualifier>
<Qualifier Name="Orientation">Portrait|Landscape</Qualifier>
</Device.Qualifiers>
</Device>
11

12.
UI Debugging for XAML
• Visual tree inspection and manipulation
• Live tracking of tree and property changes
• Fully integrated into debugging
• Upcoming
• Serializing edits back into source
• Edit-n-continue
• Data debugging visualizations
• http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2
015/08/06/sniffing-out-xaml-from-installed-apps-with-visual-studio-
2015-s-live-views.aspx
12

13.
Live Visual Tree
13

14.
Phone Small Tablet
2-in-1s
(Tablet or Laptop)
Desktops
& All-in-OnesPhablet Large Tablet
Classic
Laptop
Xbox IoTSurface Hub Holographic
Windows 10
14

15.
Universal Windows Platform
• One Operating System
• One Windows core for all devices
• One App Platform
• Apps run across every family
• One Dev Center
• Single submission flow and dashboard
• One Store
• Global reach, local monetization
Consumers, Business & Education
15

16.
UAP
Windows Core Windows Core Windows Core Windows Core
UAP UAP UAP
Desktop Mobile Xbox More…
Adaptive codePlatform extensions (capabilities)
16

17.
Test capabilities at runtime
• Use Adaptive Code to light-up your app on specific devices
var api = "Windows.Phone.UI.Input.HardwareButtons";
if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent(api))
{
Windows.Phone.UI.Input.HardwareButtons.CameraPressed
+= CameraButtonPressed;
}
17

18.
What’s new in XAML
New Universal Controls
New Properties
Other Changes

19.
The Border control is “Dead”
• Panels
• New properties in Win10 makes ‘Border’ obsolete
<StackPanel Orientation="Horizontal"
BorderBrush="#FF0B77FD"
BorderThickness="2"
Padding="5">
<Button Content="Button1" FontSize="30" />
<Button Content="Button2" FontSize="30" Margin="5,0" />
<Button Content="Button3" FontSize="30" />
</StackPanel>
New Properties in Win10
makes ‘Border’ obsolete
19

20.
Nested Stackpanels
<StackPanel HorizontalAlignment="Center"
VerticalAlignment="Center">
<StackPanel Orientation="Horizontal" Margin="0,0,0,12">
<TextBlock Text="Username" FontSize="26.667" Width="240"
TextAlignment="Right" Margin="0,0,20,0"/>
<TextBox FontSize="26.667" Width="300"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,0,12">
<TextBlock Text="Password" Margin="0,0,20,0" FontSize="26.667"
Width="240" TextAlignment="Right"/>
<PasswordBox Margin="0" FontSize="26.667" Width="300"/>
</StackPanel>
<Button Content="Login" HorizontalAlignment="Left"
Margin="260,0,0,0" FontSize="26.667"/>
</StackPanel>
20

21.
RelativePanel
• Decrease Tree size
<RelativePanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock x:Name="labelUsername"
Text="Username"
RelativePanel.LeftOf="inputUsername"
TextAlignment="Right"
Margin="0,0,20,0"
FontSize="26.667" />
<TextBox x:Name="inputUsername"
RelativePanel.AlignRightWithPanel="True"
Width="300"
FontSize="26.667" />
<TextBlock x:Name="labelPassword“
Text="Password"
RelativePanel.LeftOf="inputPassword"
RelativePanel.AlignVerticalCenterWith="inputPassword"
TextAlignment="Right"
Margin="0,0,20,0"
FontSize="26.667" />
<PasswordBox x:Name="inputPassword"
RelativePanel.Below="inputUsername"
RelativePanel.AlignRightWithPanel="True"
Width="300"
Margin="0,10"
FontSize="26.667" />
<Button x:Name="buttonLogin"
Content="Login"
RelativePanel.Below="inputPassword"
RelativePanel.AlignLeftWith="inputPassword"
FontSize="26.667" />
</RelativePanel>
21

22.
RelativePanel
• Vertical layout
<RelativePanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock x:Name="labelUsername“
Text="Username“
Margin="0,0,20,0"
FontSize="26.667" />
<TextBox x:Name="inputUsername"
RelativePanel.Below="labelUsername"
Width="300"
Margin="0,0,0,10"
FontSize="26.667" />
<TextBlock x:Name="labelPassword"
Text="Password"
RelativePanel.Below="inputUsername"
Margin="0,0,20,0"
FontSize="26.667" />
<PasswordBox x:Name="inputPassword"
RelativePanel.Below="labelPassword"
Width="300"
Margin="0,0,0,10"
FontSize="26.667" />
<Button x:Name="buttonLogin"
Content="Login"
RelativePanel.Below="inputPassword"
RelativePanel.AlignLeftWith="inputPassword"
FontSize="26.667" />
</RelativePanel>
22

23.
Adaptive UI
• Responsive Design
23

24.
Adaptive UI
<RelativePanel HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock x:Name="labelUsername"
Text="Username"
RelativePanel.LeftOf="inputUsername"
TextAlignment="Right"
Margin="0,0,20,0"
FontSize="26.667" />
<TextBox x:Name="inputUsername"
RelativePanel.AlignRightWithPanel="True"
Width="300"
FontSize="26.667" />
<TextBlock x:Name="labelPassword“
Text="Password"
RelativePanel.LeftOf="inputPassword"
RelativePanel.AlignVerticalCenterWith="inputPassword"
TextAlignment="Right"
Margin="0,0,20,0"
FontSize="26.667" />
<PasswordBox x:Name="inputPassword"
RelativePanel.AlignRightWithPanel="True“
RelativePanel.Below="inputUsername"
Margin="0,10"
Width="300"
FontSize="26.667" />
<Button x:Name="buttonLogin"
Content="Login"
RelativePanel.Below="inputPassword"
RelativePanel.AlignLeftWith="inputPassword"
FontSize="26.667" />
</RelativePanel>
<RelativePanel HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock x:Name="labelUsername“
Text="Username“
Margin="0,0,20,0"
FontSize="26.667" />
<TextBox x:Name="inputUsername"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.Below="labelUsername"
Margin="0,0,0,10"
Width="300"
FontSize="26.667" />
<TextBlock x:Name="labelPassword"
Text="Password"
RelativePanel.Below="inputUsername"
Margin="0,0,20,0"
FontSize="26.667" />
<PasswordBox x:Name="inputPassword"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.Below="labelPassword"
Margin="0,0,0,10"
Width="300"
FontSize="26.667" />
<Button x:Name="buttonLogin"
Content="Login"
RelativePanel.Below="inputPassword"
RelativePanel.AlignLeftWith="inputPassword"
FontSize="26.667" />
</RelativePanel>
24

25.
Adaptive UI
<RelativePanel HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock x:Name="labelUsername"
Text="Username"
RelativePanel.LeftOf="inputUsername"
TextAlignment="Right"
Margin="0,0,20,0"
FontSize="26.667" />
<TextBox x:Name="inputUsername"
RelativePanel.AlignRightWithPanel="True"
Width="300"
FontSize="26.667" />
<TextBlock x:Name="labelPassword“
Text="Password"
RelativePanel.LeftOf="inputPassword"
RelativePanel.AlignVerticalCenterWith="inputPassword"
TextAlignment="Right"
Margin="0,0,20,0"
FontSize="26.667" />
<PasswordBox x:Name="inputPassword"
RelativePanel.AlignRightWithPanel="True“
RelativePanel.Below="inputUsername"
Margin="0,10"
Width="300"
FontSize="26.667" />
<Button x:Name="buttonLogin"
Content="Login"
RelativePanel.Below="inputPassword"
RelativePanel.AlignLeftWith="inputPassword"
FontSize="26.667" />
</RelativePanel>
<RelativePanel HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock x:Name="labelUsername“
Text="Username“
Margin="0,0,20,0"
FontSize="26.667" />
<TextBox x:Name="inputUsername"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.Below="labelUsername"
Margin="0,0,0,10"
Width="300"
FontSize="26.667" />
<TextBlock x:Name="labelPassword"
Text="Password"
RelativePanel.Below="inputUsername"
Margin="0,0,20,0"
FontSize="26.667" />
<PasswordBox x:Name="inputPassword"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.Below="labelPassword"
Margin="0,0,0,10"
Width="300"
FontSize="26.667" />
<Button x:Name="buttonLogin"
Content="Login"
RelativePanel.Below="inputPassword"
RelativePanel.AlignLeftWith="inputPassword"
FontSize="26.667" />
</RelativePanel>
25

26.
Visual States – Setters & StateTriggers
26

27.
Visual States – Setters & StateTriggers
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="Horizontal">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="labelUsername.(RelativePanel.LeftOf)" Value="inputUsername" />
<Setter Target="labelUsername.(TextBlock.TextAlignment)" Value="Right" />
<Setter Target="inputUsername.(RelativePanel.Below)" Value="" />
<Setter Target="inputUsername.(FrameworkElement.Margin)" Value="0" />
<Setter Target="labelPassword.(RelativePanel.Below)" Value="" />
<Setter Target="labelPassword.(RelativePanel.LeftOf)" Value="inputPassword" />
<Setter Target="labelPassword.(RelativePanel.AlignVerticalCenterWith)" Value="inputPassword" />
<Setter Target="labelPassword.(TextBlock.TextAlignment)" Value="Right" />
<Setter Target="inputPassword.(RelativePanel.Below)" Value="inputUsername" />
<Setter Target="inputPassword.(FrameworkElement.Margin)" Value="0,10" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
27

28.
WindowsStateTriggers
28

29.
WindowsStateTriggers
29

30.
Adaptive design
Phone (portrait)
Tablet (landscape) / Desktop
30

31.
Tailored design
Phone (portrait)
Tablet (landscape) / Desktop
31

32.
DeviceFamily specific Content
• Pages
• UserControls
• Images
• Resources
32
http://igrali.com/2015/08/02/three-ways-to-set-specific-devicefamily-xaml-views-in-uwp/

33.
ContentDialiog
33

34.
<SplitView IsPaneOpen="True"
DisplayMode=""
PanePlacement=""
PaneBackground=""
OpenPaneLength="256"
CompactPaneLength="48"
PaneClosed=""
PaneClosing="">
<SplitView.Pane>
<Grid/>
</SplitView.Pane>
<Grid/>
</SplitView>
SplitView Control

35.
SplitView Control
• Links
• http://igrali.com/2015/04/12/getting-started-with-splitview-control-in-universal-apps/
• http://blog.jerrynixon.com/2015/04/implementing-hamburger-button-with.html
• http://blogs.u2u.be/diederik/post/2015/07/14/A-lap-around-the-SplitView-Control.aspx
35

36.
AutoSuggestBox
• Replaces SearchBox
36

37.
Newly Universal Controls: Maps
• Plus: Offline, 3D, Street Side Panoramas
37

38.
DatePicker, TimePicker, CalendarDatePicker,
CalenderView

39.
Pivot
39

40.
CommandBar (Windows 10)
• AppBar+
• Compact by default
• Does not respond to right-click
• Can host custom content
• Adds a menu of commands
• 100% XAML implementation
• Tailored experience for large/small screen sizes
• Not limited to full width top/bottom edge
40

41.
<Page.BottomAppBar>
<CommandBar ClosedDisplayMode=“{Hidden|Minimal|Compact}"
Opening="Opening"
Closing="Closing">
<CommandBar.PrimaryCommands>
<AppBarButton Icon="Accept" Label="Accept" />
<AppBarButton Icon="Cancel" Label="Cancel" />
</CommandBar.PrimaryCommands>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Help" Label="About"/>
<AppBarButton Icon="Home" Icon="Home" />
</CommandBar.SecondaryCommands>
<CommandBar.Content/>
<CommandBar.OverflowPresenterStyle/>
</CommandBar>
</Page.BottomAppBar>
CommandBar New APIs

42.
AppBar (Windows 10)
• Visible by default in a Minimal size
• Has the ‘…’ button to open/close
• Still responds to unhandled right-clicks
• Affects visible bounds when at the root
• New APIs: Opening, Closing
• Converged API: ClosedDisplayMode
42

43.
InkCanvas
• XAML
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<InkCanvas x:Name="inkCanvas1" />
</Grid>
• C#
public sealed partial class MainPage : Page {
public MainPage() {
this.InitializeComponent();
inkCanvas1.InkPresenter.InputDeviceTypes =
Windows.UI.Core.CoreInputDeviceTypes.Mouse |
Windows.UI.Core.CoreInputDeviceTypes.Pen |
Windows.UI.Core.CoreInputDeviceTypes.Touch;
inkCanvas1.InkPresenter.UpdateDefaultDrawingAttributes(
new InkDrawingAttributes() {
Color = Colors.Red,
Size = new Size(5, 5),
FitToCurve = true,
});
}
43

44.
SystemAccentColor
• Reduces the need for a custom Theme
44

45.
System Colors & Brushes in Themes
45

46.
IsTextScaleFactorEnabled
<StackPanel Margin="10">
<Button Content="Button 1" />
<TextBlock Text="Hello World 1"
FontSize="20" Margin="0,10" />
<TextBox Text="TextBox 1" />
<Button Content="Button 2"
IsTextScaleFactorEnabled="False"
Margin="0,40,0,0" />
<TextBlock Text="Hello World 2"
IsTextScaleFactorEnabled="False"
FontSize="20" Margin="0,10" />
<TextBox Text="TextBox 2"
IsTextScaleFactorEnabled="False" />
</StackPanel>
46

47.
Styling & Templating
• Generic.xaml
• The Styles & Templates of may controls have changed
• Buttons have no margin
• GridView uses vertical orientation
• GridView & ListView selection
• etc
47

48.
Styling & Templating
• Combined States
48

49.
Data Binding
• Data binding is the process that establishes a connection, or binding,
between the UI and the business object which allows data to flow
between the two
• Enable clean view/model separation and binding
• Change UI presentation without code-behind modifications
• Every binding has a source and a target
• Source is the business object or another UI element
• Target is the UI element
• Binding Expressions can be one way or two way and supports
converters
50

50.
Element to Element Binding
• Element binding is performed in the same manner as Data Binding
with one addition: the ElementName property. ElementName defines
the name of the binding source element.
<RelativePanel HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock Text="{Binding ElementName=mySlider, Path=Value}"
RelativePanel.RightOf="mySlider"
FontSize="32" Margin="20,0,0,0" />
<Slider x:Name="mySlider"
Maximum="10"
Value="6"
Width="400" />
</RelativePanel>
51

51.
Compiled Binding - {x:Bind}
• DataBind to a Property or Field of the Code Behind
• Databinding code is generated in the .g.cs file
• Up to 5x faster
• Default Mode = OneTime !!!
• Not tooling support yet!
• Use IntelliSense
<TextBlock Text="{x:Bind mySlider.Value, Mode=OneWay}"
RelativePanel.LeftOf=""
RelativePanel.RightOf="mySlider"
FontSize="32"
Margin="20,0,0,0" />
52

52.
Compiled Binding - x:DataType
• You have to specify the x:DataType in DataTemplates
<ListView ItemsSource="{x:Bind employees}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:Employee">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Bind Name}" Width="200" />
<TextBlock Text="{x:Bind Salary}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
53
public sealed partial class MainPage : Page {
private List<Employee> employees = new List<Employee> {
new Employee("Fons", 2000),
new Employee("Jim", 3000),
new Employee("Ellen", 4000),
};

53.
Compiled Binding - x:Phase
• Progressive rendering for list items
• Windows 8.1 introduced ContainerContentChanging Event
• Enables progressive rendering of list items
• Required code to update template which precluded use of binding
• x:Phase enables declarative support for phased rendering
54
<DataTemplate x:DataType="models:FileItem">
<Grid Width="200" Height="80">
<TextBlock Text="{x:Bind DisplayName}" />
<TextBlock Text="{x:Bind prettyDate}" x:Phase="1"/>
</Grid>
</DataTemplate>

54.
Data Window – Sample Data
55

55.
Visual Studio 2015
Refactorings & Analyzers
Visual C# 6.0

56.
Refactorings & Analyzers
• Extensions are not (yet) supported in Blend 2015
• https://visualstudio.uservoice.com/forums/121579-visual-studio/category/90110-blend-for-visual-studio
57

57.
@fonssonnemans
fons.sonnemans@reflectionit.nl
fonssonnemans
reflectionit.nl/blog
58