Expression Blend


Presentation Description

Microsoft Expression Blend and Design


By: manishgangwani (101 month(s) ago)

hi very nice ppl really hatz off to yo man plz i want dis can u mail me on

By: sruchit (131 month(s) ago)

why i cannot download this paper presentation i want this argently can you pls mail me this argently

Presentation Transcript


Moataz H. Ali Academic Programs Manager


Agenda User Experience WPF & XAML Blend & Design Features By Example Demos Q & A


User Experience

What Is User Experience? : 

What Is User Experience?

User Experience in Software?: 

Ease of Use Learn ability Performance Reliability Security Optimized form factors Legibility / Readability Relevance / Contextualization Richness Graphics & Media Data Visualization Higher Fidelity Information Globalization Accessibility Hardware & Printing Integration User Experience in Software? Windows Vista Office 2007

.NET At The Core: 

.NET At The Core


Windows Presentation Foundation (WPF)

WPF Architecture: 

WPF Architecture

Designer-Developer Productivity: 

Designer-Developer Productivity Microsoft Tools for Designer & Developers Declarative Programming through XAML Third Party Tools (e.g. Aurora by Mobiform, ZAM 3D by Electric Rain) Designers design With XAML designers & developers can streamline their collaboration Developers add business logic

Declarative Programming Through XAML: 

Declarative Programming Through XAML XAML = Extensible Application Markup Language Easily toolable, declarative markup Code and content are separate Can be rendered in the browser / standalone application


Blend & Design

What is Blend?: 

What is Blend?

What is Design?: 

What is Design?

Blend and Design Environment: 

Blend and Design Environment


Features by Example

Content Models: 

Content Models Shape Panel ItemsControl ContentControl <Ellipse Fill="Blue" Height="50" Width="50" /> <Rectangle Fill="Green" Height="50" Width="50“ /> <Polygon Fill="Yellow“> <Polygon.Points> <PointCollection> <Point X="25" Y="1"/> <Point X="50" Y="50"/> <Point X="1" Y="50"/> </PointCollection> </Polygon.Points> </Polygon> <ListBox Height="100" Width="100"> <ListBox.Items> <TextBlock>My Text</TextBlock> <Button>My Button</Button> <Image Source="BasicControls\kotomi.jpg" Width="70"/> </ListBox.Items> </ListBox> <Button Height="100" Width="150"> <StackPanel> <TextBlock HorizontalAlignment="Center">Kotomi</TextBlock> <Image Source="BasicControls\Kotomi.jpg" Margin="5" Opacity="0.5" /> </StackPanel> </Button>

Attach Properties: 

Attach Properties Defined by XAML Can be set on any object Property provider implements Get and Set <Grid> <ListBox Grid.Row="0" Grid.Column="0" ToolTip="Select item..."> <Button Grid.Row="1" Grid.Column=“1" Content="Click Me" /> <Image Grid.Row="0" Grid.Column="1“ /> </Grid>

Layout System & Controls: 

Layout System & Controls

Panel Elements: 

Panel Elements Canvas – absolute positioning Grid – position elements by column and row DockPanel – arrange elements horizontally or vertically StackPanel – arrange elements in a single line WrapPanel – sequentially left to right with line breaks VirtualizingPanel – framework for virtualizing children



Data Binding: 

Data Binding UI can be bound to CLR objects and XML Dependency properties can also be bound to ADO.NET and objects associated with Web Services and Web properties Sort, filter, and group views can be generated on top of the data Data templates can be applied to data Layout & Databinding <StackPanel> <Label>Select A Customer</Label> <ListBox Name="myListBox" Background="HoneyDew" ItemsSource="{Binding {StaticResource myDataSource}}" </ListBox> </StackPanel>

Control Templates: 

Control Templates

Data Templates: 

Data Templates class Car { string Image {get;set} string Model {get;set} } <DataTemplate x:Key="carTemplate"> <Border BorderBrush="Blue" BorderThickness="2" Background="LightGray" Margin="10" Padding="15,15,15,5"> <StackPanel> <Image HorizontalAlignment="Center" Source="{Binding Path=Image}" /> <Border HorizontalAlignment="Center" BorderBrush="Navy" Background="#DDF" BorderThickness="1" Margin="10" Padding="3"> <TextBlock FontSize="18" Text="{Binding Path=Model}" /> </Border> </StackPanel> </Border> </DataTemplate>

Event Triggers: 

Event Triggers <EventTrigger RoutedEvent="Rectangle.MouseEnter"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation To="300" Duration="0:0:1.5" AccelerationRatio="0.10" DecelerationRatio="0.25" Storyboard.TargetProperty="(Canvas.Width)" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger>

Property Triggers: 

Property Triggers <Style x:Key="Triggers" TargetType="{x:Type Button}"> <Style.Triggers> <Trigger Property="Button.IsMouseOver" Value="true"> <Setter Property = "Background" Value="Red"/> </Trigger> </Style.Triggers> </Style> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="HasItems" Value="false" /> <Condition Property="Width" Value="Auto" /> </MultiTrigger.Conditions> <Setter Property="MinWidth" Value="120"/> </MultiTrigger>


Evaluation We need to hear from you We can run discussions, answer any questions you may have through out the day Please fill out evaluation sheets and turn them in before the closing session starts XBox360 Raffle Draw will be based on filled evaluation forms that are submitted


© 2007 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.

authorStream Live Help