1 Introduction to WPFNoea / PQC Web Introduction to WPF Introduction to WPF Based on a Microsoft presentation

2 Introduction to WPFNoea / PQC Web.NET At The Core

3 Introduction to WPFNoea / PQC Web Topics Windows Presentation Foundation –Overview –2D –Controls and Layout –Styles, Templates & Resources –Data Binding –Animation

Overview

5 Introduction to WPFNoea / PQC Web 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 Introduction to WPFNoea / PQC Web 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 Introduction to WPFNoea / PQC Web 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 Introduction to WPFNoea / PQC Web 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 Introduction to WPFNoea / PQC Web Designer Developer Developer Designer Collaboration

10 Introduction to WPFNoea / PQC Web XAML XML for Applications Markup Language Click Me! Click Me! Button button1 = new Button(); button1.Content = "Click Me!"; Button button1 = new Button(); button1.Content = "Click Me!";

11 Introduction to WPFNoea / PQC Web Properties as Attributes or Elements <Button Content="Click Me!" Background="LightGreen" /> <Button Content="Click Me!" Background="LightGreen" /> LightGreen Click Me! LightGreen Click Me!

12 Introduction to WPFNoea / PQC Web Attached Properties Click Me! Click Me!

2D Graphics

14 Introduction to WPFNoea / PQC Web Shapes Elements of UI tree –Just like controls and other elements Rectangle Ellipse Polyline Polygon Path

15 Introduction to WPFNoea / PQC Web Shapes Example <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" />

16 Introduction to WPFNoea / PQC Web 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 Introduction to WPFNoea / PQC Web Transforms Any element can be transformed –Scaling, rotation, shearing Optionally affects layout

18 Introduction to WPFNoea / PQC Web Hit Testing Built in for all drawing elements Takes transformations into account Bubbling event model

19 Introduction to WPFNoea / PQC Web Brushes Specifies how shape is filled –Used for properties throughout WPF Polymorphic Composable <Rectangle Fill="Red" Width="200" Height="100" />

20 Introduction to WPFNoea / PQC Web Linear/RadialGradientBrush Fills across a range of colors Enables interesting visual effects

21 Introduction to WPFNoea / PQC Web ImageBrush <ImageBrush ImageSource="c:\Windows\Blue Lace 16.bmp" /> Hello, World!

22 Introduction to WPFNoea / PQC Web Composability: DrawingBrush Fill with vector image –Scalable

23 Introduction to WPFNoea / PQC Web Composability: VisualBrush Fill with any UI element Makes certain design tricks easy –Reflection of UI –Use as 3D surface texture

24 Introduction to WPFNoea / PQC Web OpacityMask Apply opacity to any visual using any Brush

25 Introduction to WPFNoea / PQC Web 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 Introduction to WPFNoea / PQC Web 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 Introduction to WPFNoea / PQC Web Summary Modern integrated content platform Consistency across UI and development Higher quality through hardware advances

Controls and Layout

29 Introduction to WPFNoea / PQC Web Class Hierarchy

30 Introduction to WPFNoea / PQC Web Layout Controls StackPanel WrapPanel Canvas DockPanel Grid...

31 Introduction to WPFNoea / PQC Web Simple Controls PasswordBox ScrollBar ProgressBar Slider TextBox RichTextBox...

32 Introduction to WPFNoea / PQC Web Content Controls Button RepeatButton ToggleButton CheckBox RadioButton Label Frame ListBoxItem StatusBarItem ScollBarViewer ToolTip UserControl Window NavigationWindow...

33 Introduction to WPFNoea / PQC Web Headered Content Controls Expander GroupBoxItem TabItem...

34 Introduction to WPFNoea / PQC Web Items Controls Menu ContextMenu StatusBar TreeView ListBox ComboBox TabControl...

35 Introduction to WPFNoea / PQC Web Summary Controls Containers Events Commands

Styles, Templates and Resources

37 Introduction to WPFNoea / PQC Web Designer Developer

38 Introduction to WPFNoea / PQC Web Skeleton Prototype & Experiment Feedback from Customers Final Product Design Development Process Styling & Templates

39 Introduction to WPFNoea / PQC Web Styles are about setting properties…

40 Introduction to WPFNoea / PQC Web Setting Properties Trigger Animations Template Styles

