Silverlight 4 Course

1. Introduction to Silverlight

2. Layout

3. Input Handling

4. Applications, Resources, Deployment

5. Data Binding, View Model

6. Out of Browser, File Access, Printing

7. WCF RIA Services (4 Weeks )

Silverlight Layout Week 2

Agenda 

1. XAML Continued2. Class Hierarchy3. DependencyProperty,

AttachedProperty4. Common Properties5. Animation6. Canvas, StackPanel, Grid7. GridSplitter, ScrollViewer, Border8. ClassProject

XAML Continued<UserControl x:Class="SilverlightApplication1.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006

• Primary namespace does not have a prefix.• XAML language namespace has “x” prefix. Prefixes are by convention.• URL is a dummy URL. Nothing exists there. Just a way for XAML compiler to resolve

the symbols.• Default ns maps to : System.Windows, S.W.Automation, S.W.Controls,

S.W.C.Primitives, S.W.Data, S.W.Documents, S.W.Forms.Integration, S.W.Ink, S.W.Input, S.W.Media, S.W.M.Imaging, S.W.M.Effects, Media3D, TextFormatting, S.W. Navigation, Shapes, Shell.

Type convertor

• <Button Background=“Red” … />• Here Background is of Brush class which defines the TypeConverter attribute

as :

[TypeConverter(typeof(BrushConverter)), …]

public abstract class Brush : …

{

..

}

BrushConverter knows how to create a Brush with “Red” color.

RST

• SL Runtime • SL SDK• SL ToolKit : Has quality band for each feature.

– Some will move into SDK or runtime over time.– Some might disappear too.

Routed Events

• Bubbling.• OriginalSource.• Why bubble ? Hot Key can be defined in Root

instead of all focusable control.• textBlock1.MouseEnter += new

MouseEventHandler(textBlocks_MouseEnter);

• Handled boolean stops routing except for GotFocus, LostFocus, and MouseMove

• Some controls like Button signals Handled for Click functionality. Use AddHandler()

Class Hierarchy

• Object– DependencyObject : Dependency Property

• UIElement : Command Binding, Routed Events, Layout, Focus

– FrameworkElement :Styles, Databinding, Resources, ToolTips, Context menus

» Control : Fg, bg, fontsize» ContentControl» Button

Dependency Property

• Enables styling, automatic data binding, animation.• Values added on top of .Net properties are :

1. Change Notification : Can automatically trigger some action based on property’s meta data specified during Register() : Re-render, UpdateLayout, Refresh data bindings,.. Etc [FrameWorkPropertyMetaDataOptions.Inherit | AffectsRender | AffectsMeasure ]

2. Property Value Inheritance : Parent Element Fontsize applied to all childs automatically. (Not all properties inherit… need to opt in Register())

3. Support for multiple providers :

<StackPanel.Resources>

<Style x:Key="ImmediateStyle" TargetType="Button">

<Setter Property="Background" Value="Green"/>

</Style>

</StackPanel.Resources>

<Button Style="{StaticResource ImmediateStyle}" Background="Red">

<TextBlock>Hello</TextBlock>

</Button>

Which color the button gets : From Style or local value ?

Dependency Property Multiple Provider

• Depends on multiple providers. Order is :

1. Animation (Active or Hold),

2. Local Values (Set Value),

3. Templated Properties (ControlTemplate or DataTemplate)

4. StyleSetters (Setter)

5. Default value

Attached Property

• Property that can be arbitrarily attached to any object.

• Example : Grid.Row, Grid.Column.• Not necessarily between Parent->Child.• StackPanel does not have a FontSize,FontStyle.

– <StackPanel TextElement.FontSize=“24”… />

Common Properties• Margin• Padding• Horizontal/Vertical Alignment• Horizontal/Vertical Content Alignment• Min/Max Width/Height• Width/Height (default is Double.NaN)• Actual Width/Height• Visibility : Visible, Collapsed• Opaque : 0 to 1• FlowDirection : LeftToRight (english), RightToLeft (Arabic)

