Tips Tricks WPF UI Design Using Expression Code Name by wxr16887

VIEWS: 167 PAGES: 9

									Tips & Tricks: WPF UI Design
Using Expression
Code Name “Sparkle Interactive Designer”


Manuel Clement
The Microsoft Expression family
& Visual Studio
                            Development Team
                Designers                                Developers

  “Look”                      “Behavior”                 “Functionality”




         XAML
       .PNG, etc.

                                                                                         Windows Vista
                                                                                       Applications & Content
                                            VS Project
                                              XAML                                        WinFX, WPF, .NET Framework
                                           C# / VB.NET

                                                                           .EXE
                                                                                          Web Browser Applications


                                            ASP.NET                        .WBA
                                              CSS
                                             XHTML
                                            Javascript
                                                                           XAML     X-Platform & Device
                                                                           XHTML   Web Applications & Content

  JPEG / GIF / PNG
                                                                           DHTML
                                                                                   WPF / E, ASP.NET “Atlas”, Browsers, Devices
      XHTML
     Javascript
The World Before XAML
 Throw-away prototypes
 Designer <> Developer disconnect
 Lack of Designer control over UI code
 Visuals need to be “interpreted” by dev and
 implemented
 Hard to iterate UI design ideas in the build
 itself
What XAML Means
 Designers prototype shipping code
   Less Developer resources are spent on re-
   interpreting UI prototypes
   Designers get to learn about the building blocks used
   to build applications
 The UI Designer gets a front-row seat (with Popcorn
 and Soda to boot)
   Get UI code changes reviewed and submit them to
   source control
 Designers can work faster
   No wait for a “build” from Dev
   Easy to iterate on UI, in context
What Expression Interactive
Designer Means
 Designers don’t have to write this by hand:
     <Grid
     xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
     xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
     xmlns:c="http://schemas.microsoft.com/winfx/markup-compatibility/2005"
     c:Ignorable="s"
     Background="#FFFFFFFF"
     Name="DocumentRoot"
     Width="640" Height="480" x:Class="Untitled_Project_90.Scene1">

      <FrameworkElement.Resources>
        <ResourceDictionary>
           <Storyboard x:Key="OnLoaded" FillBehavior="HoldEnd" BeginTime="{x:Null}" s:StoryboardName="OnLoaded"/>
                                         <ControlTemplate x:Key="ControlTemplate" TargetType="{x:Type Button}"/>
        </ResourceDictionary>
      </FrameworkElement.Resources>

      <FrameworkElement.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
           <EventTrigger.Actions>
             <BeginStoryboard s:StoryboardName="OnLoaded" Name="OnLoaded_BeginStoryboard" Storyboard="{DynamicResource OnLoaded}"/>
           </EventTrigger.Actions>
        </EventTrigger>
      </FrameworkElement.Triggers>

      <Grid.ColumnDefinitions>
            <ColumnDefinition/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
            <RowDefinition/>
      </Grid.RowDefinitions>
     <Button Name="Button1" Content="Button1" HorizontalAlignment="Left" VerticalAlignment="Top" Template="{DynamicResource ControlTemplate}"/>
    </Grid>

 Designers have a “Steering Wheel” on top of WPF
Demo:
Designing a
Resizable UI
Hands-On:
Styling Avalon
Controls

Templates
Triggers
States
Storyboards
Data Binding
Hands-On:
Working with
Developers
Use Standard Visual
Studio projects
VB .NET and C#
Defining default
control styles using
TargetType
Call for Action
 Sessions you should attend:
   Peter Faraday’s PDC session
   John Gossman’s PDC session
 Play with Expression Interactive Designer
 at the Hands on Lab!
 WATCH the Channel 9 video!

								
To top