All sections to appear here

pptPlex Section Divider Introduction The slides after this divider will be grouped into a section and given the label you type above. Feel free to move this slide to any position in the deck.

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

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

Part of Expression Studio (~600 USD) Available as part of Expression Professional subscription (~1000 USD ) Available as part of MSDN subscription (USD 2500 to 10,000)

pptPlex Section Divider Exploring Blend features The slides after this divider will be grouped into a section and given the label you type above. Feel free to move this slide to any position in the deck.

Menus Tools Panel Assets Panel The Artboard – Different views Properties Panel Objects and Timelines Panel...

Discover, Master, InfluenceSlide 9

Discover, Master, InfluenceSlide 10

Discover, Master, InfluenceSlide 11

Discover, Master, InfluenceSlide 12

pptPlex Section Divider Styling The slides after this divider will be grouped into a section and given the label you type above. Feel free to move this slide to any position in the deck.

Allows re-use of look and feel across controls: – Color, Font, Margins, etc Created as a resource:

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

Discover, Master, InfluenceSlide 16

pptPlex Section Divider Skinning or Templating The slides after this divider will be grouped into a section and given the label you type above. Feel free to move this slide to any position in the deck.

Allows you to change the complete appearance of the control Like Style, created as a resource:...

Set using Template property in XAML: <Button Content=“Click Me!" Template="{StaticResource MyTemplate}" />

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)

Discover, Master, InfluenceSlide 21

Discover, Master, InfluenceSlide 23

pptPlex Section Divider Animation The slides after this divider will be grouped into a section and given the label you type above. Feel free to move this slide to any position in the deck.

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

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

XAML Syntax for Storyboard: <DoubleAnimation Storyboard.TargetName="rect1" Storyboard.TargetProperty="Width" From="40" To="100" Duration="0:0:5">

Animates between a series of values XAML Syntax for Storyboard: <DoubleAnimationUsingKeyFrames Duration="0:0:4.5" Storyboard.TargetName="rect1" Storyboard.TargetProperty="Width”>

Discover, Master, InfluenceSlide 29

pptPlex Section Divider Data binding The slides after this divider will be grouped into a section and given the label you type above. Feel free to move this slide to any position in the deck.

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

Discover, Master, InfluenceSlide 32

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}“ />