What's new in Blend for Visual Studio 2015

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

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

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

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

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

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

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

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

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"?>

<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

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

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

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

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

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

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

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

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

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"
<TextBlock x:Name="labelPassword“
Text="Password"
RelativePanel.LeftOf="inputPassword"
RelativePanel.AlignVerticalCenterWith="inputPassword"
Margin="0,0,20,0"
<PasswordBox x:Name="inputPassword"
RelativePanel.Below="inputUsername"
Width="300"
Margin="0,10"
<Button x:Name="buttonLogin"
Content="Login"
RelativePanel.Below="inputPassword"
RelativePanel.AlignLeftWith="inputPassword"
</RelativePanel>
21

RelativePanel
• Vertical layout
<RelativePanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock x:Name="labelUsername“
Text="Username“
Margin="0,0,20,0"
RelativePanel.Below="labelUsername"
Width="300"
Margin="0,0,0,10"
<TextBlock x:Name="labelPassword"
Text="Password"
Margin="0,0,20,0"
RelativePanel.Below="labelPassword"
Width="300"
Margin="0,0,0,10"
Content="Login"
</RelativePanel>
22

Adaptive UI
• Responsive Design
23

Adaptive UI
<RelativePanel HorizontalAlignment="Center"
Text="Username"
Margin="0,0,20,0"
Width="300"
Text="Password"
Margin="0,0,20,0"
RelativePanel.AlignRightWithPanel="True“
Margin="0,10"
Width="300"
Content="Login"
</RelativePanel>
Text="Username“
Margin="0,0,20,0"
Margin="0,0,0,10"
Width="300"
Text="Password"
Margin="0,0,20,0"
Margin="0,0,0,10"
Width="300"
Content="Login"
</RelativePanel>
24

Adaptive UI
Text="Username"
Margin="0,0,20,0"
Width="300"
Text="Password"
Margin="0,0,20,0"
RelativePanel.AlignRightWithPanel="True“
Margin="0,10"
Width="300"
Content="Login"
</RelativePanel>
Text="Username“
Margin="0,0,20,0"
Margin="0,0,0,10"
Width="300"
Text="Password"
Margin="0,0,20,0"
Margin="0,0,0,10"
Width="300"
Content="Login"
</RelativePanel>
25

Visual States – Setters & StateTriggers
26

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

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

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

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

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

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

AutoSuggestBox
• Replaces SearchBox
36

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

DatePicker, TimePicker, CalendarDatePicker,
CalenderView

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

<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

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

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

SystemAccentColor
• Reduces the need for a custom Theme
44

System Colors & Brushes in Themes
45

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

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

Styling & Templating
• Combined States
48

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

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.
<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

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

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),
};

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>

Data Window – Sample Data
55

Visual Studio 2015
Refactorings & Analyzers
Visual C# 6.0

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

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

What's new in Blend for Visual Studio 2015

Recommended

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to What's new in Blend for Visual Studio 2015 (20)

Recently uploaded (20)

What's new in Blend for Visual Studio 2015