1 / 37

WinFX – A Lap Around the Windows Presentation Foundation

WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net http://blogs.bartdesmet.net/bart Agenda WPF – What’s in a name? Introducing XAML Taming the tools Getting started Controls Layout Databinding Graphics Text and Documents

paul
Download Presentation

WinFX – A Lap Around the Windows Presentation Foundation

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. WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net http://blogs.bartdesmet.net/bart

  2. Agenda • WPF – What’s in a name? • Introducing XAML • Taming the tools • Getting started • Controls • Layout • Databinding • Graphics • Text and Documents • Conclusion + Q&A

  3. WPF – What’s in a name?Roadblocks

  4. WPF – What’s in a name?Technology Islands

  5. WPF – What’s in a name?No Design Protocol

  6. WPF – What’s in a name?Your “Dear” Powerful GPU

  7. Everyone has part of the picture, but no one has it together seamless deploy rich user experience navigation connectivity & offline WPF – What’s in a name?True Smart Client Not Possible

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

  9. Agenda • WPF – What’s in a name? • Introducing XAML • Taming the tools • Getting started • Controls • Layout • Databinding • Graphics • Text and Documents • Conclusion

  10. Introducing XAMLThe Art of Declarative Programming • History goes on • Visual Basic Forms Designer (remember .frm & .frx?) • The “Windows Form Designer generated code” • Partial classes • .NET declarative programming model • “eXtensible Application Markup Language” • Namespace, Classes, Properties and Events mapping • XAML is not WPF only • WPF in XAML • Integrated UI, Media, Documents in markup • Enables developer designer workflow

  11. form1.cs page1.html image1.svg window1.xaml public class Form1 : Form { public Form1() { Button b = new Button(); b.Text = "Hello World"; } } <html> <button> Hello World </button> </html> <rect> <text>hello world</text> </rect> <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="Window1" > <Button> <TextBlock> <Rectangle Width="50" Height="50" Fill="Red" /> Hello <Bold>World</Bold> </TextBlock> </Button> </Window> dialog1.rc BEGIN DIALOG BUTTON "HELLO WORLD" END DIALOG Introducing XAMLWhat’s the big deal?

  12. Agenda • WPF – What’s in a name? • Introducing XAML • Taming the tools • Getting started • Controls • Layout • Databinding • Graphics • Text and Documents • Conclusion + Q&A

  13. Taming the toolsDeveloper and Designer Productivity • Notepad • Once in a WPF developer’s lifetime xp  • XamlPad • The fastest WYSIWYG tool for WPF • Visual Studio 2005 “Cider” • Your number one development tool • Expression Interactive Designer “Sparkle” • Closing the gap with the graphical designer

  14. XamlPad • Visual Studio 2005

  15. Agenda • WPF – What’s in a name? • Introducing XAML • Taming the tools • Getting started • Controls • Layout • Databinding • Graphics • Text and Documents • Conclusion + Q&A

  16. Getting StartedThe picture that tells it all Applications Controls Styling and Templates Layout Data Content Actions

  17. ControlsTalking about challenges Controls are not flexible Low flexibility to adapt controls to the developer’sand end-user’s visual needs. The “gray box” problem Your only customization points are the onesin the property browser. No “pay for play” Advanced customization requires significantly more work (a.k.a. the “OwnerDraw” nightmare).

  18. ControlsWPF’s “realizing your potential” Newcontrols built forthe platform, usingthe platform Globalization, localization, accessibility, eventing, etc Controls that can containanything .Content explained Controls that have the look you want Layout, graphics, visuals theming, etc

  19. Controls.Content == new(.Text) • Replacing .Text but richer • WPF C#Button.Content = “Hello World”; • WPF XAML<Button>Hello World</Button><Button><Image Source=“...”/></Button> • An improved approach for data • myButton.Content = new Customer(...); • You get back what you put in • Developer deals with data, designer deals with the visualization

  20. LayoutWPF’s Layout Toolbox • Canvas • The old (bad) absolute positioning • StackPanel • The simplest automatic layout • DockPanel • Dock controls on top, left, right, bottom and fill • Grid • Partitions the UI in rows and columns • TextFlow • Present text in a (typographically) user-friendly way

  21. Controls • Layout • Styles

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

  23. DatabindingObject Data Sources • Connect UI to data objects • E.g. business entities • Add to resource dictionary • Named source objects • <Window.Resources> element • Use with resource binding • Source “property” • {StaticResource myData} <Window> <Window.Resources> <ObjectDataProvider x:Key="myData" TypeName="Foo" /> </Window.Resources> … </Window> <TextBlock TextContent=" " /> <TextBlock TextContent="{Binding Path= , Source= }" /> <TextBlock TextContent="{Binding Path= , Source={StaticResource myData} }" /> <TextBlock TextContent="{Binding Path=Bar, Source={StaticResource myData} }" />

  24. cars.xml <Cars> <Car Make="Ford" Model="F-150"> <Image>truck.png</Image> </Car> … </Cars> DatabindingBinding to XML • XML is everywhere • Built-in support for XPath <Window> <Window.Resources> <XmlDataProvider x:Key="cars" XPath="/Cars/Car" Source="cars.xml" /> </Window.Resources>… </Window> <TextBlock TextContent="{Binding XPath=@Make, Source={StaticResource cars} }" />

  25. Binding controls • Binding objects • Binding XML

  26. DatabindingControls Think Data • 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;

  27. DataTemplate DatabindingDefining Data Templates class Car { string Image {get;set;} string Model {get;set;} } <DataTemplate x:Key="carTemplate"> <Border BorderBrush="Blue" BorderThickness="2" Background="LightGray" Margin="10" Padding="15,15,15,5"> <StackPanel> <Image HorizontalAlignment="Center" Source="{Binding Path=Image}" /> <Border HorizontalAlignment="Center" BorderBrush="Navy" Background="#DDF“ BorderThickness="1" Margin="10" Padding="3"> <TextBlock FontSize="18" TextContent="{Binding Path=Model}" /> </Border> </StackPanel> </Border> </DataTemplate>

  28. DatabindingUsing Data Templates • Bind to a type<Application … xmlns:src=“clr-namespace:MyNamespace”><Application.Resources> <DataTemplate DataType=“{x:Type src:Car}”> … </DataTemplate></Application.Resources> • Bind explicitly<Application.Resources> <DataTemplate x:Key=“cars”> … </DataTemplate></Application.Resources><ContentControl …ContentTemplate=“{StaticResource cars}” />

  29. Binding with templates

  30. GraphicsA Macroscopic View • WPF is a graphical foundation • 2D and 3D graphics • Multimedia support • A bunch of shapes • Transforms • Gradients • Brushes • ... • Based on vector graphics • Superb quality • Superb performance

  31. Transformations • Playing with graphics

  32. Text and DocumentsText Is Everywhere • Natural Reading • ClearType • Sub-pixel positioning • Anti-aliasing • Adobe Compact Font Format (CFF) support • Controls • SinglePageViewer • FlowDocument • Annotation support

  33. Putting it together

  34. Agenda • WPF – What’s in a name? • Introducing XAML • Taming the tools • Getting started • Controls • Layout • Databinding • Graphics • Text and Documents • Conclusion + Q&A

  35. Conclusion + Q&A • Questions?

More Related