1 / 27

All sections to appear here

All sections to appear here. Mahesh Krishnan | Principal Consultant | Mahesh.Krishnan@readify.net | blogesh.wordpress.com. What is Expression Blend?. Primary Tool for Designing User Interfaces Visually design UI – Blend creates XAML

mliss
Download Presentation

All sections to appear here

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. All sections to appear here Mahesh Krishnan | Principal Consultant | Mahesh.Krishnan@readify.net | blogesh.wordpress.com

  2. 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

  3. 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, ...)

  4. Tour of Expression Blend • Menus • Tools Panel • Assets Panel • The Artboard • Different views • Properties Panel • Objects and Timelines Panel • ...

  5. Demo - Hello World Discover, Master, Influence

  6. Demo – Brushes Discover, Master, Influence

  7. Demo - Transformations Discover, Master, Influence

  8. Demo - Layouts Discover, Master, Influence

  9. 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>

  10. Applying a Style • Set using Style property using the StaticResource mark-up in XAML: <TextBlock Text="Hello World" Style="{StaticResource Style1}" />

  11. Demo – Styling a Button Discover, Master, Influence

  12. 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>

  13. Applying the template • Set using Templateproperty in XAML: <Button Content=“Click Me!" Template="{StaticResourceMyTemplate}" />

  14. Managing States • Uses Visual State Manager • 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)

  15. Demo – Skinning a Button Discover, Master, Influence

  16. The Parts Model

  17. Demo – TemplatingSlider Discover, Master, Influence

  18. Introduction • 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

  19. 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

  20. Basic Animation in XAML • 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>

  21. Key Frame Animation • Animates between a series of values • 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>

  22. Demo – Animation Discover, Master, Influence

  23. Data Binding • Data binding is a connection between User Interface object and data • Aids in the separation of responsibility • You can also data bind value of one control to another

  24. Demo – Data binding Discover, Master, Influence

  25. Data Binding XAML • Every (Dependency) Property in a control can be databound • In XAML, the following syntax is used: <TextBox x:Name=“txtISBN" Text=“{Binding ISBN, Mode=TwoWay}“ /> • In code, the DataContext property of the TextBlock is set to the actual object

  26. Demo – Sample data

  27. Want to find out more?

More Related