cleveland silverlight firestarter - xaml basics
DESCRIPTION
My slide deck from the Cleveland Silverlight Firestarter held on November 1, 2008TRANSCRIPT
![Page 1: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/1.jpg)
![Page 2: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/2.jpg)
![Page 3: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/3.jpg)
• 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
![Page 4: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/4.jpg)
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
![Page 5: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/5.jpg)
Grouping and Positioning
• Objects belong to parent objects.• Some attributes are referenced in relation to
the parent.
![Page 6: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/6.jpg)
Common Silverlight Base Layouts
Canvas
Stack Panel
Grid
![Page 7: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/7.jpg)
Using Text
• <TextBlock />
![Page 8: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/8.jpg)
Vector Shapes
• <Rectangle />• <Ellipse />• <Line />• <Polygon />• <Path />
![Page 9: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/9.jpg)
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
![Page 10: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/10.jpg)
Solid Colors
• <SolidColorBrush />– Supports creation by name
• 141 named colors supported (e.g. Blue, Red, Green)• Supports #FFFFFF or #FFFFFFFF syntax as well
![Page 11: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/11.jpg)
Linear Gradients
• <LinearGradientBrush />– Start and Stop are to set angle as numbers– Gradient Stops are the different color points
![Page 12: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/12.jpg)
Radial Gradients
• <RadialGradientBrush />– Gradient Stops are same syntax as Linear Gradient
![Page 13: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/13.jpg)
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>
![Page 14: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/14.jpg)
Using Images• <Image />
– Image = ImageBrush applied to Rectangle
<Image Width="200" Source="http://.../XBox360Logo.jpg" /><Image Width="200" Source="http://.../XBox360Logo.jpg" />
![Page 15: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/15.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:
![Page 16: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/16.jpg)
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
![Page 17: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/17.jpg)
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
![Page 18: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/18.jpg)
Transformations
• Used to make common changes to an object• Called through XAML in Object.RenderTransform tags
• Multiple transformations can be applied by using TransformGroups
![Page 19: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/19.jpg)
Transform Types
• Transform Types– <RotateTransform />
• Rotation– <ScaleTransform />
• Resizes/Stretch– <SkewTransform />
• Skews– <TranslateTransform />
• Moves– <MatrixTransform />
• Scale, Skew and Translate Combined
![Page 20: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/20.jpg)
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"/>
![Page 21: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/21.jpg)
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
![Page 22: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/22.jpg)
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
![Page 23: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/23.jpg)
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>...
![Page 24: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/24.jpg)
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>
![Page 25: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/25.jpg)
Styles in HTML
<style>p.warning {
font-color: red;}</style>
<p class=“warning”>Not all fields have been filled in.</p>
![Page 26: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/26.jpg)
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}" ... />
![Page 27: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/27.jpg)
• XAML File (.xaml extension)• Defines the look and feel
• Code-Behind file • Adds functionality
![Page 28: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/28.jpg)
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
![Page 29: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/29.jpg)
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){}
![Page 30: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/30.jpg)
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:
![Page 31: Cleveland Silverlight Firestarter - XAML Basics](https://reader035.vdocuments.us/reader035/viewer/2022062319/55561a8ed8b42ae0238b5087/html5/thumbnails/31.jpg)
Questions on XAML Basics?