All sections to appear here Mahesh Krishnan Principal

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 • Better user experience than Visual Studio when working UI design • You still need VS 2010 to do all the developer stuff

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

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

Demo - Hello World Discover, Master, Influence Slide 9

Demo – Brushes Discover, Master, Influence Slide 10

Demo - Transformations Discover, Master, Influence Slide 11

Demo - Layouts Discover, Master, Influence Slide 12

Styling • Allows re-use of look and feel across controls: – Color, Font, Margins, etc • Created as a resource: <Application. Resources> <Style x: Key="Style 1" Target. Type="Text. Block"> <Setter Property="Foreground" Value="#FFF 0 D 3 D 3"/> <Setter Property="Font. Size" Value="36"/> </Style> </Application. Resources>

Applying a Style • Set using Style property using the Static. Resource mark-up in XAML: <Text. Block Text="Hello World" Style="{Static. Resource Style 1}" />

Demo – Styling a Button Discover, Master, Influence Slide 16

Skinning or Templating • Allows you to change the complete appearance of the control • Like Style, created as a resource: < Application. Resources> <Control. Template x: Key="My. Template" Target. Type="Button"> <Grid>. . . <Rectangle. . . /> <Content. Presenter. . . Content="{Template. Binding Content}" /> </Grid> </Control. Template> < /Application. Resources>

Applying the template • Set using Template property in XAML: <Button Content=“Click Me!" Template="{Static. Resource My. Template}" />

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)

Demo – Skinning a Button Discover, Master, Influence Slide 21

The Parts Model

Demo – Templating Slider Discover, Master, Influence Slide 23

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

Basic Animation • Storyboard – Container for animation – Manages timeline. Can start, pause, stop animations • xxxx. Animation (e. g. Double. Animation) – Specify From, To and Duration – Storyboard will do the interpolation

Basic Animation in XAML • XAML Syntax for Storyboard: <Storyboard x: Name="My. Storyboard"> <Double. Animation Storyboard. Target. Name="rect 1" Storyboard. Target. Property="Width" From="40" To="100" Duration="0: 0: 5"> </Double. Animation> </Storyboard>

Key Frame Animation • Animates between a series of values • XAML Syntax for Storyboard: <Storyboard x: Name="My. Storyboard"> <Double. Animation. Using. Key. Frames Duration="0: 0: 4. 5" Storyboard. Target. Name="rect 1" Storyboard. Target. Property="Width”> <Linear. Double. Key. Frame Value="140" Key. Time="0: 0: 0"/> <Linear. Double. Key. Frame Value="10" Key. Time="0: 0: 2. 2"/> <Linear. Double. Key. Frame Value="140" Key. Time="0: 0: 3"/> </Double. Animation. Using. Key. Frames> </Storyboard>

Demo – Animation Discover, Master, Influence Slide 29

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

Demo – Data binding Discover, Master, Influence Slide 32

Data Binding XAML • Every (Dependency) Property in a control can be databound • In XAML, the following syntax is used: <Text. Box x: Name=“txt. ISBN" Text=“{Binding ISBN, Mode=Two. Way}“ /> • In code, the Data. Context property of the Text. Block is set to the actual object

Demo – Sample data

Want to find out more?