Fundamentals of WPFTour of Content Families

Rob.Relyea@microsoft.comLead Program Managerrrelyea.spaces.live.com robrelyea.com/events/mix07

WPF in 3 Circles or Less

W P F

WPF in 3 Circles or Less

Windows Desktop or

Browser

Deep Platform with

IntegrationSimple to Run*

5

Content FamiliesSegoe UI

6

2D Graphics

Using Shapes

demo

2D Content

Create in Xaml conversant toolsExpression DesignExpression Blend

Converters/Exporters from well known formats.svgAdobe Illustrator

Programmatic CreationBased on your data

Custom Shapes Example

RobbyIngebretsonnotstatic.com/archive/43

10

Brushes

Brushes are used to fill geometriesSolid colors, linear and radial gradients, images, visuals, and drawings can be used as brushes

Images, Visuals, and Drawings can tile or stretch

VisualBrushEnables “live” secondary renderings of your content

DrawingBrushAllows you to produce a vector fill that can be tiled

Applying 2D Graphics

demo

12

Panels & Layout

Adapt UI to Content

Using Decorators & Panels

demo

Panel basics, Using custom panels

Panels – Build user adaptive UISystem.Windows.Controls

• PanelsPosition/size children using:

Size-to-ContentTransformsOpacity

Children are UIElementsIncluding nested panels

Built in Panels includeCanvas

StackPanel

DockPanel

WrapPanel

Grid

UniformGrid 14

15

Layout System

Recursive Layout Process

MeasureParent to Child: How big do you want to be?

Child to Parent: DesiredSize

ArrangeParent to Child: Here is your available space.

Child to Parent: ActualSize

Custom Panel Examples

RobRelyea.com/wpf/panels

Text

Segoe UI

Using TextBlock

demo

<StackPanel TextBlock.FontSize="48">

<TextBlock >Hello <Bold>World</Bold>. How are <Italic>you</Italic>?</TextBlock>

<TextBlock > Hello <Span FontWeight="Bold">World</Span>. How are <Span

FontStyle="Italic">you</Span>? </TextBlock>

<TextBlock TextTrimming="CharacterEllipsis"> Hello <Span FontWeight="Bold">World</Span>. How are <Span FontStyle="Italic">you</Span>?</TextBlock>

<TextBlock TextTrimming="WordEllipsis" > Hello <Span FontWeight="Bold">World</Span>. How are <Span FontStyle="Italic">you</Span>?</TextBlock>

<TextBlock TextWrapping="Wrap> Hello <Span FontWeight="Bold">World</Span>. How are <Span FontStyle="Italic">you</Span>?</TextBlock>

</StackPanel>

TextBlock ExampleContent Model, TextTrimming, TextWrapping

FlowDocuments

Using FlowDocuments

demo

XPS Documents

XPS Documents

demo

Glyphs, FixedPage, XPS Creation

Flow & XPS Applied

Seattle PI ReaderWord 2007 – save as XPS or PDF feature

Text Editing

Text Editing Demos

demo

TextBox, RichTextBox

Native Ink Support

Using Ink

demo

29

Content FamiliesSegoe UI

Call to Action

Build easy-to-run, rich windows applications that integrate with the desktop or the browser.Harness WPF power for your Content!

CreationVisualizationAnnotation

Build a set of skills (.Net, Xaml, System.Windows.*) that are leveragable with Silverlight & WPF

Please fill out your eval

evaluation

Discussion

robrelyea.com/events/mix07for related resources, slides, demos, pointers to other relevant mix07 talks.

© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions,

it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.