31

Cleveland Silverlight Firestarter - XAML Basics

Embed Size (px)

DESCRIPTION

My slide deck from the Cleveland Silverlight Firestarter held on November 1, 2008

Citation preview

Page 1: Cleveland Silverlight Firestarter - XAML Basics
Page 2: Cleveland Silverlight Firestarter - XAML Basics
Page 3: 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

Page 4: Cleveland Silverlight Firestarter - XAML Basics

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

Grouping and Positioning

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

the parent.

Page 6: Cleveland Silverlight Firestarter - XAML Basics

Common Silverlight Base Layouts

Canvas

Stack Panel

Grid

Page 7: Cleveland Silverlight Firestarter - XAML Basics

Using Text

• <TextBlock />

Page 8: Cleveland Silverlight Firestarter - XAML Basics

Vector Shapes

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

Page 9: Cleveland Silverlight Firestarter - XAML Basics

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

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

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

Radial Gradients

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

Page 13: Cleveland Silverlight Firestarter - XAML Basics

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Code-Behind file • Adds functionality

Page 28: Cleveland Silverlight Firestarter - XAML Basics

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

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

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

Questions on XAML Basics?