Cleveland Silverlight Firestarter - XAML Basics

2,026 views

Published on

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

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,026
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
96
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Cleveland Silverlight Firestarter - XAML Basics

    1. 3. <ul><li>Similar to XML </li></ul><ul><li>Declarative Language </li></ul><ul><ul><li>Describes the look and feel in Silverlight and WPF </li></ul></ul><ul><ul><li>Also use to describe workflow in Window Workflow Foundation </li></ul></ul>< UserControl x : Class =&quot;MyTestSilverlightApp.Page&quot; xmlns =&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot; xmlns : x =&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot; Width =&quot;400&quot; Height =&quot;300&quot;> < Grid x : Name =&quot;LayoutRoot&quot; Background =&quot;White&quot;> </ Grid > </ UserControl > Default XAML for a New Silverlight User Control
    2. 4. Basic XAML Syntax < TextBlock > XAML Rhymes with Camel </ TextBlock > < TextBlock Text =&quot;XAML Rhymes with Camel&quot; /> <ul><li>Simple object </li></ul><ul><li>Object with properties </li></ul>
    3. 5. Grouping and Positioning <ul><li>Objects belong to parent objects. </li></ul><ul><li>Some attributes are referenced in relation to the parent. </li></ul>
    4. 6. Common Silverlight Base Layouts Canvas Stack Panel Grid
    5. 7. Using Text <ul><li><TextBlock /> </li></ul>
    6. 8. Vector Shapes <ul><li><Rectangle /> </li></ul><ul><li><Ellipse /> </li></ul><ul><li><Line /> </li></ul><ul><li><Polygon /> </li></ul><ul><li><Path /> </li></ul>
    7. 9. Brushes <ul><li>Determines how objects are painted </li></ul><ul><ul><li>For painting objects (e.g. Fill) </li></ul></ul><ul><ul><li>For painting of lines (e.g. Stroke) </li></ul></ul><ul><ul><li>Supports solid color, gradient, image and video brushes </li></ul></ul>
    8. 10. Solid Colors <ul><li><SolidColorBrush /> </li></ul><ul><ul><li>Supports creation by name </li></ul></ul><ul><ul><ul><li>141 named colors supported (e.g. Blue, Red, Green) </li></ul></ul></ul><ul><ul><ul><li>Supports #FFFFFF or #FFFFFFFF syntax as well </li></ul></ul></ul>
    9. 11. Linear Gradients <ul><li><LinearGradientBrush /> </li></ul><ul><ul><li>Start and Stop are to set angle as numbers </li></ul></ul><ul><ul><li>Gradient Stops are the different color points </li></ul></ul>
    10. 12. Radial Gradients <ul><li><RadialGradientBrush /> </li></ul><ul><ul><li>Gradient Stops are same syntax as Linear Gradient </li></ul></ul>
    11. 13. Painting with Images <ul><li><ImageBrush /> </li></ul><Ellipse Width=&quot;200&quot; Height=&quot;75&quot; > <Ellipse.Fill> <ImageBrush ImageSource=&quot;http://.../XBox360Logo.jpg&quot; /> </Ellipse.Fill> </Ellipse>
    12. 14. Using Images <ul><li><Image /> </li></ul><ul><ul><li>Image = ImageBrush applied to Rectangle </li></ul></ul><Image Width=&quot;200&quot; Source=&quot;http://.../XBox360Logo.jpg&quot; />
    13. 15. Animating with XAML <ul><li>You can create complex Animations in XAML </li></ul><ul><ul><li>Animations are created in XAML </li></ul></ul><ul><ul><li>Triggered in Code </li></ul></ul><ul><li>Animations are made up of: </li></ul><ul><ul><li>EventTrigger: </li></ul></ul>
    14. 16. Triggers <ul><li><EventTrigger /> </li></ul><ul><ul><li>Used to specify what starts an Animation </li></ul></ul><ul><ul><li>Properties are used to tie it to other Animation </li></ul></ul><ul><ul><ul><li>RoutedEvent </li></ul></ul></ul><ul><ul><ul><ul><li>The event that starts the triggers </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Currently, always the Loaded event no matter what is specified </li></ul></ul></ul></ul><ul><ul><ul><li>SourceName </li></ul></ul></ul><ul><ul><ul><ul><li>The name of the object that has the RoutedEvent </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Defaults to the object that the Trigger is part of </li></ul></ul></ul></ul><ul><ul><ul><li>Actions </li></ul></ul></ul><ul><ul><ul><ul><li>A optional list of Storyboards to fire </li></ul></ul></ul></ul>
    15. 17. Storyboards <ul><li><Storyboard /> </li></ul><ul><ul><li>Contains one or more Animations </li></ul></ul><ul><ul><li>Supports most of the same properties as Animations </li></ul></ul><ul><ul><li>Properties are used to share with all Animations </li></ul></ul><ul><ul><ul><li>TargetName and TargetProperty </li></ul></ul></ul><ul><ul><ul><li>From, By and To </li></ul></ul></ul><ul><ul><ul><li>Duration </li></ul></ul></ul><ul><ul><ul><li>AutoReverse </li></ul></ul></ul><ul><ul><ul><li>RepeatBehavior </li></ul></ul></ul>
    16. 18. Transformations <ul><li>Used to make common changes to an object </li></ul><ul><li>Called through XAML in Object .RenderTransform tags </li></ul><ul><li>Multiple transformations can be applied by using TransformGroups </li></ul>
    17. 19. Transform Types <ul><li>Transform Types </li></ul><ul><ul><li><RotateTransform /> </li></ul></ul><ul><ul><ul><li>Rotation </li></ul></ul></ul><ul><ul><li><ScaleTransform /> </li></ul></ul><ul><ul><ul><li>Resizes/Stretch </li></ul></ul></ul><ul><ul><li><SkewTransform /> </li></ul></ul><ul><ul><ul><li>Skews </li></ul></ul></ul><ul><ul><li><TranslateTransform /> </li></ul></ul><ul><ul><ul><li>Moves </li></ul></ul></ul><ul><ul><li><MatrixTransform /> </li></ul></ul><ul><ul><ul><li>Scale, Skew and Translate Combined </li></ul></ul></ul>
    18. 20. Animating Numbers <ul><li>DoubleAnimation </li></ul><ul><ul><li>Animate numeric properties </li></ul></ul><DoubleAnimation Storyboard.TargetName=&quot;theCircle&quot; Storyboard.TargetProperty=&quot;Width&quot; From=&quot;200&quot; To=&quot;1&quot; Duration=&quot;0:0:2&quot; AutoReverse=&quot;True&quot;/>
    19. 21. Key Frames <ul><li>Keyframe Animations </li></ul><ul><ul><li>DoubleAnimationUsingKeyFrames </li></ul></ul><ul><ul><li>ColorAnimationUsingKeyFrames </li></ul></ul><ul><ul><li>PointAnimationUsingKeyFrames </li></ul></ul><ul><li>Allows you to create an Animation using: </li></ul><ul><ul><li>KeyFrame objects that specify values at specific times </li></ul></ul><ul><ul><li>Each KeyFrame contains KeyTimes and Values </li></ul></ul>
    20. 22. Types of Key Frame Animation <ul><li>Three types of KeyFrames </li></ul><ul><ul><li>Discrete </li></ul></ul><ul><ul><ul><li>Specific value to set immediately </li></ul></ul></ul><ul><ul><li>Linear </li></ul></ul><ul><ul><ul><li>Animate from previous value using linear interpolation </li></ul></ul></ul><ul><ul><li>Spline </li></ul></ul><ul><ul><ul><li>Change value progressively using splined interpolation </li></ul></ul></ul>
    21. 23. Animation with KeyFrames - Example ... <DoubleAnimationUsingKeyFrames Storyboard.TargetName=&quot;theCircle&quot; Storyboard.TargetProperty=&quot;Width&quot;> <DoubleAnimationUsingKeyFrames.KeyFrames> <SplineDoubleKeyFrame Value=&quot;0&quot; KeyTime=&quot;0:0:1&quot; /> <SplineDoubleKeyFrame Value=&quot;50&quot; KeyTime=&quot;0:0:2&quot; /> <SplineDoubleKeyFrame Value=&quot;150&quot; KeyTime=&quot;0:0:4&quot; /> </DoubleAnimationUsingKeyFrames.KeyFrames> </DoubleAnimationUsingKeyFrames> ...
    22. 24. Integrating Media <ul><li><MediaElement /> </li></ul><ul><ul><li>Used to show media (music or video) </li></ul></ul><ul><ul><ul><li>Control Video with Code </li></ul></ul></ul><ul><ul><ul><li>No Built-in Controls </li></ul></ul></ul><Canvas xmlns=&quot;...&quot; xmlns:x=&quot;...&quot;> <MediaElement Source=&quot;xbox.wmv&quot; /> </Canvas>
    23. 25. Styles in HTML <ul><li><style> </li></ul><ul><li>p.warning { </li></ul><ul><li>font-color: red; </li></ul><ul><li>} </li></ul><ul><li></style> </li></ul><ul><li><p class=“warning”>Not all fields have been filled in.</p> </li></ul>
    24. 26. Styles in XAML <ul><li>Create Style objects </li></ul><ul><li>Apply to TargetType of Style </li></ul>< Style x : Key =&quot;MainButton&quot; TargetType =&quot;Button&quot; > < Setter Property =&quot;Width&quot; Value =&quot;80&quot; /> < Setter Property =&quot;Height&quot; Value =&quot;35&quot; /> < Setter Property =&quot;FontSize&quot; Value =&quot;18&quot; /> </ Style > < Button x : Name =&quot;Button1&quot; Style =&quot;{ StaticResource MainButton }&quot; ... /> < Button x : Name =&quot;Button2&quot; Style =&quot;{ StaticResource MainButton }&quot; ... />
    25. 27. <ul><li>XAML File (.xaml extension) </li></ul><ul><ul><li>Defines the look and feel </li></ul></ul><ul><li>Code-Behind file </li></ul><ul><ul><li>Adds functionality </li></ul></ul>
    26. 28. Code-Behind Files <ul><ul><li>Adds functionality, including event handling </li></ul></ul><ul><ul><li>Supported languages: </li></ul></ul><ul><ul><ul><li>VB.NET </li></ul></ul></ul><ul><ul><ul><li>C# </li></ul></ul></ul><ul><ul><ul><li>IronRuby </li></ul></ul></ul><ul><ul><ul><li>IronPython </li></ul></ul></ul><ul><ul><ul><li>Other .NET languages </li></ul></ul></ul><ul><ul><li>Support for Dynamic Languages comes in the Silverlight Dynamic Languages SDK </li></ul></ul>
    27. 29. Event Handling < Grid x : Name =&quot;LayoutRoot&quot; Background =&quot;White&quot;> < Button x : Name =&quot;button1&quot; Click =&quot;button1_Click&quot;> </ Button > </ Grid > In the code behind for this XAML file, the event handler looks like this: private void button1_Click( object sender, RoutedEventArgs e) { }
    28. 30. XAML and Code < TextBlock x:Name= &quot;txtXAMLHint&quot; Text =&quot;XAML Rhymes with Camel&quot; Width =&quot;100&quot; /> txtXAMLHint.Width = 200; txtXAMLHint.Text = &quot; Camels should learn XAML! &quot; ; In the XAML, within a container: Accessing it in the Code-Behind:
    29. 31. Resources <ul><li>Silverlight Dynamic Languages SDK: http://www.codeplex.com/sdlsdk/Release/ProjectReleases.aspx?ReleaseId=17839 </li></ul><ul><li>Jeff’s Series on Silverlight Layouts: http://tinyurl.com/jeffbsilverlightlayoutseries </li></ul>
    30. 32. Questions on XAML Basics?

    ×