05.blend expression, transformation & animation
DESCRIPTION
Windows Phone 8 progammingTRANSCRIPT
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
<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
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
Top & Left properties only make sense inside aCanvas<Canvas Width="250" Height="200" Background="Gray">
<Rectangle Canvas.Top="25" Canvas.Left="25"Width="200" Height="150" Fill="Yellow" />
</Canvas>
=
<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</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 Orientation="Vertical"><Button Content="Button" /><Button Content="Button" />
</StackPanel>
<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>
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
<Image Grid.Column="3" Source="demo.png" Stretch="None"/>
<Basic Controls />
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" />
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
<Resources />
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
31
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
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 />
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
37
The Storyboard object has interactive methods toBegin, Pause, Resume, and Stop an animation.
<Behaviors />
<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">
<Setter Property="Background" Value="#FFFF9E00"/><Setter Property="FontSize" Value="24"/><Setter Property="FontStyle" Value="Italic"/>
• </ >
• </ >
• < >
• < 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 TargetType="TextBox"><Setter Property="FontFamily" Value="Arial Black"/><Setter Property="FontSize" Value="16"/>
</Style>
<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>
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>