This document provides an overview of new features in Blend for Visual Studio 2015, including improved integration with Visual Studio, support for Windows 10, and updates to XAML controls and properties. Key points include: Blend 2015 now has IntelliSense and debugging capabilities integrated from Visual Studio; it adds support for Windows 10 and the Universal Windows Platform; new and updated XAML controls are introduced, such as RelativePanel, SplitView, and CommandBar; and properties like SystemAccentColor and adaptive UI techniques allow responsive design across devices.
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
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
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
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
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
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>
