Designing XAML Apps

using Blend for Visual

Studio 2013

Fons Sonnemans

@fonssonnemans

Topics

Blend

Layout Controls

Basic Controls

AppBar & CommandBar

Animation

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

(Silverlight, Windows Phone, Windows 8)

• Databases• MS SQL Server, Oracle

• Role• Trainer, Coach, Advisor, Architect, Designer, App Developer

•More info: www.reflectionit.nl

My Apps

Windows 8

Windows Phone

http://reflectionit.nl/apps

Device Window

Visual Studio versus Blend

Visual Studio

• Code Editing

• XAML Editing • IntelliSense

• Formatting (Ctrl+E, D)

• Code Snippets (new in VS2013)

• Debugging

• Project Properties

• TFS Explorer

• Data Binding• IntelliSense

• including Path (new in VS2013)

• Set Build Actions

Blend

• UI Design

• Guides

• Animations

• Styling & Templating

• Visual States

• Data Binding

• TFS Check in/out

In-Box ControlsButton

Checkbox Radio Button

Hyperlink Combo Box

Context Menu Flyout

List BoxFlip View

App Bar

Panning Indicator

Grid View

List View Semantic Zoom

Text Box

Progress Ring Progress Bar

Clear ButtonSpell Checking

Password Reveal Button

Rating Radio Button

Scroll Bar

Toggle Switch Tooltip

<Layout Controls />

Layout Controls

Canvas Simplest, placement relative to two edges Not scalable Supports the following attached properties

Canvas.Top, Canvas.Left, Canvas.Zindex

StackPanel Horizontal or vertical stacking

Grid Uses rows and columns Flexible Positioning (similar to tables in HTML) Supports the following attached properties

Grid.Column, Grid.Row, Grid.Columnspan, Grid.Rowspan

More Border, 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>

XAML - Attached Properties

=

<Rectangle Canvas.Top="25" Canvas.Left="25"/>

Rectangle rectangle = new Rectangle();rectangle.SetValue(Canvas.TopProperty, 25);rectangle.SetValue(Canvas.LeftProperty, 25);

=Rectangle rectangle = new Rectangle();Canvas.SetTop(rectangle, 25);Canvas.SetLeft(rectangle, 25);

XAML - Syntax XAML is Case-Sensitive

Attribute Syntax

Property Element Syntax (<TypeName.Property>)

<Button Background="Blue" Foreground="Red"Content="This is a button"/>

<Button><Button.Background>

<SolidColorBrush Color="Blue"/></Button.Background><Button.Foreground>

<SolidColorBrush Color="Red"/></Button.Foreground><Button.Content>

This is a button</Button.Content>

</Button>

http://msdn.microsoft.com/en-us/library/cc189036(VS.95).aspx

StackPanel

The StackPanel will place its children in either a column (default) or row. This is controlled by the Orientation property.

<StackPanel Orientation="Vertical"><Button Content="Button" /><Button Content="Button" />

</StackPanel>

Nested Stackpanels<StackPanel HorizontalAlignment="Center"

VerticalAlignment="Center"><StackPanel Orientation="Horizontal" Margin="0,0,0,12">

<TextBlock Text="Username" FontSize="48" Width="240"TextAlignment="Right" Margin="0,0,20,0"/>

<TextBox FontSize="48" Width="300"/></StackPanel><StackPanel Orientation="Horizontal" Margin="0,0,0,12">

<TextBlock Text="Password" Margin="0,0,20,0" FontSize="48"Width="240" TextAlignment="Right"/>

<PasswordBox Margin="0" FontSize="48" Width="300"/></StackPanel><Button Content="Login" HorizontalAlignment="Left"

Margin="257,0,0,0" FontSize="48"/></StackPanel>

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

<Basic Controls />

TextBox Normal

Multi Line

Border & Colors

<TextBox Text="Hello World" TabIndex="4" />

<TextBox Text="Hello World" Height="200"AcceptsReturn="True" />

<TextBox Text="Hello World"BorderThickness="3"BorderBrush="Black"SelectionHighlightColor="Blue"Background="LightGray" />

TextBox No Clear Button (“Blend default”)

InputScope

<TextBox Text="Hello World"TextWrapping="Wrap" />

<TextBox InputScope="Search" />

Image

Supports BMP, JPG, TIF and PNG

Source property External, starts with ‘http://’

App

Referenced Class Library

Local storage

<Image Source="http://www.server.com/Images/Windows8.png" />

<Image Source="/MyImages/Windows8.png" />

<Image Source="ms-appx:///ClassLibrary1/MyImages/Windows8.jpg" />

<Image Source="ms-appdata:///local/MyFolder/Windows8.jpg" />

<AppBar vs

CommandBar />AppBarButton, AppBarToggleButton,

AppBarSeparator

AppBar CommandBar

Properties Foreground Background IsSticky IsOpen Children

Events Opened Closed

Properties Foreground Background IsSticky IsOpen PrimaryCommands SecondaryCommands

Events Opened Closed

AppBarButtons• Windows 8.1 introduces new controls for XAML that let you

more easily create app bar command buttons that reflect the

proper design guidelines and behaviors: the AppBarButton,

AppBarToggleButton, and AppBarSeparator controls.

• App bar buttons differ from standard buttons in several ways:• Their default appearance is a circle instead of a rectangle.

• You use the Label and Icon properties to set the content instead of the

Content property. The Content property is ignored.

• The button's IsCompact property controls its size.

AppBarButtons

• FontIcon• The icon is based on a

glyph from the specified font family.

• BitmapIcon• The icon is based on a

bitmap image file with the specified Uri.

• PathIcon• The icon is based on

Path data.

• SymbolIcon• The icon is based on a

