• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Expression Blend for Developers
 

Expression Blend for Developers

on

  • 1,600 views

Slide deck of presentation "Expression Blend for Developers" that was run during RDN Dev Day in Melbourne

Slide deck of presentation "Expression Blend for Developers" that was run during RDN Dev Day in Melbourne

Statistics

Views

Total Views
1,600
Views on SlideShare
1,600
Embed Views
0

Actions

Likes
1
Downloads
23
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • I’m… I do… I can be contacted on…
  • Questions. I’ll defer long questions for the coffee/lunch break or if it’s a topic that’ll cover later. Put your mobiles on silenceFeel free to ask questions during the breaks
  • Who uses Silverlight and/or WPF? Stand up.What’s your primary way of working with UI (Raise hands) Blend VS Xaml EditorHand Coding XamlBlend (Stand up) Seen it Played with it Use it often Use it on a daily basisWho works with designers (just raising hands)
  • If the tool is so great, why few people use it? Not a lot of designer adoption in the WPF/SL space. Specially not using MS tools, most of them stick to Adobe tools. This isn’t something easy to change. Ideally we should involve designers and Blend is a great tool also for themSL/WPF have a new Xaml Parser. Blend uses now the same parser that is used at runtimeA lot of stability improvements in the latest versionBetter error report and handlingMost of the times it crashed was our own code. Blend uses Behaviors, Commanding and now has great support for MVVMThat’s just a ramp up time. I challenge you to try it for 5 days.
  • Create a projectShow the main panels -Projects, objects, propertiesToolboxSearch functionality in Toolbox, property panels and explain that it appears in othersHello world Naming controls Code behind intellisenseXamlintellisense Running the project

Expression Blend for Developers Expression Blend for Developers Presentation Transcript

  • Expression Blend for Developers
    RDN Dev Day
  • Hello World
    Mahesh Krishnan
    Principal Consultant
    Author: Silverlight 4 for Dummies
    Run VIC.NET Dev SIG & SDDN
    Mahesh.Krishnan@readify.net
    @MaheshKrishnan
    Blogesh.wordpress.com
  • What are we doing?
    Type of presentation
    Bit of PowerPoint
    Lots of Demos
    No sales.
    No wow demos or 5 minutes demos.
    Useful Tips & Tricks.
  • Rules
  • Have you…?
    ?
  • Agenda
    Session #1 – Intro and Blend Basics
    Morning Tea
    Session #2 – More Blend
    Lunch
  • What is Expression Blend?
    Primary Tool for Designing User Interfaces
    Visually design UI – Blend creates XAML
    Better user experience than Visual Studio when working UI design
    You still need VS 2010 to do all the developer stuff
  • Adoption
    Reasons
    Positioned as Design tool
    Crashes
    Messes with my Xaml
    Patterns
    Don’t want to learn a new tool
    I’m productive hand coding Xaml
    Not broadly adopted
    More stable now
    Let go
    Better support
    Don’t learn something different if you don’t need to do something different.
    Learning curve
  • Blend vs Visual Studio
    When would you use Expression Blend?
    Prototyping UI
    User Interface design
    Writing small blocks of code
    Importing designs from Photoshop and Illustrator
    Animation
    When would you use Visual Studio?
    Simple UI design
    Writing code
    Debugging, setting breakpoints, etc
    Integrating with other projects (.NET WCF Services, WCF, ...)
  • BLEND
    WALkTHROUGH
  • Styling
    Allows re-use of look and feel across controls:
    Color, Font, Margins, etc
    Created as a resource:
    <Application.Resources>
    <Style x:Key="Style1" TargetType="TextBlock">
    <Setter Property="Foreground" Value="#FFF0D3D3"/>
    <Setter Property="FontSize" Value="36"/>
    </Style>
    </Application.Resources>
  • Applying a Style
    Set using Styleproperty using the StaticResourcemark-up in XAML:
    <TextBlock
    Text="Hello World"
    Style="{StaticResource Style1}" />
  • Skinning or Templating
    Allows you to change the complete appearance of the control
    Like Style, created as a resource:
    < Application.Resources>
    <ControlTemplate x:Key="MyTemplate" TargetType="Button">
    <Grid>
    ...
    <Rectangle .../>
    <ContentPresenter ... Content="{TemplateBinding Content}" />
    </Grid>
    </ControlTemplate>
    < /Application.Resources>
  • Applying the template
    Set using Templateproperty using the StaticResourcemark-up in XAML:
    <Button
    Content="Click ME"
    Template="{StaticResourceMyTemplate}" />
  • Parts and States Model
    States model breaks the Control down based upon its different states and how it should look for each state
    Parts model breaks the Control down into various parts and how each part should look
  • Visual State Manager
    Manages states for a control
    Allows setting different State groups for a control
    Manages transition between states
    Controls the look and feel of the control when state transition occurs
    Allows designers to define state transition behaviour (usually done using Animation)
  • The Parts Model – an example
  • Animation
    Animation is created by quickly cycling through a series of images
    Each image is slightly different from the previous one
    Image is created by changing a (visual) property
    Basic animations works on properties of type:
    Double
    Color
    Point
  • Basic Animation
    Storyboard
    Container for animation
    Manages timeline. Can start, pause, stop animations
    xxxxAnimation (e.g. DoubleAnimation)
    Specify From, To and Duration
    Storyboard will do the interpolation
  • Basic Animation
    XAML Syntax for Storyboard:
    <Storyboard x:Name="MyStoryboard">
    <DoubleAnimation
    Storyboard.TargetName="rect1"
    Storyboard.TargetProperty="Width"
    From="40" To="100"
    Duration="0:0:5">
    </DoubleAnimation>
    </Storyboard>
  • Key Frame Animation
    Animates between a series of values
    Can control their interpolation method
    Discrete, Linear, Splined
    Animation classes
    xxxxAnimationUsingKeyFrame(e.g.DoubleAnimationUsingKeyFrame)
    Supports Double, Color, Point and Object
  • Key Frame Animation
    XAML Syntax for Storyboard:
    <Storyboard x:Name="MyStoryboard">
    <DoubleAnimationUsingKeyFrames
    Duration="0:0:4.5"
    Storyboard.TargetName="rect1"
    Storyboard.TargetProperty="Width”>
    <LinearDoubleKeyFrame Value="140" KeyTime="0:0:0"/>
    <LinearDoubleKeyFrame Value="10" KeyTime="0:0:2.2"/>
    <LinearDoubleKeyFrame Value="140" KeyTime="0:0:3"/>
    </DoubleAnimationUsingKeyFrames>
    </Storyboard>
  • Behavior
    Reusable piece of functionality
    Allows actions to be performed without writing code
    Start an animation
    Trigger a state change
    Play a sound
    etc
  • Behavior types
    Action: invoked to perform an operation.
    Call a method, open window, etc
    Behavior: operation performed without invoking it
    Mouse over operation
    Trigger: fires when something (event) occurs
    Timer ends
  • TFS Unboxed
    Learn what is involved in getting TFS 2010 up and
    running in your development environment
    Stephen Godbold & Dr TaflineMurnane
    Monday 2 August 2010
    Level 5, 4 Freshwater Place, Southbank
    AM session:  8:30am – 12:15pm
    PM session:  1:15pm – 5:00pm
    $75 + GST (includes light refreshments)
  • Questions?