building & designing windows 10 universal windows apps using xaml and c#

Fons Sonnemans Reflection IT

Building & Designing Windows 10

Universal Windows Apps using

XAML and C#

@fonssonnemans

www.storeappsug.nl

@StoreAppsUG

http://www.storeappsug.nl/

Topics

• Universal Windows Apps

• Blend 2015

• Layout Controls

• Adaptive UI

• Resources

• Animations & Behaviors

• Styling & Templating

• Data Binding

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

http://www.reflectionit.nl/

My Apps

4

http://reflectionit.nl/apps

http://reflectionit.nl/apps

Universal Windows Apps

Introducing the Universal Windows Platform (UWP)

Easy for users to get & stay current

Unified core and app platform

The convergence journey

Windows 10

ConvergedOS kernel

Convergedapp model

Phone Small Tablet2-in-1s

(Tablet or Laptop)Desktops

& All-in-OnesPhablet Large TabletClassic Laptop

Xbox IoTSurface Hub Holographic

Windows 10

One Store +One Dev Center

Reuse Existing Code

One SDK + Tooling

Adaptive User Interface

NaturalUser Inputs

One Universal Windows Platform

Universal Windows Platform

• A single API surface

• A guaranteed API surface

• The same on all devices

PhoneDevice

XboxDevice

DesktopDevice

Windows Core



• 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

Adaptive code

• A compatible binary across devices

• Universal API with device-specific implementation

• Light up our app with capabilities

• Testing for capabilities and namespaces

UAP

Windows Core Windows Core Windows Core Windows Core

UAP UAP UAP

Desktop Mobile Xbox More…

Adaptive codePlatform extensions (capabilities)

Platform extensions (capabilities)

• Device-specific API

• Family-specific capabilities

• Compatible across devices

• Unique update cadence

PhoneDevice

XboxDevice

DesktopDevice

Windows Core


Windows App

Phoneextension

Xboxextension

Desktopextension

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;

}

Blend 2015

What’s new

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

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

Blend for Visual Studio 2015

• Adds Windows 10 support

• Rebuilt from the ground up using VS technologies

• IntelliSense, GoTo Definition, Peek, Debugging, Window Layouts,

Reloading, Customizing

• Retains almost all of the unique Blend capabilities

• SketchFlow is killed

Blend 2015

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

Live Visual Tree

Layout Controls

Panels

Layout Controls• Canvas

• Simplest, placement relative to the top left edge

• Not scalable

• StackPanel

• Horizontal or vertical stacking

• RelativePanel

• You arrange child elements by specifying how they should be arranged in relationships to

each other, and how they should position relative to their content and/or their parent

• Grid

• Uses rows and columns

• Flexible Positioning (similar to <TABLE /> in HTML)

• More

• Border (“Obsolete”), ScrollViewer, Viewbox, VariableSizedWrapGrid

Canvas

• Is a Drawing Surface

• Children have fixed positions relative to top-left-corner

<Canvas Width="250" Height="200" Background="Gray">

<Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Yellow" />

</Canvas>

The Canvas

The Rectangle

XAML - Attached Properties

• Top & Left properties only make sense inside a Canvas

<Canvas Width="250" Height="200" Background="Gray">

<Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Yellow" />

</Canvas>

StackPanel

• The StackPanel will place its children in either a column

(default) or row. This is controlled by the Orientation

property.

<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 Win10Makes ‘Border’ obsolete

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>

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>

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"


<TextBlock x:Name="labelPassword"

Text="Password"

RelativePanel.Below="inputUsername"

Margin="0,0,20,0"


<PasswordBox x:Name="inputPassword"

RelativePanel.Below="labelPassword"

Width="300"

Margin="0,0,0,10"


<Button x:Name="buttonLogin"

Content="Login"

RelativePanel.Below="inputPassword"

RelativePanel.AlignLeftWith="inputPassword"


</RelativePanel>

Grid

• The Grid is a powerful layout container.

• It acts as a placeholder for visual elements

• You specify the rows and columns, and those define the cells.

• The placement of an element in the Grid is specified using attached properties

that are set on the children of the Grid:

• Supports different types of row and column sizes in one Grid:

• Pixel size: Fixed value in pixels

• Auto size: The cell has the size of it’s contents

• Star size: whatever space is left over from fixed- and auto-sized columns is allocated to all of the columns with star-sizing

<Image Grid.Column="3" Source="demo.png" Stretch="None"/>

Layout Properties

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>

33

Adaptive UI

Responsive Design

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"


<TextBox x:Name="inputUsername"

RelativePanel.AlignRightWithPanel="True"

RelativePanel.Below="labelUsername"

Margin="0,0,0,10"

Width="300"


<TextBlock x:Name="labelPassword"

Text="Password"

RelativePanel.Below="inputUsername"

Margin="0,0,20,0"


<PasswordBox x:Name="inputPassword"

RelativePanel.AlignRightWithPanel="True"

RelativePanel.Below="labelPassword"

Margin="0,0,0,10"

Width="300"


<Button x:Name="buttonLogin"

Content="Login"

RelativePanel.Below="inputPassword"

RelativePanel.AlignLeftWith="inputPassword"


</RelativePanel>

Visual States – Setters & StateTriggers

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>

WindowsStateTriggers

Adaptive design

Phone (portrait)

Tablet (landscape) / Desktop

Tailored design

Phone (portrait)

Tablet (landscape) / Desktop

DeviceFamily specific XAML

Resources

Reusable objects such as data, styles and templates

Resources

• Reusable objects such as data, styles and templates.

• Assigned a unique key (x:Key) so you can reference to it.

• Every element has a Resources property.

• Nesting Support

• All static resources are loaded on page load

• Resource is loaded even if not used

