Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wpf Introduction


Published on

Published in: Technology
  • Be the first to comment

Wpf Introduction

  1. 1. Windows Presentation Foundation Max Knor Developer Evangelist Microsoft Austria
  2. 2. Topics Overview XAML Layout Panels Controls Dependency Objects & Routed Events Styles, Templates & Resources Data Binding
  3. 3. Demo WPF Puzzle
  4. 4. Why WPF? Another UI Framework? New Display Engine Based on Direct3D  no window handles Leverages Modern Hardware (GPUs) Resolution Independence Vectorgraphics  Scalable Multimedia Integration Controls + Documents + Video/Audio New .NET based Development Concept New class libraries Seperated UI vs. Logic XAML – XML based UI Specification language
  5. 5. Developer Designer Collaboration Designer Developer
  6. 6. Topics Overview XAML Layout Panels Controls Dependency Objects & Routed Events Styles, Templates & Resources Data Binding
  7. 7. XAML Extensible Application Markup Language Generic XML Object Instantiation Not How – but What! Creates Object Hierarchies Used in Windows Presentation Foundation Windows Workflow Foundation
  8. 8. XAML vs. C# <Button Background=quot;Redquot;> Click Me! </Button> Button button1 = new Button(); button1.Content = quot;Click Me!quot;; button1.Background = new SolidColorBrush( Colors.Red);
  9. 9. XAML vs. C# XML Namespaces <--> .NET Namespaces XML Elements <--> .NET Objects XML Attributes <--> .NET Object Properties
  10. 10. Demo XAML
  11. 11. Topics Overview XAML Layout Panels Controls Dependency Objects & Routed Events Styles, Templates & Resources Data Binding
  12. 12. WPF Positioning Absolute Positioning X / Y, Width / Height Relative Positioning NO X/Y, Width/Height Margin Alignment <Button Margin=quot;20,10,20,10quot;>Hallo Welt</Button>
  13. 13. WPF Positioning - Alignment HorizontalAlignment Stretch, Left, Right, Center VerticalAlignment Stretch, Top, Center, Bottom <Button HorizontalAlignment=quot;Stretchquot; <Button HorizontalAlignment=quot;Leftquot; VerticalAlignment=quot;Stretchquot;> VerticalAlignment=quot;Bottomquot;> Hallo Welt Hallo Welt </Button> </Button>
  14. 14. Layout Controls StackPanel Underneath, side-by-side WrapPanel Same but with automatic wrapping Canvas X-,Y- Positions DockPanel Grid ...
  15. 15. Demo Using Layout Controls
  16. 16. Topics Overview XAML Dependency Objects & Routed Events Layout Panels Controls Styles, Templates & Resources Commands Data Binding
  17. 17. Class Hierarchy
  18. 18. Simple Controls • PasswordBox • ScrollBar • ProgressBar • Slider • TextBox • RichTextBox
  19. 19. Content Controls ScrollBarViewer Button ToolTip RepeatButton ToggleButton UserControl Window CheckBox NavigationWindow RadioButton Label Frame ListBoxItem StatusBarItem
  20. 20. Demo Content Controls
  21. 21. Headered Content Controls Content Control plus header Expander MenuItem GroupBox TabItem …
  22. 22. Items Controls Container for multiple items (lists) ListBox ComboBox Menu ContextMenu StatusBar TreeView TabControl ...
  23. 23. Demo Listbox, Toolbar, Menu
  24. 24. Topics Overview XAML Layout Panels Controls Dependency Objects & Routed Events Styles, Templates & Resources Data Binding
  25. 25. Dependency Properties Values stored in a central dictionary Instead of being stored in a private member Can include additional metadata (like default value) Manipulated by the WPF runtime Databinding Animation, Styles, etc…
  26. 26. Dependency Properties public class MyDependencyObject : DependencyObject { public static readonly DependencyProperty SomeStateProperty = DependencyProperty.Register(quot;SomeStatequot;, typeof(String), typeof(MyDependencyObject)); public string SomeState { get { return (string)this.GetValue(SomeStateProperty); } set { this.SetValue(SomeStateProperty, value); } } }
  27. 27. Attached Properties Store Properties of one control on another one <Grid> <Button Grid.Column=“0quot; Grid.Row=quot;40quot;> Click Me! </Button> </Grid>
  28. 28. Demo Dependency Properties Attached Properties
  29. 29. Routed Events Preview Application Preview Window Tunneling Bubbling Preview Grid Preview Button Preview Canvas Preview Ellipse
  30. 30. Routed Events (Attached Events) “Collect” events at a higher hierarchy level <Canvas Button.Click=“Button_Click”> <Button> Click Me! </Button> </Canvas>
  31. 31. Events Create Routed Events public static readonly RoutedEvent TapEvent = EventManager.RegisterRoutedEvent( quot;Tapquot;, RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(MyButtonSimple)); public event RoutedEventHandler Tap { add { AddHandler(TapEvent, value); } remove { RemoveHandler(TapEvent, value); } } Use RoutedEventArgs.Source instead of sender
  32. 32. Demo Routed Events
  33. 33. Topics Overview XAML Layout Panels Controls Dependency Objects & Routed Events Styles, Templates & Resources Data Binding
  34. 34. Designer Developer
  35. 35. Styles are about setting properties…
  36. 36. Demo Basic Styles Resources
  37. 37. Resource Hierarchy <Window> System Resources <Window.Resources> ... </Window.Resources> Application Application Resources Resources <Grid> <Grid.Resources> ... Window/Page Window/Page </Grid.Resources> Resources Resources <ListBox> Element Element <ListBox.Resources> Resources Resources ... </ListBox.Resources> </ListBox> Element Element </Grid> Resources Resources </Window>
  38. 38. 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 <Window.Resources> <Style TargetType=quot;{x:Type TextBlock}quot;> <Setter Property=quot;Marginquot; Value=quot;5quot; /> </Style> </Window.Resources>
  39. 39. Lookless Controls and Templates Control implies behaviour Probably supplies default look Designer free to supply new look
  40. 40. Demo Control Templates
  41. 41. Topics Overview XAML Layout Panels Controls Dependency Objects & Routed Events Styles, Templates & Resources Data Binding
  42. 42. Data Binding Concept Binding Source On<PropertyName>Changed INotificationPropertyChanged DependencyProperty
  43. 43. Binding in Markup <Image Source=quot;truck.pngquot; <Slider Orientation= Canvas.Left= quot;Horizontalquot; quot;{Binding Path=Value, Name=quot;horzPosquot; ElementName=horzPos}quot; Value=quot;40quot;/> /> {Binding Path=Value, ElementName=horzPos}
  44. 44. Demo UI Element Binding Object Binding
  45. 45. Share Common Source DataContext= StackPanel {Binding Source={StaticResource myData}} HorizontalSlider Value= {Binding Path=XPos, Path=XPos} Image Source={StaticResource myData}} Canvas.Left= {Binding Path=XPos, Path=XPos} Source={StaticResource myData}}
  46. 46. Provide Data From Code May be easier to load data in codebehind Can set DataContext in code Foo myDataObject = new Foo(); myDataObject.Bar = 42; // Set DataContext myWindow.DataContext = myDataObject;
  47. 47. Data Binding – Conversion & Validation Validation ValidationRule Converter IValueConverter, IMultiValueConverter
  48. 48. Demo Databinding to CLR Objects
  49. 49. Data and Controls ContentControl – singular content Button, CheckBox, Label, ListBoxItem, … ItemsControl – plural content ListBox, ComboBox, Menu, TabControl, ToolBar, … Can use data objects as content myButton.Content = new Car(); myListBox.Items.Add(new Car()); Car c = (Car) myListBox.SelectedItem;
  50. 50. Data Templates class Car { string Image {get;set} string Model {get;set} } DataTemplate <DataTemplate x:Key=quot;carTemplatequot;> <Border BorderBrush=quot;Bluequot; BorderThickness=quot;2quot; Background=quot;LightGrayquot; Margin=quot;10quot; Padding=quot;15,15,15,5quot;> <StackPanel> <Image HorizontalAlignment=quot;Centerquot; Source=quot;{Binding Path=Image}quot; /> <Border HorizontalAlignment=quot;Centerquot; BorderBrush=quot;Navyquot; Background=quot;#DDFquot; BorderThickness=quot;1quot; Margin=quot;10quot; Padding=quot;3quot;> <TextBlock FontSize=quot;18quot; Text=quot;{Binding Path=Model}quot; /> </Border> </StackPanel> </Border> </DataTemplate>
  51. 51. Demo Databinding a list Datatemplates
  52. 52. Topics Overview XAML Layout Panels Controls Dependency Objects & Routed Events Styles, Templates & Resources Data Binding
  53. 53. Have a look at XAML Powertoys ( WPF Toolkit – Datagrid, DatePicker, Ribbon ( WPF Themes ( Silverlight Toolkit (
  54. 54. Contact Max Knor Developer Evangelist Microsoft Austria
  55. 55. WPF Commands
  56. 56. WPF Commands GOF Command Pattern Decoupling control and command ICommand interface Execute(), CanExecute() Implemented by RoutedUICommand Source implements ICommandSource
  57. 57. Commands Architecture
  58. 58. Defining Commands Controls define a command <Button Command=quot;ApplicationCommands.Newquot;> <Image Source=quot;toolbargraphics/New.bmpquot; /> </Button> CommandBindings define the handler <Window.CommandBindings> <CommandBinding Command=quot;ApplicationCommands.Newquot; Executed=quot;FileNewquot; CanExecute=quot;CanFileNewquot; /> </Window.CommandBindings>
  59. 59. Command Libraries Predefined Command Libraries ApplicationCommands ComponentCommands EditingCommands MediaCommands NavigationCommand
  60. 60. Demo CommandBindings
  61. 61. Custom Commands Instantiate an RoutedUICommand Assign InputGestures Pack into CommandLibrary
  62. 62. Demo Custom Command
  63. 63. Interop and Migration
  64. 64. Interoperability! Can use WPF with existing code WPF inside existing code Existing code inside WPF Interop at the component level Maximum richness => all WPF
  65. 65. Airspace One pixel, one technology File Edit View Help File Edit View Help Win32 WPF Win32 WPF DirectX DirectX
  66. 66. Airspace File Edit View Help File Edit View Help Win32 Win32 WPF WPF DirectX DirectX
  67. 67. Chrome and Canvas Chrome Canvas
  68. 68. Mixed Application Ideas A new look for your chrome Visual effects for your canvas WPF for faster rendering? Wizards and help systems Generate HTML => Generate XAML
  69. 69. Windows Forms private void WindowLoaded(object sender, EventArgs e) { WindowsFormsHost host = new WindowsFormsHost(); host.Height = new Length(120); host.Width = new Length(150); swf.Control child = new UserControl1(); child.Dock = swf.DockStyle.None; host.AddChild(child); border.Child = host; }
  70. 70. Demo WPF <--> Windows Forms Interop
  71. 71. Summary Can use WPF with existing code Maximum richness => all WPF Interop is for components