windows presentation foundation ("avalon"): beautiful code, beautiful design -...

Windows Presentation Foundation Windows Presentation Foundation ("Avalon"): Beautiful Code, Beautiful Design ("Avalon"): Beautiful Code, Beautiful Design - Applications Your Designers Can Work - Applications Your Designers Can Work WithWith

Robert IngebretsenRobert IngebretsenPRS317PRS317Program Manager, WPFProgram Manager, WPFMicrosoft CorporationMicrosoft Corporation

89Percentage of business readers who Percentage of business readers who called designcalled design “an essential way to “an essential way to

make lasting connections with make lasting connections with consumers”consumers”

Source: Source: Fast CompanyFast Company magazine, June 2005 magazine, June 2005

%

good enough.good enough.

good enough, meet…good enough, meet…

great!great!

powerfulpowerful visual and interactive visual and interactive

capabilitiescapabilities

cleanclean separation of UI and logicseparation of UI and logic

great toolsgreat tools for developers and designersfor developers and designers

PhotoStore Basic UIPhotoStore Basic UI

developer / designer workflowdeveloper / designer workflow

Designer DetailsDesigner DetailsLost in TranslationLost in Translation

while (!design.IsPerfect)while (!design.IsPerfect)

{{

Designer.CreateNewDesign();Designer.CreateNewDesign();

Developer.ImplementNewDesignDeveloper.ImplementNewDesign();();

design.IsPerfect = false;design.IsPerfect = false;

}}

while (!design.IsPerfect)while (!design.IsPerfect)

{{

Designer.CreateNewDesign();Designer.CreateNewDesign();

Developer.ImplementNewDesignDeveloper.ImplementNewDesign();();

design.IsPerfect = false;design.IsPerfect = false;

if (Schedule.SlipCount >= x) if (Schedule.SlipCount >= x) break;break;

}}

designer: designer: independentindependent UI creator UI creator

no more “translation” errorsno more “translation” errorsparallel workflowparallel workflow

realtime iteration and feedbackrealtime iteration and feedback

Window1.xaml.csWindow1.xaml.cs

Contains:Contains:Application logicApplication logic

Created by:Created by:Application Application developerdeveloper

Window1.xamlWindow1.xaml

Contains:Contains:Principal UIPrincipal UI

(controls, layout, (controls, layout, etc.)etc.)

Created by:Created by:Application Application

developer developer oror designerdesigner

Design Design Experience:Experience:

By hand or using a By hand or using a visual toolvisual tool

Styles.xamlStyles.xaml

Contains:Contains:Application “style”Application “style”(visual description (visual description

of UI elements)of UI elements)

Created by:Created by:Application Application designerdesigner



projectproject structurestructure

Data model, event names, Data model, event names, element names, etc.element names, etc.

Resource names and Resource names and element types.element types.

PhotoStore ProjectPhotoStore Project

stylingstyling is… is…

resourcesresourcesstylesstyles

templatestemplatestriggerstriggers

storyboardsstoryboards

stylesstyles

centrally define the centrally define the appearanceappearance and and interactive behaviorsinteractive behaviors of the of the

elements in your appelements in your app

stylestyle drilldown drilldown

lookup key can be a lookup key can be a name name or a or a type type

Styled ButtonStyled Button

<Style x:Key=“<Style x:Key=“MyStyleMyStyle” TargetType=“” TargetType=“{x:Type {x:Type Button}Button}”>”>

</Style></Style>


lookup key can be a lookup key can be a name name or a or a type type


<Style TargetType=“<Style TargetType=“{x:Type Button}{x:Type Button}”>”>

</Style></Style>


use <Setter> to set properties onuse <Setter> to set properties onthe styled elementthe styled element


<Style x:Key=“MyStyle” TargetType=“{x:Type Button}”><Style x:Key=“MyStyle” TargetType=“{x:Type Button}”> <Setter Property=“Background” Value=“Green” /><Setter Property=“Background” Value=“Green” /></Style></Style>


styles can be based on other stylesstyles can be based on other styles


<Style <Style x:Key=“BaseStyle”x:Key=“BaseStyle” > > <Setter Property=“Foreground” Value=“Orange” /><Setter Property=“Foreground” Value=“Orange” /></Style></Style>

<Style x:Key=“MyStyle” <Style x:Key=“MyStyle” BasedOn=“{StaticResource BasedOn=“{StaticResource BaseStyle}”BaseStyle}” /> /> <Setter Property=“Background” Value=“Green” /><Setter Property=“Background” Value=“Green” /></Style></Style>

Styles and ResourcesStyles and Resources

templatestemplates

describe the visual describe the visual structurestructure of a controlof a control

templatetemplate drilldown drilldown

control introduces the control introduces the Template propertyTemplate propertywhich defines the control’s which defines the control’s structure structure and and

appearanceappearance

<Button <Button Template=“{StaticResource Template=“{StaticResource MyButton}”MyButton}” /> />


use use composition composition to describe to describe the control’s the control’s visual treevisual tree

TemplatedTemplatedButtonButton

<ControlTemplate x:Key=“MyButton” TargetType=“{x:Type <ControlTemplate x:Key=“MyButton” TargetType=“{x:Type Button}”>Button}”> <Grid><Grid> <Ellipse /><Ellipse /> <ContentPresenter /><ContentPresenter /> </Grid></Grid></ControlTemplate></ControlTemplate>

