All sections to appear here

All sections to appear here

Mahesh Krishnan | Principal Consultant | [email protected] | 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


Demo - Transformations


Demo - Layouts


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 Style property using the StaticResource mark-up in XAML:

<TextBlock Text="Hello World" Style="{StaticResource Style1}" />

Demo – Styling a Button


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 Template property in XAML:

<Button Content=“Click Me!" Template="{StaticResource MyTemplate}" />

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


The Parts Model

Demo – Templating Slider


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• xxxxAnimation (e.g. DoubleAnimation)– Specify From, To and Duration– Storyboard will do the interpolation

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>

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>

Demo – Animation


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


Data Binding XAML

• Every (Dependency) Property in a control can be databound• In XAML, the following syntax is used:

• In code, the DataContext property of the TextBlock is set to the actual object

<TextBox x:Name=“txtISBN" Text=“{Binding ISBN, Mode=TwoWay}“ />

Demo – Sample data

Want to find out more?

All sections to appear here

Documents

Transcript of All sections to appear here