predefined list of glyphs from the Segoe UI Symbol font.

AppBarButtons Links

• Images & Paths (Vectors)

• http://modernuiicons.com

• http://thenounproject.com

• http://www.thexamlproject.com

• http://www.syncfusion.com/downloads/metrostudio

• Symbols

• http://msdn.microsoft.com/en-us/library/windows/apps/jj841126.aspx

• http://www.geekchamp.com/icon-explorer/introduction

• http://www.fontello.com/

• http://fontastic.me

<Resources />

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

31

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

33

Merged Resources

Store resources in external files

Declare once, use many times

Makes XAML shorter and easier to read

Can be stored in external assemblies

34

<Animations &

Storyboards />

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

Creating a storyboard in Expression Blend

37

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

Behaviors

ShowMessageBox Actionpublic class ShowMessageAction : DependencyObject, IAction {

#region Text Dependency Property

public string Text {get { return (string)GetValue(TextProperty); }set { SetValue(TextProperty, value); }

}

public static readonly DependencyProperty TextProperty =DependencyProperty.Register("Text",

typeof(string),typeof(ShowMessageAction),new PropertyMetadata(string.Empty));

#endregion Text Dependency Property

public object Execute(object sender, object parameter) {#pragma warning disable 4014

new MessageDialog(this.Text).ShowAsync();#pragma warning restore

return null;}

}

Links:• http://reflectionit.nl/Blog/2013/windows-8-xaml-tips-creating-blend-behaviors

• http://blendbehaviors.net/

<Styling and

Templating />

Styling and Templating

XAML = UI flexibility

Customize the look of an application without changing it’s behavior 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="24"/><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"/>

</Style></Page.Resources>

<Grid ><Button Content="Button"

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

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

Templating

Data Binding

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 validation & converters

Element to Element Binding Element binding is performed in the same manner as

Data Binding with one addition: the ElementNameproperty. ElementName defines the name of the binding source element.

<Grid><TextBlock Text="{Binding Value, ElementName=mySlider}"

FontSize="32"/><Slider x:Name="mySlider" Maximum="10" Value="6" />

</Grid>

Data Window – Sample Data

Recap & Questions

@fonssonnemans

fons.sonnemans@reflectionit.nl

fonssonnemans

reflectionit.nl/blog

Laat ons weten wat u vindt van deze sessie! Vul de

evaluatie in via www.techdaysapp.nl en maak kans op een

van de 20 prijzen*. Prijswinnaars worden bekend gemaakt

via Twitter (#TechDaysNL). Gebruik hiervoor de code op uw

badge.

Let us know how you feel about this session! Give your

feedback via www.techdaysapp.nl and possibly win one of

the 20 prizes*. Winners will be announced via Twitter

(#TechDaysNL). Use your personal code on your badge.

* Over de uitslag kan niet worden gecorrespondeerd, prijzen zijn voorbeelden – All results are final, prices are

Related sessions 16-4Slot Title Speaker

07:45 Using native code in your Windows and Windows Phone Applications Maarten Struys

07:45 Bluetooth and NFC phone to phone communication Rob Miles

10:50 What is new in XAML and tooling in Windows 8.1 Fons Sonnemans

10:50 Tiles, Notificaties en het Actiecentrum in Windows Phone 8.1 apps Rajen Kishna

10:50 Sites and Apps, hoe maak ik ze accessible Dennis Vroegop & Jeroen Hulscher

13:15 Windows and Windows Phone – Build Apps for Both Mike Taulty

13:15 Optimizing Windows Store apps for varying form factors, resolutions and viewstates Tom Verhoeff

14:50 Talking to hardware with Windows Phone Rob Miles

14:50 Crossplatform development using Mapping data and features Joost van Schaik

16:20 Building Windows Store and Windows Phone XAML apps Harikrishna Ajithkumar Menon

16:20 Lap Around Windows Phone 8.1 voor de enterprise developer Matthijs Hoekstra

16:20 Making money with Apps Fons Sonnemans

16:20 Van één app honderd apps maken? Tom Droste

16:20 Lap around Windows Phone 8.1: Introduction to the new developer platform Andy Wigley

17:45 App Analytics voor Windows Phone en Windows Store Mark Monster

17:45 Je hebt een app. Nu alleen nog verkopen! Dennis Vroegop

Related sessions 17-4Slot Title Speaker

07:45 Modern Apps for the Enterprise Dennis Mulder

09:15 Diagnosing performance issues in Xaml based Windows Phone and Windows Store Apps with Visual

Studio 2013

Harikrishna Ajithkumar Menon

09:15 Designing XAML Apps using blend for Visual Studio 2013 Fons Sonnemans

09:15 Building Windows Store apps for Windows Phone 8.1 Andy Wigley

09:15 Jouw apps op alle schermen en resoluties Martin Tirion

09:15 Combineer Windows, Windows Phone en SharePoint apps voor succesvolle enterprise oplossingen Dave Smits

10:50 Hergebruik van JavaScriptkennis bij het bouwen van Windows Store apps Timmy Kokke

10:50 Making the most from Windows Phone App Studio Tom Verhoeff

13:15 Creating games for Windows 8 and Windows Phone 8 with monogame Rob Miles

13:15 A Lap Around the PRISM Framework for Windows 8 Store Apps Mike Taulty

14:50 Bouwen en distribueren van je Enterprise apps voor Windows Phone 8.1 Matthijs Hoekstra

14:50 Zoeken in Windows en in jouw app Martin Tirion

14:50 Succesvol Enterprise apps aanbieden via de Windows en Office Store Dave Smits

16:20 Networking, Mobile Services and Authentication on Windows Phone 8.1 Andy Wigley

16:20 TypeScript en Windows Store apps Timmy Kokke