slide1 l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Layouts, Styles and Templates in Windows Presentation Foundation PowerPoint Presentation
Download Presentation
Layouts, Styles and Templates in Windows Presentation Foundation

Loading in 2 Seconds...

play fullscreen
1 / 43

Layouts, Styles and Templates in Windows Presentation Foundation - PowerPoint PPT Presentation


  • 116 Views
  • Uploaded on

Layouts, Styles and Templates in Windows Presentation Foundation. Jennifer Marsman. Developer Evangelist Microsoft Corporation. Agenda. Overview Layout Controls Styles Control Templates Data Templates Events and Triggers. Overview. What Is User Experience? . Measuring UX ROI

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Layouts, Styles and Templates in Windows Presentation Foundation' - lark


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

Layouts, Styles and Templates in Windows Presentation Foundation

Jennifer Marsman

Developer Evangelist

Microsoft Corporation

agenda
Agenda
  • Overview
  • Layout Controls
  • Styles
  • Control Templates
  • Data Templates
  • Events and Triggers
user experience in software

Measuring UX ROI

(end user behaviors / benefits)

Success

Productivity

Retention

Comprehension

Conversion

Satisfaction

Excitement

Repeat Use

User Experience in Software?

Windows Vista

Office 2007

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

declarative programming through xaml
XAML = Extensible Application Markup Language

XAML

C#

VB.NET

<Button Width="100"> OK

<Button.Background>

LightBlue

</Button.Background>

</Button>

Button b1 = new Button();

b1.Content = "OK";

b1.Background = new SolidColorBrush(Colors.LightBlue);

b1.Width = 100;

Dim b1 As New Button

b1.Content = "OK"

b1.Background = New _ SolidColorBrush(Colors.LightBlue)

b1.Width = 100

Declarative Programming Through XAML
  • Easily toolable, declarative markup
  • Code and content are separate
  • Can be rendered in the browser / standalone application
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)
  • With XAML designers & developers can streamline their collaboration

Designers design

Developers add business logic

key concepts
WPF Architecture

Extensible Application Markup Language (XAML)

Content Models

Resources

Data Binding

Attach Properties

Key Concepts
wpf architecture

DOCUMENT SERVICES

USER INTERFACE SERVICES

XPS Documents

Application Services

Controls

Databinding

Packaging Services

Deployment Services

Layout

MEDIA INTEGRATION LAYER

BASE SERVICES

XPS Viewer

Windows Presentation Foundation

Imaging

2D

Audio

XAML

Text

Effects

3D

Video

Accessibility

Animation

Input & Eventing

Composition Engine

Property System

Unmanaged

Managed

Input / Eventing System

Property Engine

.NET Framework 2.0

Composition Engine

Desktop Windows Manager

Windows Media Foundation

Media Integration Layer

Print Spooler

DirectX

Windows Vista Display Driver (LDDM)

WPF Architecture
content models
Content Models

<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>

  • Shape
  • Panel
  • ItemsControl
  • ContentControl

<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>

resources
Resources
  • Reusable objects such as data, styles and templates.
  • Static and Dynamic
    • Static Resources for values that do not change.
    • Dynamic Resources for values not known until runtime or that change during runtime.
  • Assigned a unique key via x:Key.
  • Every element has a Resources property.
data binding

Binding Target

Binding Source

Dependency Object

Object

OneWay

Dependency Property

Property

TwoWay

OneWayToSource

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>

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
Layout System
  • Process of measuring and arranging elements on the screen
  • Panel element is responsible for arranging Children
  • Used in both window and control layout
the process
The Process
  • Core properties measured on child UIElement.
  • Sizing properties evaluated on FrameworkElement (Width, Height and Margin, etc.)
  • Panel specific logic is applied (Dock direction, Orientation).
  • Content is arranged after all children have been measured.
  • Children collection is drawn to the screen.
  • The process is invoked again if additional Children are added to the collection, a LayoutTransform is applied, or the UpdateLayout method is called.
framework classes
Framework Classes

FrameworkElement

HorizontalAlignment

VerticalAlignment

Margin

Padding

Height

Width

MaxHeight

MaxWidth

MinHeight

MinWidth

FlowDirection

UIElement

Visibility

DesiredSize (ReadOnly)

ClipToBounds

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
  • Build a custom panel by inheriting from Panel
    • ArrangeOverride
    • MeasureOverride
layout performance considerations
Layout Performance Considerations
  • AffectsMeasure and AffectsArrange attributes
  • Use RenderTransform instead of LayoutTransform
  • Avoid unnecessary calls to UpdateLayout
  • Consider using the VirtualizingStackPanel
declaring and referencing style
Declaring and Referencing Style
  • Any element that derives from FrameworkElement
  • Store the style in resources
  • Two ways to apply a style:
    • By Name
    • By Type

<Style x:Key="Style1">

<Setter Property="Control.Background“ Value="Yellow"/>

</Style>

<Label Content="Yellow Background"

Style="{StaticResource Style1}" />

<Style TargetType="{x:Type Label}">

<Setter Property="FontSize" Value="12pt" />

</Style>

<Label Content=“Twelve Point Font” />

extending a style
Extending a Style
  • Styles can be based on other styles
  • Base on the style of existing type

<Style x:Key="Style2"

BasedOn="{StaticResource Style1}">

<Setter Property="Control.Foreground"

Value="Blue"/>

</Style>

<Style x:Key="TitleText"

BasedOn="{StaticResource {x:Type Label}}"

TargetType="{x:Type Label}">

<Setter Property="FontSize" Value="32pt" />

</Style>

control templates

Templated

Button

Control Templates
  • Control Templates Define the Structure of the Control
  • Totally Redo the Appearance
  • Leverage Existing Control Templates (In SDK)
content models29
Content Models
  • ContentControl
    • Button, RadioButton, CheckBox
  • HeaderedContentControl
    • Expander, TabItem, GroupBox
  • ItemsControl
    • Menu, ListBox, ComboBox, TreeView
  • HeaderedItemsControl
    • MenuItem, TreeViewItem, ToolBar
existing control templates
Existing Control Templates
  • In the Windows SDK
  • Copy as a Starting Point
data templates
Data Templates

DataTemplate

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>

choosing a data template
Choosing a Data Template

By Name (resource dictionary key)

ContentTemplate/ItemTemplate= {StaticResource myStyle}

By Type

<DataTemplate DataType="{x:Type cc:Car}">

<DataTemplate DataType="Book"> for XML

style triggers
Style Triggers
  • Change a style when a property changes
  • Change a style based on multiple property values

<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>

event triggers
Event Triggers
  • Change style elements based on an Event
  • Contains TriggerAction elements
    • Play a sound
    • Start a storyboard (ie. Animation)

<EventTriggerRoutedEvent="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>

tools
Tools
  • XamlPad
    • Part of the Windows SDK (free download)
  • Expression Suite, particularly Expression Blend
    • Tool for designers
    • Available to MSDN Premium subscribers
    • 60 day trial available: http://www.microsoft.com/expression
  • Visual Studio designer for WPF and WCF
    • CTP plug-in available for Visual Studio 2005
    • Final version available in Orcas
resources40
Resources

Windows SDK

http://windowssdk.msdn.microsoft.com

.NET Framework 3.0

http://www.netfx3.com

Karsten’s Five Day Course for Hitting the WPF Curve

http://blogs.msdn.com/karstenj (June 15)

Tim Sneath’s Guided Tour of Windows Presentation Foundation

http://msdn.microsoft.com/library/en-us/dnlong/html/wpf101.asp

slide43

© 2006 Microsoft Corporation. All rights reserved.

This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.