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 > Default XAML for a New Silverlight User Control

Basic XAML Syntax < TextBlock > XAML Rhymes with Camel </ TextBlock > < 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 />

Using Images

<Image />

Image = ImageBrush applied to Rectangle

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

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

Integrating Media

<MediaElement />

Used to show media (music or video)

Control Video with Code

No Built-in Controls

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

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