Expression Blend for Developers


Published on

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

Published in: Technology
  • Be the first to comment

Expression Blend for Developers

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