Expression Blend

Information about Expression Blend

Published on December 16, 2007

Author: sfeer2007



Slide2:  Moataz H. Ali Academic Programs Manager Agenda:  Agenda User Experience WPF & XAML Blend & Design Features By Example Demos Q & A Slide4:  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 Slide8:  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 Slide12:  Blend & Design What is Blend?:  What is Blend? What is Design?:  What is Design? Blend and Design Environment:  Blend and Design Environment Slide16:  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 Controls:  Controls 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:  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 Slide34:  © 2007 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.

Related presentations