cleveland silverlight firestarter - xaml basics

• Similar to XML• Declarative Language • Describes the look and feel in Silverlight and WPF• Also use to describe workflow in Window Workflow

Foundation

<UserControl x:Class="MyTestSilverlightApp.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White">

</Grid></UserControl>

<UserControl x:Class="MyTestSilverlightApp.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White">

</Grid></UserControl>

Default XAML for a New Silverlight User Control

Basic XAML Syntax

<TextBlock>XAML Rhymes with Camel</TextBlock><TextBlock>XAML Rhymes with Camel</TextBlock>

<TextBlock Text="XAML Rhymes with Camel" /><TextBlock Text="XAML Rhymes with Camel" />

• Simple object

• Object with properties

Grouping and Positioning

• Objects belong to parent objects.• Some attributes are referenced in relation to

the parent.

Common Silverlight Base Layouts

Canvas

Stack Panel

Grid

Using Text

• <TextBlock />

Vector Shapes

• <Rectangle />• <Ellipse />• <Line />• <Polygon />• <Path />

Brushes• Determines how objects are painted– For painting objects (e.g. Fill)– For painting of lines (e.g. Stroke)– Supports solid color, gradient, image and video

brushes

Solid Colors

• <SolidColorBrush />– Supports creation by name

• 141 named colors supported (e.g. Blue, Red, Green)• Supports #FFFFFF or #FFFFFFFF syntax as well

Linear Gradients

• <LinearGradientBrush />– Start and Stop are to set angle as numbers– Gradient Stops are the different color points

Radial Gradients

• <RadialGradientBrush />– Gradient Stops are same syntax as Linear Gradient

Painting with Images

• <ImageBrush />

<Ellipse Width="200" Height="75" > <Ellipse.Fill> <ImageBrush ImageSource="http://.../XBox360Logo.jpg" /> </Ellipse.Fill></Ellipse>

<Ellipse Width="200" Height="75" > <Ellipse.Fill> <ImageBrush ImageSource="http://.../XBox360Logo.jpg" /> </Ellipse.Fill></Ellipse>

Using Images• <Image />

– Image = ImageBrush applied to Rectangle

<Image Width="200" Source="http://.../XBox360Logo.jpg" /><Image Width="200" Source="http://.../XBox360Logo.jpg" />

Animating with XAML

• You can create complex Animations in XAML– Animations are created in XAML– Triggered in Code

• Animations are made up of:– EventTrigger:

Triggers

• <EventTrigger />– Used to specify what starts an Animation– Properties are used to tie it to other Animation

• RoutedEvent– The event that starts the triggers– Currently, always the Loaded event no matter what is specified

• SourceName– The name of the object that has the RoutedEvent– Defaults to the object that the Trigger is part of

• Actions– A optional list of Storyboards to fire

Storyboards

• <Storyboard />– Contains one or more Animations– Supports most of the same properties as

Animations– Properties are used to share with all Animations• TargetName and TargetProperty• From, By and To• Duration• AutoReverse• RepeatBehavior

Transformations

• Used to make common changes to an object• Called through XAML in Object.RenderTransform tags

• Multiple transformations can be applied by using TransformGroups

Transform Types

• Transform Types– <RotateTransform />

• Rotation– <ScaleTransform />

• Resizes/Stretch– <SkewTransform />

• Skews– <TranslateTransform />

• Moves– <MatrixTransform />

• Scale, Skew and Translate Combined

Animating Numbers

• DoubleAnimation– Animate numeric properties

<DoubleAnimation Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width" From="200" To="1" Duration="0:0:2" AutoReverse="True"/>

<DoubleAnimation Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width" From="200" To="1" Duration="0:0:2" AutoReverse="True"/>

Key Frames

• Keyframe Animations– DoubleAnimationUsingKeyFrames– ColorAnimationUsingKeyFrames– PointAnimationUsingKeyFrames

• Allows you to create an Animation using:– KeyFrame objects that specify values at specific

