1 / 61

Introduction to WPF

Based on a Microsoft presentation. Introduction to WPF. .NET At The Core. Topics. Windows Presentation Foundation Overview 2D Controls and Layout Styles, Templates & Resources Data Binding Animation. Overview. Now. GDI (20 years), GDI+, WinForms DirectX (11 years), Direct3D

barclay-jacobson
Download Presentation

Introduction to WPF

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Based on a Microsoft presentation Introduction to WPF

  2. .NET At The Core

  3. Topics • Windows Presentation Foundation • Overview • 2D • Controls and Layout • Styles, Templates & Resources • Data Binding • Animation

  4. Overview

  5. Now • GDI (20 years), GDI+, WinForms • DirectX (11 years), Direct3D • Quartz, DirectShow (8 years) • Problems • Showing their age • Each API is different • Mixing APIs is challenging

  6. Next Gen • WPF – replaces GDI • Direct3D – large games, used by WPF • Media Foundation – ultimately will replace DirectShow • MCML –markup language for Media Center Edition applications • XNA – small games

  7. WPF • Compositing • UI, Documents, Media, 3D, Browser, … • Declarative programming with XAML markup • For Designers and Developers • Rewritten from scratch • Built on top of Direct3D • Hardware accelerated • Vector based • Resolution independent • Retained graphics

  8. WPF Vision • Integrated, vector-based composition engine • Utilizing the power of the PC throughout the graphics stack • Unified approach to UI, Documents, and Media • Integration as part of development and experience • Declarative programming • Bringing designers directly into application development • Ease of deployment • Allowing administrators to deploy and manage applications securely

  9. Designer Developer Developer Designer Collaboration

  10. XAML • XML for Applications Markup Language <Button Name="button1"> Click Me! </Button> Button button1 = new Button(); button1.Content = "Click Me!";

  11. Properties as Attributes or Elements <Button Content="Click Me!" Background="LightGreen" /> <Button> <Button.Background> LightGreen </Button.Background> Click Me! </Button>

  12. Attached Properties <Canvas> <Button Canvas.Top="30" Canvas.Left="40"> Click Me! </Button> </Canvas>

  13. 2D Graphics

  14. Shapes • Elements of UI tree • Just like controls and other elements

  15. Shapes Example <Canvas Width="100" Height="100"> <Ellipse Fill="Yellow" Stroke="Black" StrokeThickness="7" Width="100" Height="100" /> <Ellipse Fill="Black" Width="10" Height="15" Canvas.Left="28" Canvas.Top="28" /> <Ellipse Fill="Black" Width="10" Height="15" Canvas.Left="62" Canvas.Top="28" /> <Path Stroke="Black" StrokeThickness="6" Data="M 30,60 Q 50,90 70,60" /> </Canvas>

  16. Shapes and Code • Shapes accessible from code behind • Just like any element • Change appearance by setting properties • Screen is automatically updated <Ellipse Fill="Yellow" x:Name="myEllipse" StrokeThickness="7" Stroke="Black" Width="100" Height="100" /> // ...in code behind myEllipse.Width = 200;

  17. Transforms • Any element can be transformed • Scaling, rotation, shearing • Optionally affects layout

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

  19. Brushes • Specifies how shape is filled • Used for properties throughout WPF • Polymorphic • Composable <RectangleFill="Red" Width="200" Height="100" />

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

  21. ImageBrush <TextBlock FontSize="72" FontFamily="Arial Black"> <TextBlock.Foreground> <ImageBrush ImageSource="c:\Windows\Blue Lace 16.bmp" /> </TextBlock.Foreground> Hello, World! </TextBlock>

  22. Composability: DrawingBrush • Fill with vector image • Scalable

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

  24. OpacityMask • Apply opacity to any visual using any Brush

  25. Imaging and Video • Elements • Image • MediaElement • Integrate images and video into a brush • Paint shapes • Use as a 3D surface texture • Extensive image handling support • System.Windows.Media.Imaging

  26. Future Proofing the Platform and Your Applications • Resolution independent graphics • Double precision floating point coordinates and transformations • Hardware capabilities are abstracted to better map to future hardware advances

  27. Summary • Modern integrated content platform • Consistency across UI and development • Higher quality through hardware advances

  28. Controls and Layout

  29. Class Hierarchy

  30. Layout Controls • StackPanel • WrapPanel • Canvas • DockPanel • Grid • ...

  31. Simple Controls • PasswordBox • ScrollBar • ProgressBar • Slider • TextBox • RichTextBox • ...

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

  33. Headered Content Controls • Expander • GroupBoxItem • TabItem • ...

  34. Items Controls • Menu • ContextMenu • StatusBar • TreeView • ListBox • ComboBox • TabControl • ...

  35. Summary • Controls • Containers • Events • Commands

  36. Styles, Templates and Resources

  37. Designer Developer

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

  39. Styles are about setting properties…

  40. Setting Properties Styles Trigger Animations Template

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

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

  43. Resource Dictionaries • Simple Key, Value collection • FrameworkElement.Resources <Grid> <Grid.Resources> <Style x:Key="dapper"> <Setter Property="Background" Value="LimeGreen" /> </Style> </Grid.Resources> ... <Button Style="{StaticResource dapper}">Click</Button>

  44. Window/Page Resources Window/Page Resources Element Resources Resource Hierarchy <Window> <Window.Resources> ... </Window.Resources> <Grid> <Grid.Resources> ... </Grid.Resources> <ListBox> <ListBox.Resources> ... </ListBox.Resources> </ListBox> </Grid> </Window> System Resources Application Resources Application Resources Element Resources Element Resources Element Resources

  45. Data Binding

  46. Agenda Element data binding Object and XML data binding Data templates Master / child relationships Debugging

  47. Data Binding Overview Target Any property, any element Source CLR Object WPF Element ADO.NET XML Dynamic INotifyPropertyChanged, DependencyProperty or PropertyDescriptor Multiple models One Time One Way Two Way Value Converter Control Property Binding “Data Item” Property

  48. Binding in Markup <Image Source="truck.png" Canvas.Left= "{Binding Path=Value, ElementID=horzPos}" /> <Slider Orientation= "Horizontal" Name="horzPos" Value="40"/> {Binding Path=Value, ElementName=horzPos}

  49. Object Data Providers Add to resource dictionary Named source objects Use with resource binding {StaticResource theCars} <Window> <Window.Resources> <ObjectDataProvider x:Key="myData" ObjectType=" {x:Type Foo}" /> </Window.Resources> ... <TextBlock TextContent="{Binding Path=Bar, Source={StaticResource myData} }" />

More Related