41 Introduction to WPFNoea / PQC Web Lookless Controls and Templates Control implies behaviour Probably supplies default look –Designer free to supply new look

42 Introduction to WPFNoea / PQC Web

43 Introduction to WPFNoea / PQC Web Styling and Resources Style rarely defined inline –Tend to be reused for consistency Usually defined as resources

44 Introduction to WPFNoea / PQC Web Resource Dictionaries Simple Key, Value collection FrameworkElement.Resources... Click

45 Introduction to WPFNoea / PQC Web Resource Hierarchy System Resources Application Resources Element Resources Element Resources Element Resources Window/Page Resources Window/Page Resources Element Resources Application Resources

46 Introduction to WPFNoea / PQC Web Application Resources Styles and templates Shared graphics <Application x:Class="ResourcePlay.MyApp" xmlns=" xmlns:x="

47 Introduction to WPFNoea / PQC Web Page/Window Resources Utility elements –Data sources –Converters Page-specific templates

48 Introduction to WPFNoea / PQC Web Element-Specific Resources Locally-scoped Styles and templates

49 Introduction to WPFNoea / PQC Web 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

50 Introduction to WPFNoea / PQC Web System Resources SystemColors – Colors and Brushes SystemFonts SystemParameters (sizes, settings) <Rectangle Height="50" Width="100" Fill="{x:Static SystemColors.ControlBrush}" /> <Rectangle Height="50" Width="100" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />

51 Introduction to WPFNoea / PQC Web 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

52 Introduction to WPFNoea / PQC Web Summary Styles empower designers Styles enable vibrant visuals Styles are the glue for WPF Styles depend on resources

53 Introduction to WPFNoea / PQC Web Data Binding

54 Introduction to WPFNoea / PQC Web Agenda Element data binding Object and XML data binding Data templates Master / child relationships Debugging

55 Introduction to WPFNoea / PQC Web 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 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 “Data Item” Property Binding Property

56 Introduction to WPFNoea / PQC Web 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}

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

58 Introduction to WPFNoea / PQC Web Share Common Source StackPanel Image HorizontalSlider Value= {Binding Path=XPos, Source={StaticResource myData}} Canvas.Left= {Binding Path=XPos, Source={StaticResource myData}} DataContext= {Binding Source={StaticResource myData}} Value= {Binding Path=XPos} Canvas.Left= {Binding Path=XPos}

59 Introduction to WPFNoea / PQC Web 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;

60 Introduction to WPFNoea / PQC Web Binding to XML <Car Make="Ford" Model="F-150"> truck.png... cars.xml <XmlDataProvider x:Key="cars" XPath="/Cars/Car" Source="cars.xml" /> <TextBlock TextContent="{Binding Source={StaticResource cars}}" />

61 Introduction to WPFNoea / PQC Web Provide XML From Code Can load XML data in codebehind –Just like any other data XmlDocument doc = new XmlDocument(); doc.LoadXml(" Hello, world "); myGrid.DataContext = doc;

62 Introduction to WPFNoea / PQC Web Databases and Web Services No special support required Use object binding –DataSet/DataTable support the TypeDescriptor system

63 Introduction to WPFNoea / PQC Web Data and Controls ContentControl – singular content –Button, CheckBox, Label, ListBoxItem, … ItemsControl – plural content –ListBox, ComboBox, Menu, TabControl, ToolBar, … Can use data objects as content myListBox.Items.Add(new Car()); myButton.Content = new Car(); Car c = (Car) myListBox.SelectedItem;

64 Introduction to WPFNoea / PQC Web Data Templates DataTemplate class Car { string Image {get;set} string Model {get;set} } <Border BorderBrush="Blue" BorderThickness="2" Background="LightGray" Margin="10" Padding="15,15,15,5"> <Border HorizontalAlignment="Center" BorderBrush="Navy" Background="#DDF" BorderThickness="1" Margin="10" Padding="3">

65 Introduction to WPFNoea / PQC Web Choosing a Data Template By Name (resource dictionary key) –ContentTemplate/ItemTemplate= {StaticResource myStyle} By Type – – for XML

66 Introduction to WPFNoea / PQC Web Summary WPF understands your data –use your favorite data model: XML, objects, SQL, WS … –Bind data to controls Templates give your data a face Controls “think” data –Data is pervasive across and integrated into the platform

Animation

68 Introduction to WPFNoea / PQC Web Why Animation? Enabling richer experiences Make a UI feel more naturalistic Smoother visual transitions

