Windows Presentation Foundation Maximilian Knor Developer Evangelist Developer and Plattform Group Microsoft Österreich

MSDN Briefings – Organisation Monthly technical briefings Currently released technology Your current needs Invitation / Registration / Feedback Well, what I am doing here?

Topics Windows Presentation Foundation Overview 2D Controls and Layout Styles, Templates & Resources Data Binding Animation Interop and Migration

Why WPF? Another UI Framework? Aren‘t these some classics App flickers on re-size Overlay controls and videos Themeing und styling What‘s the cause? Win32 has limits Graphics rendered by CPU

The WPF Approach Unify UI, Documents, Media Integrated development New Windows infrastructure Vector based graphics Use display hardware (D3D) Built-in UI patterns Designers and tools Bringing designers into the process Declarative programming models

.NET 3.0 Windows Presentation Foundation Windows Communication Foundation Windows Workflow Foundation Windows Card Space WPF User Experience WCF Unified Messaging WF Federated Workflow CS Federated Identity

WPF Programming Model Button b1 = new Button(); b1.Content = "OK"; b1.Background = new SolidColorBrush(Colors.LightBlue); b1.Width = new Length(100); OK HorizontalGradient= "White LtBlue" Dim b1 As New Button b1.Content = "OK" b1.Background = New SolidColorBrush(Colors.LightBlue) b1.Width = New Length(100) Separate UI and behavior Do you know ASP.NET Similar but more powerful XAML What, Not How! Creates object hierarchy

Designer Developer Developer Designer Collaboration

XAML Extensible Applications Markup Language

Properties as Attributes or Elements

Attached Properties

Markup Extensions

Topics Windows Presentation Foundation Overview 2D Controls and Layout Styles, Templates & Resources Data Binding Animation Interop and Migration

Shapes Elements of UI tree Just like controls and other elements Rectangle Ellipse Polyline Polygon Path

Demo 2D Shapes

Shapes Example

Shapes and Code Shapes accessible from code behind Just like any element Change appearance by setting properties Screen is automatically updated

Brushes Specifies how shape is filled Used for properties throughout WPF

Linear/RadialGradientBrush Fills across a range of colors Enables interesting visual effects

ImageBrush

Composability: DrawingBrush Fill with vector image Scalable

Composability: VisualBrush Fill with any UI element Makes certain design tricks easy Reflection of UI Use as 3D surface texture

OpacityMask Apply opacity to any visual using any Brush

Transformations Any element can be transformed Scaling, rotation, moving Optionally affects layout LayoutTransform RenderTransform Included into hit testing

Hit Testing Built in for all drawing elements Takes transformations into account Bubbling event model

Demo Transformations

Topics Windows Presentation Foundation Overview 2D Controls and Layout Styles, Templates & Resources Data Binding Animation Interop and Migration

Class Hierarchy

Dependency Property

Layout Controls StackPanel WrapPanel Canvas DockPanel Grid...

WPF Positioning Absolute Positioning X / Y, Width / Height Relative Positioning NO X/Y, Width/Height Margin Alignment

WPF Positioning - Alignment HorizontalAlignment Stretch, Left, Right, Center VerticalAlignment Stretch, Top, Center, Bottom

Simple Controls PasswordBox ScrollBar ProgressBar Slider TextBox RichTextBox...

Content Controls Button RepeatButton ToggleButton CheckBox RadioButton Label Frame ListBoxItem StatusBarItem ScollBarViewer ToolTip UserControl Window NavigationWindow...

Demo Controls

Events Routed Event Handling Routing Strategy Tunneling, Bubbling, Direct

Events Create Routed Events

Events Event notation PreviewXxx – Tunnelled Xxx - Bubbled Base Class RoutedEventArgs Attached Events

Demo Routed Event Handling

Headered Content Controls Content Control with additional header Expander MenuItem GroupBox TabItem Usw.

Items Controls Container for multiple items (list) ListBox ComboBox Menu ContextMenu StatusBar TreeView TabControl Usw.

Commands Controls define a command CommandBindings define the handler

Demo TabControl, Listbox, Toolbar, Commands

Topics Windows Presentation Foundation Overview 2D Controls and Layout Styles, Templates & Resources Data Binding Animation Interop and Migration

Designer Developer

Skeleton Prototype & Experiment Feedback from Customers Final Product Design Development Process Styling & Templates

Styles are about setting properties…

Setting Properties Trigger Animations Template Styles

Lookless Controls and Templates Control implies behaviour Probably supplies default look Designer free to supply new look

Styling and Resources Style rarely defined inline Tend to be reused for consistency Usually defined as resources

Resource Dictionaries Simple Key, Value collection FrameworkElement.Resources

Resource Hierarchy System Resources Application Resources Element Resources Element Resources Element Resources Window/Page Resources Window/Page Resources Element Resources Application Resources

Application Resources Styles and templates Shared graphics

Page/Window Resources Utility elements Data sources Converters Page-specific templates

Element-Specific Resources Locally-scoped Styles and templates

Automatic Styles/Templates Most resources must use x:Key Optional with Styles and Data Templates Can use TargetType or DataType instead Applied to target automatically – no reference required

Demo Styles

System Resources SystemColors – Colors and Brushes SystemFonts SystemParameters (sizes, settings)

Resources and Code-Behind FindResource SetResourceReference Change resource value with indexer someElem.Resources["foo"] = bar; Initializing from code-behind not so good Must set before referencing XAML loaded OK for app resources, less good otherwise