Cleveland Silverlight Firestarter - XAML Basics

[object Object],[object Object],[object Object],[object Object],< 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 Text ="XAML Rhymes with Camel" /> ,[object Object],[object Object]

Grouping and Positioning ,[object Object],[object Object]

Common Silverlight Base Layouts Canvas Stack Panel Grid

Vector Shapes ,[object Object],[object Object],[object Object],[object Object],[object Object]

Brushes ,[object Object],[object Object],[object Object],[object Object]

Solid Colors ,[object Object],[object Object],[object Object],[object Object]

Linear Gradients ,[object Object],[object Object],[object Object]

Radial Gradients ,[object Object],[object Object]

Painting with Images ,[object Object],<Ellipse Width="200" Height="75" > <Ellipse.Fill> <ImageBrush ImageSource="http://.../XBox360Logo.jpg" /> </Ellipse.Fill> </Ellipse>

Using Images ,[object Object],[object Object],<Image Width="200" Source="http://.../XBox360Logo.jpg" />

Animating with XAML ,[object Object],[object Object],[object Object],[object Object],[object Object]

Triggers ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Storyboards ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Transformations ,[object Object],[object Object],[object Object]

Transform Types ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Animating Numbers ,[object Object],[object Object],<DoubleAnimation Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width" From="200" To="1" Duration="0:0:2" AutoReverse="True"/>

Key Frames ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Types of Key Frame Animation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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> ...

Integrating Media ,[object Object],[object Object],[object Object],[object Object],<Canvas xmlns="..." xmlns:x="..."> <MediaElement Source="xbox.wmv" /> </Canvas>

Styles in HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Styles in XAML ,[object Object],[object Object],< 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 }" ... />

[object Object],[object Object],[object Object],[object Object]

Code-Behind Files ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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) { }

XAML and Code < TextBlock x:Name= "txtXAMLHint" Text ="XAML Rhymes with Camel" Width ="100" /> txtXAMLHint.Width = 200; txtXAMLHint.Text = " Camels should learn XAML! " ; In the XAML, within a container: Accessing it in the Code-Behind:

Resources ,[object Object],[object Object]

Cleveland Silverlight Firestarter - XAML Basics

Recommended

Recommended

More Related Content

Similar to Cleveland Silverlight Firestarter - XAML Basics

Similar to Cleveland Silverlight Firestarter - XAML Basics (20)

More from Sarah Dutkiewicz

More from Sarah Dutkiewicz (20)

Recently uploaded

Recently uploaded (20)

Cleveland Silverlight Firestarter - XAML Basics