times– Each KeyFrame contains KeyTimes and Values

Types of Key Frame Animation

• Three types of KeyFrames– Discrete• Specific value to set immediately

– Linear• Animate from previous value using linear interpolation

– Spline• Change value progressively using splined interpolation

Animation with KeyFrames - Example

...<DoubleAnimationUsingKeyFrames Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width"> <DoubleAnimationUsingKeyFrames.KeyFrames> <SplineDoubleKeyFrame Value="0" KeyTime="0:0:1" /> <SplineDoubleKeyFrame Value="50" KeyTime="0:0:2" /> <SplineDoubleKeyFrame Value="150" KeyTime="0:0:4" /> </DoubleAnimationUsingKeyFrames.KeyFrames></DoubleAnimationUsingKeyFrames>...

...<DoubleAnimationUsingKeyFrames Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width"> <DoubleAnimationUsingKeyFrames.KeyFrames> <SplineDoubleKeyFrame Value="0" KeyTime="0:0:1" /> <SplineDoubleKeyFrame Value="50" KeyTime="0:0:2" /> <SplineDoubleKeyFrame Value="150" KeyTime="0:0:4" /> </DoubleAnimationUsingKeyFrames.KeyFrames></DoubleAnimationUsingKeyFrames>...

Integrating Media

• <MediaElement />– Used to show media (music or video)• Control Video with Code• No Built-in Controls

<Canvas xmlns="..." xmlns:x="..."> <MediaElement Source="xbox.wmv" /> </Canvas>

<Canvas xmlns="..." xmlns:x="..."> <MediaElement Source="xbox.wmv" /> </Canvas>

Styles in HTML

<style>p.warning {

font-color: red;}</style>

<p class=“warning”>Not all fields have been filled in.</p>

Styles in XAML

Create Style objects

Apply to TargetType of Style

<Style x:Key="MainButton" TargetType="Button"> <Setter Property="Width" Value="80" /> <Setter Property="Height" Value="35" /> <Setter Property="FontSize" Value="18" /></Style>

<Style x:Key="MainButton" TargetType="Button"> <Setter Property="Width" Value="80" /> <Setter Property="Height" Value="35" /> <Setter Property="FontSize" Value="18" /></Style>

<Button x:Name="Button1" Style="{StaticResource MainButton}" ... /><Button x:Name="Button2" Style="{StaticResource MainButton}" ... /><Button x:Name="Button1" Style="{StaticResource MainButton}" ... /><Button x:Name="Button2" Style="{StaticResource MainButton}" ... />

• XAML File (.xaml extension)• Defines the look and feel

• Code-Behind file • Adds functionality

Code-Behind Files• Adds functionality, including event handling• Supported languages:

• VB.NET• C#• IronRuby• IronPython• Other .NET languages

• Support for Dynamic Languages comes in the Silverlight Dynamic Languages SDK

Event Handling<Grid x:Name="LayoutRoot" Background="White"> <Button x:Name="button1" Click="button1_Click"> </Button> </Grid>

In the code behind for this XAML file, the event handler looks like this:

private void button1_Click(object sender, RoutedEventArgs e){}

<Grid x:Name="LayoutRoot" Background="White"> <Button x:Name="button1" Click="button1_Click"> </Button> </Grid>

In the code behind for this XAML file, the event handler looks like this:

private void button1_Click(object sender, RoutedEventArgs e){}

XAML and Code

<TextBlock x:Name="txtXAMLHint" Text="XAML Rhymes with Camel" Width="100" /><TextBlock x:Name="txtXAMLHint" Text="XAML Rhymes with Camel" Width="100" />

txtXAMLHint.Width = 200;txtXAMLHint.Text = "Camels should learn XAML!";

txtXAMLHint.Width = 200;txtXAMLHint.Text = "Camels should learn XAML!";

In the XAML, within a container:

Accessing it in the Code-Behind:

Questions on XAML Basics?