05.Blend Expression, Transformation & Animation

transcript

Nguyen Tuan | Microsoft Certified Trainer

Introduction to Blend Expression

Transformation using Blend Expression

Animation using Blend Expression

In-Box ControlsButton

Checkbox Radio Button

Hyperlink

http://vnexpress.net

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

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

Is a Drawing Surface

Children have fixed positions relative to top-left-corner<Canvas Width="250" Height="200" Background="Gray">

</Canvas>

The Canvas

The Rectangle

Top & Left properties only make sense inside aCanvas<Canvas Width="250" Height="200" Background="Gray">

</Canvas>

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

<SolidColorBrush</Button.Background><Button.Foreground>

<SolidColorBrush</Button.Foreground><Button.Content>

This is a button</Button.Content>

</Button>

Color="Blue"/>

Color="Red"/>

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

The StackPanel will place its children in either acolumn (default) or row. This is controlled by theOrientation property.

</StackPanel>

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

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

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

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 areset 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 Đell has the size of it ͛s ĐoŶteŶts Star size: whatever space is left over from fixed- and auto-sized columns is allocated to

all of the columns with star-sizing

Normal

Multi Line

Border & Colors

No Clear Button(“Blen default”)<TextBox Text="Hello World"

TextWrapping="Wrap" />

InputScope<TextBox InputScope="Search" />

Supports BMP, JPG, TIF and PNG

Source property

External, start with ‘http’:

AppBar CommandBar

Properties Foreground Background IsSticky IsOpen PrimaryCommands SecondaryCommands

Events Opened Closed

Properties Foreground

Background

IsSticky

IsOpen

Children

Events Opened

Closed

AppBarButton

AppBarToggleButton AppBarSeparator

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

• 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

Reusable objects such as data, styles and templates.

Assigned a unique key (x:Key) so you can referenceto it.

Every element has a Resources property. Nesting Support

All static resources are loaded on page load Resource is loaded even if not used

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

Store resources in external files

Declare once, use many times

Makes XAML shorter and easier to read

Can be stored in external assemblies

<Animations &

Storyboards />

Recording

Easing

Reusable

View targeted code

XAML supports key frames

A key frame defines an objects target value on amoment 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

The Storyboard object has interactive methods toBegin, Pause, Resume, and Stop an animation.

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

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

• </ >

• < >

• < Content="Button"• Style="{

HollandButtonStyle}"/>

• </ >

If You omit the Style’s key an specify only the TargetType, then the Style is automatically applied to allelements of that target type within the same scope (it isimplicitly applied).

This is typically called a typed style as opposed to anamed style.

</Style>

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

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

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

</Style></Page.Resources>

<Grid ><Button Content="Button"

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

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

Data Binding

Data binding is the process that establishes a connection, orbinding, between the UI and the business object which allows datato 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 supportsvalidation & converters

Element binding is performed in the same manner asData Binding with one addition: the ElementNameproperty. ElementName defines the name of thebinding source element.

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

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

</Grid>

05.Blend Expression, Transformation & Animation

Mobile