<Button Template=“{StaticResource MyButton}” /><Button Template=“{StaticResource MyButton}” />


use use contract elements contract elements to ensure to ensure correct functionalitycorrect functionality

TemplatedTemplatedButtonButton

<ControlTemplate x:Key=“MyButton” TargetType=“{x:Type <ControlTemplate x:Key=“MyButton” TargetType=“{x:Type Button}”>Button}”> <Grid><Grid> <Ellipse /><Ellipse /> <ContentPresenter /><ContentPresenter /> </Grid></Grid></ControlTemplate></ControlTemplate>

<Button Template=“{StaticResource MyButton}” /><Button Template=“{StaticResource MyButton}” />


use <DataTemplates> to define a visualuse <DataTemplates> to define a visualrepresentation of a data objectrepresentation of a data object

<DataTemplate <DataTemplate DataType=“{x:Type DataType=“{x:Type PhotoObject}”PhotoObject}”>> <Image Source<Image Source=“{Binding FileName}”=“{Binding FileName}” /> /></ControlTemplate></ControlTemplate>

TemplatesTemplates

triggers and storyboardstriggers and storyboards

Use with styles and templates toUse with styles and templates tocreate create rich rich and and dynamic dynamic

interactioninteraction

triggers and storyboardstriggers and storyboards drilldown drilldown

triggers are triggers are activatedactivated when a specified when a specified condition condition becomes truebecomes true

<Trigger <Trigger Property=“IsMouseOver” Value=“true”Property=“IsMouseOver” Value=“true”>> </Trigger></Trigger>


define “triggered” define “triggered” property changes property changes using using <Setter> <Setter>

(the previous state gets cached)(the previous state gets cached)


<Trigger Property=“IsMouseOver” Value=“true”><Trigger Property=“IsMouseOver” Value=“true”> <Setter Property=“Background” <Setter Property=“Background” Value=“Orange” />Value=“Orange” /></Trigger></Trigger>


use use storyboardsstoryboards with <EventTrigger> to with <EventTrigger> to add add dynamic animationsdynamic animations


<EventTrigger RoutedEvent=“Mouse.Enter”><EventTrigger RoutedEvent=“Mouse.Enter”> <Storyboard TargetProperty=“MaxWidth”><Storyboard TargetProperty=“MaxWidth”> <DoubleAnimation Duration=“0:0:1” <DoubleAnimation Duration=“0:0:1” To=“150” /> To=“150” /> </Storyboard></Storyboard></EventTrigger></EventTrigger>

Storyboards and TriggersStoryboards and Triggers

Window1.xaml.csWindow1.xaml.cs



Window1.xamlWindow1.xaml

Contains:Contains:Principal UIPrincipal UI

(controls, layout, (controls, layout, etc.)etc.)

Created by:Created by:Application Application

developer developer oror designerdesigner



Styles.xamlStyles.xaml

Contains:Contains:Application “style”Application “style”(visual description (visual description

of UI elements)of UI elements)

Created by:Created by:Application Application designerdesigner



projectproject structurestructure

Window1.xaml.Window1.xaml.cscs



Window1.xamlWindow1.xamlProfessionalProfessional

VersionVersion

Window1.xamlWindow1.xamlConsumerConsumer

VersionVersion

Window1.xamlWindow1.xamlMCEMCE VersionVersion

targeted experiencestargeted experiences

Keyword: Keyword: targetedtargeted

Targeted ExperiencesTargeted Experiences

with power comes responsibilitywith power comes responsibility

HTMLThe Early Years

Font Font SaladSaladFrankly,Frankly,

building great software with WPFbuilding great software with WPF

Start with Start with what you knowwhat you know

Involve a Involve a designerdesigner when in when in unchartered territoryunchartered territory

Remember that your Remember that your brand is the brand is the entire experienceentire experience

Make software that Make software that lastslasts—just as —just as enjoyable enjoyable the 100th time as the 1stthe 100th time as the 1st

Create apps that are Create apps that are appropriateappropriate for the intended audience or userfor the intended audience or user

Draw focus to Draw focus to hero hero and and McGuffin McGuffin momentsmoments

Good design means that Good design means that beauty beauty andandusability usability are in are in balancebalance. .

Donald A. Norman, Interactions, July/August 2002Donald A. Norman, Interactions, July/August 2002

related talksrelated talks

databinding: databinding: PRS324 (Thursday, 3:45)PRS324 (Thursday, 3:45)building controls:building controls: PRS431 (Friday, 10:30) PRS431 (Friday, 10:30)

layout: layout: PRS329 (Thursday, 5:15)PRS329 (Thursday, 5:15)rich content: rich content: PRS330 (Friday, 8:30)PRS330 (Friday, 8:30)

designer tool overview:designer tool overview: TLN213 (Thursday, 11:30) TLN213 (Thursday, 11:30)

meme

email:email: [email protected] [email protected]:blog: http://www.notstatic.com http://www.notstatic.com

demo source:demo source: http://www.notstatic.com/pdc2005 http://www.notstatic.com/pdc2005

thank you.thank you.

windows presentation foundation ("avalon"): beautiful code, beautiful design -...

Documents

application developerwindow1

application logiccreated

visual structure

visual toolstyles

visual representation

storyboards drilldowntriggers

element names

independent ui creatorno