Common Properties

  Parent

  

CV

M

Vertical Alignment

Horizontal Alignment

Parent

MarginElement

Content

Padding

Height

Width

Common Properties• Margin is on the outside.

• Margin=“20” or Margin = “20, 30” or Margin=“10, 20, 30, 40” left, top, right, bottom

• Padding on inside. Same syntax as Margin

• VerticalAlignment : What to do with extra vertical space : Top, Center, Bottom, Stretch (default)

• Horizontal Alignment : Left, Center, Right, Stretch 

  

Alignment

<Stackpanel>

<Button HA=“Left”> HCA

<Button HA=“Center”

<Button HA=“Right”

<Button HA=“Stretch”Center

Right

Left

Animation• Silverlight supports only RenderTransform defined in UI

Element.• FrameworkElements supports 2 properties:

– LayoutTransform (applied before layout)– RenderTransform (after layout before

rendering)

Animation : 5 Types of 2D

• RotateTransform• ScaleTransform• SkewTransform• TranslateTransform• MatrixTransform

RotateTransform

• Angle, CenterX, CenterY

<Button RenderTransformOrigin=“0.5,0.5”>

<Button.RenderTransform>

<RotateTransform Angle=“45” CenterX=“0” CenterY=“0”/>

</Button.RenderTransform>

Hello World rotated

</Button>

ScaleTransform• Enlarges or Shrinks

– ScaleX (multiplier for width)– ScaleY(multiplier for height)– Does ActualHeight, ActualWidth changes ? No.– Element not aware of trnasform.

ScaleX=“2”

ScaleY=“2”

SkewTransform

• SkewTransform :AngleX AngleY CenterX CenterY

• TranslateTransform : X, Y – simply moves the element.

• MatrixTransform : based on matrix (not Keanu Reeves Matrix – algebra matrix)

• TransformGroup ( simultaneous transforms )

Demo – No picture.

TransformGroup

<StackPanel>

<TextBlock FontSize="28" Text="Hello">

<TextBlock.RenderTransform>

<TransformGroup>

<RotateTransform Angle="45" />

<SkewTransform CenterX="0" CenterY="0" AngleX="60"/> </TransformGroup>

</TextBlock.RenderTransform>

</TextBlock>

</StackPanel>

Storyboard<UserControl x:Class="animation_ovw_intro.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300">

<StackPanel>

<StackPanel.Resources>

<!-- Animates the rectangle's opacity. -->

<Storyboard x:Name="myStoryboard">

<DoubleAnimation Storyboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" />

</Storyboard>

</StackPanel.Resources>

<TextBlock Margin="10">Click on the rectangle to start the animation.</TextBlock>

<Rectangle MouseLeftButtonDown="Mouse_Clicked" x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" />

</StackPanel>

</UserControl>

// When the user clicks the Rectangle, the animation begins.

private void Mouse_Clicked(object sender, MouseEventArgs e)

{

myStoryboard.Begin();

}

StoryBoard

• Has Begin, Stop, Pause, Resume.

Canvas, Stack Panel, Grid• Canvas

• Canvas.Top, Canvas.Left : Attached Properties • Canvas.SetTop(), Canvas.SetLeft() 

• Stack Panel • Vertical or Horizontal Orientation• Can be nested• Can be different item types

• Grid• Column Definitions : Column Definition• Row Definitions : Row Definition• Star Sized (Remaining space)• RowSpan, ColumnSpan

  

GridSplitter, ScrollViewer, Border

• GridSplitter• Add to a cell• Specify direction

 • ScrollViewer

• HorizontalScrollBarVisibility=“Auto”

• Border• Makes optional rounded edges.• <Border BorderBrush=“Blue”

BorderThickness=“10” CornerRadius=“80”

• Does not clip the child element.

   

 

Class Project

• Animate throwing a red ball continuosly.

• http://www.codeproject.com/KB/silverlight/SilverlightBouncingBall.aspx