cleveland silverlight firestarter - xaml basics
DESCRIPTION
My slide deck from the Cleveland Silverlight Firestarter held on November 1, 2008TRANSCRIPT
• 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?