Document Sample
Subversion Powered By Docstoc
					Silverlight 2.0
                        What will be Covered Today

   Silverlight
      What it is (and isn’t).

   The Tools Needed
      Visual Studio 2008, Expression Blend, Expression Design

   Silverlight Applications
      The Application Entry point (Application_Start event)
      How they get packaged (*.dlls in *.xap packages)
      Where they are on the server (ClientBin versus Bin)
      How they get transmitted to the client (the object tag)

   XAML
      No 2 ways about it: learn XAML
          The good news? It gets easy…fast.
          The bad news? Still no 2 ways around it…

   Basic Production Methodologies
      Resources, Styles, Templates, Localization, on-demand Loading, etc.

Silverlight 2.0

       What it is
      Why use it
How to get started today
                              Silverlight (Ag)
                             What it is (and isn’t)

What it isn’t:
     It isn’t Flash, or a Flash killer, or Flash competitor.
     It’s on the other end of the spectrum from Flash.

                          Silverlight: What it is
                             (10,000 Feet View)

   It’s WPF/E:

        A subset (but hopefully the important bits) of WPF for desktop
        Runs with Managed, Compiled Code and therefore Speed
        2D (but 3D coming right up)
        Time based Animation (unlike some others…)
        Backed by solid .NET classes (Regex, Xml, cryptography, isolated storage,
         sockets, WCF, etc.)
        Declarative styling, templating, and data binding.
        Great communication stack (sockets, WCF, etc.)
        Develop, debug, and deliver with real tools (Visual Studio et al)
        Plentiful controls (from Microsoft, 3rd parties, WPF developers, etc).
        CLR, DLR.
        Windows, Linux (Moonlight), Mobile.
        Better UIX in general…

                 About the UIX stuff…
 UIX Is important -- but overrated for the wrong reasons.

 UIX doesn’t mean Wizz…it means More Data Dimensions – more Information:
     InPlace:
         Color: Hot/Cold, Active/Disabled
         Motion: Shake: Fragile? Boiling Hot?
         Angle: Direction / Gauge / Vector length (speed/percentage)
         Opacity & Size: Relevance
     Peripheral Information:
         Tooltips, hover-downs, side panels, etc.

 Faster Comprehension:
     = better following of instructions (less errors)
     = More productivity
 More Fun:
     = More Engagement
          = Less zoning out (ie, less errors)
          = More word of mouth (ie more free marketing)

         If you just have to compare the two…

 Macromedia Flash was first offered in 1996.
 Microsoft offered Silverlight Sept 2007and is arguably already at the 80% mark.
 You do the math as to when it will leave Flash behind.

 Penetration not an issue. Just FUD.
     Will be distributed with Windows 7, as Flash was for Windows Me, 2000,
      XP…which was their launching pad.