45

Convert to New Resource…

Resources in Blend

• Menu Window - Resources

• Shows all resources of all open XAML documents

• Link to Resource Dictionary

• Edit Resource

• Rename Resource

• Move Resource

• Delete Resource

• Apply Resource by Drag & Drop

47

Windows 10 - SystemAccentColor

• Reduces the need for a custom Theme

Animations & Behaviors

Storyboards & Transitions

Interactivity without Code

Key Frame Concept

• XAML supports key frames

• A key frame defines an objects target value on a moment in

an animation.

• A key frame has an interpolation method.

• A Key Frame target can be a:

• Double (X, Y, Height, Width, Opacity, Angle, etc.)

• Color (Fill, Stroke, etc.)

• Object (Visibility, Text, etc)

Storyboards

51

Record Storyboard animations

Storyboards

• The Storyboard object has interactive methods to Begin, Pause, Resume, and Stop an animation.

public void ButtonStart_Click(object sender, MouseEventArgs e) {if (myStoryboard.GetCurrentState() == ClockState.Stopped) {

myStoryboard.Begin();}

}

public void ButtonPause_Click(object sender, MouseEventArgs e) {myStoryboard.Pause();

}

public void ButtonResume_Click(object sender, MouseEventArgs e) {myStoryboard.Resume();

}

public void ButtonStop_Click(object sender, MouseEventArgs e) {myStoryboard.Stop();

}

Behaviors

Animation Library Transitions<ItemsControl>

<Rectangle Fill="Red" Margin="10" /><Rectangle Fill="Red" Margin="10"/><Rectangle Fill="Red" Margin="10"/><Rectangle Fill="Red" Margin="10"/><Rectangle Fill="Red" Margin="10"/><Rectangle Fill="Red" Margin="10"/><Rectangle Fill="Red" Margin="10"/><Rectangle Fill="Red" Margin="10"/><ItemsControl.ItemsPanel>

<ItemsPanelTemplate><ItemsWrapGrid ItemHeight="150" ItemWidth="150"

Orientation="Horizontal" /></ItemsPanelTemplate>

</ItemsControl.ItemsPanel>

<ItemsControl.ItemContainerTransitions><TransitionCollection>

<ReorderThemeTransition /></TransitionCollection>

</ItemsControl.ItemContainerTransitions>

</ItemsControl>

ShowMessageBox Actionpublic class ShowMessageAction : DependencyObject, IAction {

public string Text { get; set; }

public object Execute(object sender, object parameter) {

new MessageDialog(this.Text).ShowAsync();

return null;

}

}

Open Source Behaviors SDK XAML

• https://visualstudio.uservoice.com/forums/121579-visual-

studio/suggestions/5282131-open-source-behaviors-sdk-xaml-

for-visual-studio

https://visualstudio.uservoice.com/forums/121579-visual-studio/suggestions/5282131-open-source-behaviors-sdk-xaml-for-visual-studio

Styling and Templating

Customize the look of an application without changing

it’s behavior

Styling and Templating

• Styling = Small Visual Changes on an Element (Font,

Background Color, etc.)

• Templating = Replacing Element’s entire Visual Tree

Styling

<Page.Resources><Style x:Key="HollandButtonStyle" TargetType="Button">

<Setter Property="Background" Value="#FFFF9E00"/><Setter Property="FontSize" Value="40"/><Setter Property="FontStyle" Value="Italic"/>

</Style></Page.Resources>

<Grid><Button Content="Button"

Style="{StaticResource HollandButtonStyle}"/></Grid>

Implicit Styling

• If you omit the Style’s Key and specify only the TargetType, then the Style is automatically applied to all elements of that target type within the same scope (it is implicitly applied).

• This is typically called a typed style as opposed to a named style.

<Style TargetType="TextBox"><Setter Property="FontFamily" Value="Arial Black"/><Setter Property="FontSize" Value="16"/>

</Style>

BasedOn Styling<Page.Resources>

<Style x:Key="HollandButtonStyle" TargetType="Button"><Setter Property="Background" Value="#FFFF9E00"/><Setter Property="FontSize" Value="24"/><Setter Property="FontStyle" Value="Italic"/>

</Style><Style x:Key="GermanButtonStyle"

TargetType="Button"BasedOn="{StaticResource HollandButtonStyle}">

<Setter Property="Background" Value="White"/><Setter Property="Foreground" Value="Black"/><Setter Property="BorderBrush" Value="Black"/>

</Style></Page.Resources>

<Grid><Button Content="Button"

Style="{StaticResource GermanButtonStyle}"/><Button Content="Button"

Style="{StaticResource HollandButtonStyle}"/></Grid>

Templating - CombinedStates

DataBinding

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

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>

http://msdn.microsoft.com/en-us/library/system.windows.data.binding.elementname(VS.95).aspx

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

Data Window – Sample Data

@fonssonnemans

[email protected]

fonssonnemans

reflectionit.nl/blog

http://www.iconarchive.com/show/windows-8-metro-icons-by-dakirby309/Web-Google-Reader-Metro-icon.html

http://www.iconarchive.com/show/windows-8-metro-icons-by-dakirby309/Web-Google-Reader-Metro-icon.html

http://www.iconarchive.com/show/windows-8-metro-icons-by-dakirby309/Web-Live-Hotmail-Metro-icon.html

http://www.iconarchive.com/show/windows-8-metro-icons-by-dakirby309/Web-Live-Hotmail-Metro-icon.html

http://www.iconarchive.com/show/simple-icons-by-danleech/linkedin-icon.html

http://www.iconarchive.com/show/simple-icons-by-danleech/linkedin-icon.html

building & designing windows 10 universal windows apps using xaml and c#

Technology