The document provides an introduction to using Blend expressions for transformation and animation. It then covers various in-box controls in UWP including buttons, text boxes, progress indicators, and lists. It discusses layout controls like canvas, stack panel, and grid. The document also covers XAML syntax and attributes. Finally, it discusses animations and storyboards, behaviors, styling and templating, data binding, and element binding.

1. Nguyen Tuan | Microsoft Certified Trainer

2. Introduction to Blend Expression
Transformation using Blend Expression
Animation using Blend Expression

9. In-Box Controls
Button
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

10. <Layout Controls />

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

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

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

16. =
<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);

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

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

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

21.  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 Đ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"/>

23. <Basic Controls />

24.  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" />

25.  No Clear Button(“Blen default”)
<TextBox Text="Hello World"
TextWrapping="Wrap" />
 InputScope
<TextBox InputScope="Search" />

26.  Supports BMP, JPG, TIF and PNG
 Source property
 External, start with ‘http’:

27. AppBar CommandBar
 Properties
 Foreground
 Background
 IsSticky
 IsOpen
 PrimaryCommands
 SecondaryCommands
 Events
 Opened
 Closed
 Properties
 Foreground
 Background
 IsSticky
 IsOpen
 Children
 Events
 Opened
 Closed

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

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

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

31. <Resources />

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

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

36.  Store resources in external files
 Declare once, use many times
 Makes XAML shorter and easier to read
 Can be stored in external assemblies
34

37. <Animations &
Storyboards />

39. Recording
Easing

40. Reusable
View targeted code

41.  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)

42. Storyboards
 Creating a storyboard in Expression Blend
37

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

44. <Behaviors />

47. <Styling and
Templating />

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

49. <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="{
HollandButton
Style}"/>

50.  If You omit the Style’s key an 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>

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

52. Data Binding

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

56.  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.
<Grid>
<TextBlock Text="{Binding Value, ElementName=mySlider}"
FontSize="32"/>
<Slider x:Name="mySlider" Maximum="10" Value="6" />
</Grid>