69 Introduction to WPFNoea / PQC Web Animation Anywhere Any property can be animated Anywhere ≠ everywhere –Exercise taste & discretion

70 Introduction to WPFNoea / PQC Web Declarative animation Tell animation system what you want –E.g. change Width from 10 to 100 over 10 seconds Does all the work for you –No need to set up timers –No need for custom drawing <DoubleAnimation From="10" To="100" Duration="0:0:10" Storyboard.TargetName="myellipse" Storyboard.TargetProperty="(Ellipse.Width)" />

71 Introduction to WPFNoea / PQC Web Essential Elements Triggers Timelines Animations

72 Introduction to WPFNoea / PQC Web Triggers Fire animations in response to stimuli –Use in element, Style, or template Two trigger styles: –Event-driven: –Property-driven: (enter and exit animations)

73 Introduction to WPFNoea / PQC Web Timelines A stretch of time: BeginTime and Duration Timelines form a hierarchy Some timelines are just structural –E.g. ParallelTimeline Other timelines do interesting things –Animation timelines

74 Introduction to WPFNoea / PQC Web Animation Timelines Animations specific to target type –DoubleAnimation, PointAnimation, etc. <DoubleAnimation From="10" To="100" Duration="0:0:10" Storyboard.TargetName="myellipse" Storyboard.TargetProperty="(Ellipse.Width)" />

75 Introduction to WPFNoea / PQC Web Relative vs Absolute Animations From and To Just To By From and By

76 Introduction to WPFNoea / PQC Web Acceleration/Deceleration Adds more natural feel to motion <DoubleAnimation From="50" To="70" AccelerationRatio="0.2" DecelerationRatio="0.3" Storyboard.TargetName="someElement" Storyboard.TargetProperty="(Ellipse.Width)" /> Sum must be <= 1

77 Introduction to WPFNoea / PQC Web Repeating and Reversing Timelines RepeatBehavior –Forever –Time, e.g. “0:0:5” repeats for 5 seconds –Count, e.g. “5.6x” repeats 5.6 times AutoReverse –True or False

78 Introduction to WPFNoea / PQC Web Key Frame Animations Simpler than lots of individual timelines Also offer spline animation

79 Introduction to WPFNoea / PQC Web Animations and Styles Can add animation by restyling control –No special support required by control Style.Triggers ControlTemplate.Triggers

80 Introduction to WPFNoea / PQC Web Example: Triggers <Rectangle Fill="{TemplateBinding Background}" RadiusX="10" RadiusY="10" Stroke="Black" x:Name="outline" /> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> <DoubleAnimation Duration="0:0:0.2" AutoReverse="True" Storyboard.TargetProperty="(Rectangle.StrokeThickness)" Storyboard.TargetName="outline" By="1" />

81 Introduction to WPFNoea / PQC Web Animation in Code Can launch animations from code –Alternative to markup+storyboards –Allow more runtime flexibility DoubleAnimation d = new DoubleAnimation(500, new Duration(TimeSpan.FromSeconds(2))); myRect.BeginAnimation(Rectangle.WidthProperty,d);

82 Introduction to WPFNoea / PQC Web CompositionTarget.Render Animation timelines not always ideal solution –Real-time physics modeling doesn’t fit this model well Low level alternative: Render event –Called for each frame –That is all Note: frame rate not constant

83 Introduction to WPFNoea / PQC Web Summary Any property can be animated Define animations as Timeline hierarchies Put animations on page or in styles Declarative control with triggers

84 Introduction to WPFNoea / PQC Web Links Sites – – (moving to windowsclient) –WPF Windows SDK DocumentationWPF Windows SDK Documentation –My Five Day Course For Hitting the WPF Curve/CliffMy Five Day Course For Hitting the WPF Curve/Cliff – – – (The tutorials are from here) – (Søg efter ‘Crash Course’

85 Introduction to WPFNoea / PQC Web Exercise Make tutorials of free choice from the tutorial folder or from the videos on The following are recommended: –Creating Rich 2D and 3D Content in WPF –ColorSwatch –Using Data Binding in WPF –LiveSearch (using a webservice and data binding) –The video tutorials! You might also visit the video casts from the Mix Conferences: Challenge: –Make a rotating cube with a playing video on each side. –Might need some computing power to run :-(