Silverlight Applications

    The Development Tools needed.

 Applications, Packages and Deployment.
                              The Tools Needed

   Visual Studio 2008
      Silverlight 2.0 SDK (@ MSDN)
      Silverlight Toolkit (@ CodePlex)

   MSDN Documentation
   MSDN Forum

   Expression Blend 2.5
      Helps with animations
      IntelliSense for Blend (Plugin)

   Expression Design
      For vector art work

               Visual Studio Solution structure (2 Projects)

   Visual Studio creates a Solution with
    two Projects:
      The Silverlight project
           (Where we will be
            concentrating our work)
      An ASP.NET WebSite project
           used just to host the
            assembly and provide server
            and clientside debugging tools

   Silverlight project is:
      Compiled to *.dll,
      Package in *.xap
      Placed in ClientBin versus Bin
      Where it sits to be retrieved by the
         end user’s Client Browser as a
         resource by the HTML page later.

                        Silverlight Applications
                 From Application to UserControl to *.xap

   Entry point is App.xaml (Type:

   Application_Startup is used to load
    first UserControl (by default called

                          The HTML Page and its
                           OBJECT/EMBED tag

   The HTML page uses an OBJECT tag to
    embed the Silverlight player,
      Uses a Param indicating the Url to
        the *.xap package which it goes
        and fetches.

   You can:
      Embed the OBJECT tag directly
       (not recommended)
      Use a script to do it
          NB: much like how Flash
           community use the SWFObject
      Use the ASP:Silverlight control to
       do it for you.

                  Section Summary…

                      Use Visual Studio 2008
         (it’s doable in 2005, just a little more painful)
               Get the SDK, and Toolkit extensions
The Application class’ Aplication_Start event is the entry point
                Get’s Compiled into an Assembly
                     Gets Packaged as a *.xap
        Gets copied to the Server’s ClientBin directory
Gets Pulled to the Client’s Browser using an HTML OBJECT tag.
             Language Basics

    Elements, Containers, Events, Binding,
Transformations, Clips, Animations, and more…
                   XAML: Used to build interfaces
             Elements, Resources, Transformations, Binding

   UI elements are developed declaratively in XAML.
      Which is XML Format (single root, nested controls)

   Many UI elements to use:
      Primitives Shapes (Line, Ellipse, Rectangle, Path, etc).
      Image, TextBlock, etc.
      Input Controls (TextBox, RadioButton, CheckBox, etc.)
      Containers (StackPanel, Canvas, DockPanel, Grid, Border, Custom, etc.)
      ListBox, TooltipService, Popup, ScrollBar, Slider, ScrollViewer, etc.
      Composite Controls (Calendar, DatePicker, etc.)
      TabControl, etc.

   Each UserControl has a Resources Dictionaries
      For Brushes (Solid, Gradient, Tile, Video), Styles, and Control Templates

   Change Appearance Opacity, Transformations (Translate, Rotate, Shear, Matrix) and
    Clip Geometries).

   Markup Extensions (beyond XML proper):
      Binding To Static Strings, Lists, and DTOs, Localizable Resources
      Using optional DataConverters
                         Shapes & Brushes

   Shapes
      Line
      Rectangle
      Ellipse
      Polygon
      Path
   Brushes
      SolidColorBrush
      LinearGradientBrush
      RadialGradientBrush
      ImageBrush
      VideoBrush

                             XAML: UserControls
        Introducing UserControls, Namespaces, And CodeBehind

   A UserControl’s Files:
      An *.xaml file
      An *.cs file

   What to notice:
      The root UserControl tag.
      The Imported namespaces:
          The default xaml namespace
               Which defines the
          The ‘x’ namespace
               Defines basic attributes:
                     x:Class
                     x:Name
                     x:Key
      The class is wired to the XAML file
       with the x:Class attribute.
      The first nested control: Grid.

                        XAML: Adding Elements
                               Nested Controls

   Start with just a sized Button

   What to notice:
      Again:
          A UserControl
          Importing namespaces (xmlns)
          Link to code behind (x:Class)
          Starting with a Grid

      Standard XML:
          nested tags: the base
           UserControl contains a f Grid,
           which contains a Button.
          attributes: The Button element
           has standard XML attributes
           (in this case Width and

               XAML: Customizable Nested Content
          Can be Text, Images, Complex…Simple, or nested…

   Similar to ASP.NET, but not exactly...
   Eg: why Content, not Text Attribute?

   What to notice:
      Again:
          a UserControl
          Importing namespaces (xmlns)
          Link to code behind (x:Class)
          Starting with a Grid

      Content means it doesn’t have to
       be text -- it can be anything.
         It can be an Image…
              In which case we use the
                Content SubElement, not
      Or (CONT)…

              XAML: Customizable Nested Content
          Can be Text, Images, Complex…Simple, or nested…

 Content can nest more than Text

   What to notice:
      Again:
          UserControl, xmlns, x:Class,
          Content means text – or
            anything else:
               an Image (as we just saw)
               a Panel containing many
               Or Panels containing
                 Panels, containing
                 elements, ad nausea…

   This is the basis of a very
    customizable UI experience.
   NOTE: But TextBlock is for Text only…

                            XAML: Element Sizing
                   Dependent On Content and Container…

What happens if no Width/Height defined?

   What to notice:
      Again:
          UserControl, xmlns, x:Class, Grid
          Button’s Content = anything.

      No sizing defined? Then size is
       defined by parent Container Panel.
         In this case, Grid tells it to fill its
           specified Cell (since no Cell
           specified, fills the whole Grid).
      To adjust layout, use Margin,
       VerticalAlignment and

                          XAML: Containers
         Use System and Custom Containers to layout controls

   There are several MS provided
    Container Panels:
      StackPanel (Vert, Horiz.)
      Canvas (Left, Top)
      DockPanel (Dock position)
      Grid (Row, Column)
      Border
      FlowPanel (cf: display:inline)
   Making customizable ones is easy:
      Radial (Angle)
      Random (Speed?)
      PlanetSurface (Gravity?)
      Etc.

   We’ll come back to Panels and
    Attached Properties in a second…

                               XAML: Styling
                    Resource Dictionary and Style entries

Hey! Attributes?? What about CSS?!?

   What to notice:
      Again:
          UserControl, xmlns, x:Class, Grid
          Button’s Content = anything.

      The UserControl’s Resources
         Is a key/object dictionary
         Often used for Style objects:
               Specific Target with
               Add n Setter’s to specify
                Values for named Propertys.
      Retrieve w/ {StaticResource keyName}

                      XAML: Resources Dictionary
                  Can contain Styles, Brushes, Templates…

A Resource Dictionary doesn’t have to just
   contain Style elements…

   What to notice:
      Again:
          UserControl, xmlns, x:Class, Grid
          Button’s Content = anything.
          Resources Dictionary is used

      The Resource Dictionary can contain
       any resource (Brushes, Styles,
       Converters, strings, – you name it (w/
       x:Key)) and it’s usable throughout the

      Note how the Button uses Style, which
       in turn references other
       StaticResources (such as a Brush in
       this case).

                    XAML: Resources Dictionary
              Can be nested…all the way back to App.xaml

   Each container element can potentially
    have its own Resources Dictionary

   What to notice:
      Again:
          UserControl, xmlns, x:Class,
          Button’s Content = anything.
          Resources Dictionary is used

      Bubbles up dictionaries, searching
       for given x:Key, till found.
      Resources Dictionaries are available
       on Container controls (Grid,
       UserControl, etc.) whereas not
       others (ie: Button no).

      But generally just used on
       UserControl.xaml, or App.xaml

                     XAML: Control Templates
            Completely change the appearance of Controls

   Go beyond binding to Styles…Bind to

   What to notice:
      Again:
          UserControl, xmlns, x:Class,
          Button’s Content = anything.
          Resources Dictionary is used

      You can completely change the
       appearance of controls
      While keeping identical

      Similar to ASP.NET control
       templates, but generally cleaner

                          XAML: Control Events
                          Couldn’t be much easier…

As usual with MS, Events couldn’t be easier:

   Most elements have:
    Loaded, SizeChanged, GotFocus,
    LostFocus, KeyDown, KeyUp, MouseEnter,
    MouseMove, MouseLeave,
    MouseLeftButtonUp, LostMouseCapture
   Elements may then have specific events:
    Click (for Button)

   What to notice:
      Again:
          UserControl, xmlns, x:Class, Grid
          Resources Dictionary is used

      VS automatically creates the
      Args is RoutedEvents (bubbles)
      Note weird omissions (no DblCick)
                       Section Summary…
                           (The Basics)

We always are working within a UserControl
We start by defining required namespaces (default and x)
We use x:Class to connect the XAML to the code behind.
Generally start within a Grid panel/container element.
Elements are nested within each other…even controls (cf: Content)
We use Resources Dictionaries for UI Resources (Brushes, Styles,
Templates) and x:Key them
We then refer to the static resources using {StaticResource keyName}
Events and EventHandlers are much like with WinForms or WebForms
  XAML (Cont)
And Attached Properties
                            XAML: Containers
                      StackPanel, Canvas, DockPanel
                        And Attached Properties…
   We’ve introduced some of the layout
    panels one can use.
   What we didn’t spend time explaining
    was that they rely on Attached
    Properties syntax.
   Attached Properties allow different
    child elements to specify values for
    properties actually defined in a parent

   In other words…a child element
    (Button) can inform the parent element
    (Canvas) where it wants to be
    presented (by filling in Canvas.Left
    and Canvas.Right) even though the
    Left and Right properties were not
    defined in Button – they’re attached.
   Somewhat analogous to Extension
    Properties (rather than Extension

                            XAML: Containers

   What to notice:
      More complex than other Panels
       as one can define Columns/Rows
      Obviously different than HTML’s
       TABLE, TR, TD solution (closer to
       WinForm’s solution) with rows and
       cells first, and elements assigned
       to them via attributes not
      Advantages over HTML TABLE:
           Easier Editing: moving
            elements around is easier than
            HTML cut/paste – just change
            two Attributes.
           Faster Rendering: grid format
            is defined first: doesn’t have
            to get to last element before it
            knows number of columns.
      If no column/rows defined, acts as
       one big old cell.

                      XAML: Attached Propeties
                             Depend on Context

   MSDN: “an Attached Property is
    intended to be used as a type of
    global property that is settable on any

   But it doesn’t mean anybody cares…(it
    depends on the context).

   Think of Attached Properties as:
      HTML Texto’s injected for use by
        whomever needs them,
      or maybe think of them as
        Extended Properties similar to C#
        3.0 Extended Methods

                 Section Summary…
         (Containers and Attached Properties)

We generally don’t define sizes of elements, but let their Containers
                    do the sizing and positions.

                   There are several Containers
Grid is the most commonly used, but all the others are very useful
             (StackPanel, DockPanel, FlowPanel, etc.)

 They almost all (except StackPanel ?) rely on Attached Properties.

       Think of Attached Properties as Extender Properties.
          XAML (Cont)
       Declarative Binding

        Binding to Static Resources
(strings, lists, objects, localized resources)
And Converting/massaging them on the fly
                               XAML: Binding
                       To Static Resources (Strings, etc.)

A Binding Source can be instantiated as a
   Resources Dictionary item.
 Can be any Type - as simple as String

   What to notice:
      Again:
          UserControl, xmlns, x:Class, Grid
          Resources Dictionary used
      Custom sys xml namespace pointing
       to .NET System namespace, in
       mscorlib dll
      Used the sys ns to instantiate a static
       resource String
      Gave the string an x:Key
      Binding Target referred to String w/:
          {StaticResource key}
          {binding Source={StaticResource

                              XAML: Binding
                          To Static Resources (Lists)

A Binding Source can be instantiated as a
   Resources Dictionary item.
 Can be any Type – Eg: custom Collection

   What to notice:
      Again:
          UserControl, xmlns, x:Class, Grid
          Resources Dictionary used
          Registered a sys xml namespace
      Registered a utils XML ns pointing to
       WNUG…Utils .NET namespace in our
      Used utils to instantiate
       TypedObjectCollection, in which we
       instantiated sys:String items.

      Bound with short of full version:
       {StaticResource keyName}
       {Binding Source={StaticResource}}
          NB: ItemsSource & ItemTemplate
                              XAML: Binding
                          To Static Class Properties

Binding to the UserControl’s properties is

   What to notice:
      Again:
          UserControl, xmlns, x:Class, Grid
          Resources Dictionary used
          Registering needed namespaces

      Binding to a class instance:
          IMPORTANT: You’re actually
           binding to a new instance of BO
           created when it was parsed and
           added to Resource Dictionary.
          Source= is the Dictionary entry
           (ie StaticResource).
          Path= is the Property within the

                              XAML: Binding
                       To Static Localizable Resources

Localizable Resources can be Binding
 Similar to WinForms, but manual:
     Create R… Folder, Add *.resx file
     Public class, Public const.
     Add key/vals

   What to notice:
      Again:
          UserControl, xmlns, x:Class, Grid
          Resources Dictionary used
          Registering needed namespaces
      Registered a ns to our Resources.
      Since we need a property within the
       resource, we use full Binding syntax:
      {Binding Source={StaticResource …},
       Path =…}}

                              XAML: Binding
         Declaratively Modify Data output with ValueConverters

What if Data Source is not right Type or
     Use a ValueConverter for on the fly
        formatting (or other magic):
           String Format values
           Multiple values (‘*3’,’%’,’/2’)
           Convert Type (‘Oui’ -> true)

   What to notice:
      Again:
          UserControl, xmlns, x:Class, Grid
          Resources Dictionary used
          Registering needed namespaces
               (bo, conv)
      Binding Syntax used:
       {Binding Source=source
          Converter={StaticResource key} }

                        Summary So Far…

We define custom XML ns to point to any needed .NET namespaces
We bind to static resources defined in Resource Dictionary using:
    {StaticResource keyName}
    {Binding Source={StaticResource keyName}}
    {Binding Source={StaticResource keyName}, Path=SomeProperty}}
    {Binding Source={StaticResource keyName}, Path=SomeProperty,
               Converter={StaticResource converterKeyName},
Bind to localizable embedded resources (just an auto compiled class)
Use ValueConverters to do magic (formatting+)
Missing WPF’s ElementName= Binding – which sucks.
      XAML (Cont)
  Visual Transformations
(Opacity, Transformations, Clips)
                        XAML: Transformations

   Remember the old days? WinForms in
    .NET 2003?

   What to notice:
      Again:
          UserControl, xmlns, x:Class,
          Resources Dictionary used
          Registering needed
          Styles items and Setters

      Opacity is now trivial: just an

                      XAML: Transformations
                  Rotate, Translate, Shear, Matrix, etc.

   Transform any object using
    RenderTransform DP
      Translate (ie Move)
      Rotate
      Scale
      Shear
      Matrix (…)
      Group
          Watch order of tranformations

   What to notice:
      One or more transformations can
       be applied to any element.
      Know about

                         XAML: Transformations
                             Clip Transformations

   Clips can be applied to most elements.

   What to notice:
      Again:
          UserControl, xmlns, x:Class, Grid
          Resources Dictionary used
          Registering needed namespaces
          Styles items and Setters

      There are various clip geometries:
          EllipseGeometry,
          RectangleGeometry,
          PathGeometry,
          Etc.
      The attributes of the various clip
       shapes are relatively intuitive
      Applied as a AP
                         XAML: Transformations
                       Opacity, Clips, Transformations

   Clips can be applied to anything
   Transformations can be applied
      …Including Clips!

   What to notice:
          UserControl, xmlns, x:Class, Grid
          Resources Dictionary used
          Registering needed namespaces
          Styles items and Setters
          Geometry defined Clips

      Notice how SkewTransformation was
       applied to the Geometry of the Clip
       rather than the Image…

              Section Summary…

There are several Transformations that can be applied:
        Traslate, Rotate, Scale, Shear, Matrix,
  You can Group more than one, in a specific order.
         Set TransformationOrigin to 0.5,0.5
          Most element can be transformed.

     Clips can be made from several Geometries
          (Ellipses, Rectangles, Paths, etc…)
           These too can be Transformed.

             Opacity is now Child’s Play.
           XAML (Cont)
        Tooltips and Popups

    Use Tooltips for unobtrusive help
Use Popups for bone jarring interruptions

   Add Tooltips using the ToolTipService,
    which is an Attached Property.

   What to notice:
      No event EventHandler’s required.
      ToolTips, like most everything else
       in Silverlight, are not limited to
       just Text, but can be embellished
       with other UI elements.

   Whereas ToolTips are unobtrusive,
    Popups bring things to a screeching halt.

   What to notice:
      Popup defined as a Resources Item
      EventHandler required (eg: Click event)
      Use OnMouseMove to track mouse
      To know where to position Popup.
      Use Click event to change its Visibility.
      Use second Button to close the Popup.

                Section Summary…
               (ToolTips and Popups)

   ToolTips require no EventHandlers, whereas Popups do.
Popups (and modal MessageBox.Show) halt the functional flow.
                      Avoid if you can.

       You track Mouse position with OnMouseMove,
      because Click event doesn’t give Mouse position.
      You show/hide Popups by flipping their Visibility.
      You can pimp out both the ToolTips and Popups.
XAML (Cont)
  UI Events
                          XAML: UI Events
                   Using it for traditional stuff…

   We’ve already seen that EventHandlers
    can be assigned to the many different
    events raised by the Elements.
   Within which we can invoke
   Or make Popups visible…


   Another use for Events is to start and
    stop Storyboards of Animations…

             (Animations and StoryLines in 60 seconds)

   Animations are easier than they first appear.

   Think of Animations as Styles, applied over a
      They have a TargetName to indicate what
        element we’re talking about,
      They have a TargetProperty to indicate
        which of its Properties to update,
      They have a BeginTime and Duration to
        setup the TimeLine we’re talking about
        applying this ‘style’ over,                    Can Target any element/any
      And they a From/To to indicate the               property, but usually target
        property Value to assign to the                 Transformation properties
        TargetProperty over the specified               (eg: RotationTransformation.Angle).
        TimeLine.                                       Sometimes element visual
                                                        (eg: Button.Opacity)
   NB: called a DoubleAnimation only because it
    modifies a Double Property
    (eg: PointAnimation, ColorAnimation, etc.)         Grouped together as a Storyboard.

                            XAML: UI Events
                          Triggering Storyboards

   One use for UI Events is to Launch or
    Stop Storyboards of Animations.

      Again, Storyboards are defined as
       Resources Dictionary Items
      So we know how to get at them
       (with their keyName)
      And re-Type them to a StoryBoard
      And Begin() them!

                            XAML: UI Events
                         Download Assemblies…

Easy downloading assemblies on demand

   What to notice:
      Again: Handle a Click event
      We find the absolute url of the
       Server’s ClientBin (not Bin) from the
       Current Host’s Source property, and
       build a new Url to the desired
      We use the WebClient object to
       download it asynchronously.
      We Use AssemblyPart to get an
      To instantiate the new UserControl
      Which we add to somewhere…

                           XAML: UI Events
                    Downloading Assemblies (CONT)

Which is how we go from:

To be replaced by this:

             Section Summary…

             Handle any event…
Common operations will often be to launch or stop
 Communicate to, show, hide other UserControls,
            or back to the Server.
            Silverlight 2.0
The Built In Controls, the Toolkit controls,
         or those free on the web
                               Toolkit Graphs

   Line, Bar, Pie, graphs, etc.

                         Silverlight Controls
                            Toolkit Graphs

   Any visual style you want…

                           Toolkit Graphs

   Which you can spice up as you want…

                     Flexible Default Controls

   Checkboxes, RadioButtons, TextBoxes,
    DropDown Combos, DatePickers,
    DateTime Calendar controls that all
    have flexible layouts that can be
    modified either with
      Themes
           Control Templates
                Code parameters…

               Section Summary…

          Basically all you need to get started…
Definitely more than what was available for ASP.NET for
                   It’s MOVING…(NOW)
       Silverlight 3.0
The Future…Coming right up
(Beta expected at Mix 09…today)
                     The Future: Silverlight 3
                           Fat -> Smart -> Fit

   NYT:
    "A Microsoft official cited on Tuesday improvements planned for the
    company's Silverlight platform for rich Internet applications, including
    intentions to run Silverlight applications outside of a browser."
      Ie: an outside browser experience similar to Adobe AIR, JWT, Gears, or
      That means developers will be able to create Silverlight applications
        that run right off the desktop - any desktop.
      This is what we call a "Fit Client" solution - a RIA platform that works
        both in the browser and out of it.

                  The Near Future: Silverlight 3
            3D, Bitmap Effects, Hardware Acceleration, etc.

   Scott Guthrie:
    “Silverlight 3 will include major media enhancements (including H.264
    video support), major graphics improvements (including 3D support and
    GPU hardware acceleration), as well as major application development
    improvements (including richer data-binding support and additional
    controls). Note these are just a small sampling of the improvements - we
    have plenty of additional cool features we are going to keep up our sleeves
    a little longer. ;-) ”
      Read: GIF, TIF, Bitmap Effects, Printing, maybe Menu controls?

                 Silverlight 3: Deep Linking / SEO

   Gavin Clarke:
    “Another thing to look out for in Silverlight 3 will be deep linking - the
    ability to put hyperlinks in Silvelright-3 applications. This will help when it
    comes to optimizing search engine queries, potentially making easier to
    return just Silverlight 3 content in a search instead of a full web page and
    to also embed just the media content in another page.”

                 Final Summary?
                     Don’t Wait!
   Don’t wait till some mythical future. It’s now.
There will be some hair pulling, and swearing at first
                     (fair enough)
                   but there is also:
               Less spaghetti than ASP.NET
    Less technologies to spread yourself over thinly
                Less browsers to deal with
                          More fun!
                    More opportunity…
                     The Show’s Over…

    Where can I download the
        Solution and slides?


Shared By: