Microsoft Confidential Operational Excellence Adrian Renshaw & Karsten Smet.
WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C#...
-
Upload
marlene-cole -
Category
Documents
-
view
224 -
download
5
Transcript of WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C#...
![Page 1: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/1.jpg)
WinFX – A Lap Around the WinFX – A Lap Around the Windows Presentation Windows Presentation
FoundationFoundation
Bart J.F. De SmetBart J.F. De SmetMVP Visual C#MVP Visual C#
[email protected]://blogs.bartdesmet.net/bart
![Page 2: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/2.jpg)
AgendaAgenda
WPF – What’s in a name?Introducing XAMLTaming the toolsGetting started
ControlsLayoutDatabindingGraphicsText and Documents
Conclusion + Q&A
![Page 3: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/3.jpg)
WPF – What’s in a name?WPF – What’s in a name?RoadblocksRoadblocks
![Page 4: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/4.jpg)
WPF – What’s in a name?WPF – What’s in a name?Technology IslandsTechnology Islands
![Page 5: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/5.jpg)
WPF – What’s in a name?WPF – What’s in a name?No Design ProtocolNo Design Protocol
![Page 6: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/6.jpg)
WPF – What’s in a name?WPF – What’s in a name?Your “Dear” Powerful GPUYour “Dear” Powerful GPU
![Page 7: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/7.jpg)
WPF – What’s in a name?WPF – What’s in a name?True Smart Client Not PossibleTrue Smart Client Not Possible
Everyone has part of the picture, but no one has it together
seamless deployrich user experience
navigation
connectivity & offline
![Page 8: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/8.jpg)
WPF – What’s in a name?WPF – What’s in a name?Windows Presentation Foundation VisionWindows 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 programmingBringing designers directly into application development
Ease of deploymentAllowing administrators to deploy and manage applications securely
![Page 9: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/9.jpg)
![Page 10: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/10.jpg)
AgendaAgenda
WPF – What’s in a name?Introducing XAMLTaming the toolsGetting started
ControlsLayoutDatabindingGraphicsText and Documents
Conclusion
![Page 11: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/11.jpg)
Introducing XAMLIntroducing XAMLThe Art of Declarative ProgrammingThe Art of Declarative Programming
History goes onVisual 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 mappingXAML is not WPF only
WPF in XAMLIntegrated UI, Media, Documents in markupEnables developer designer workflow
![Page 12: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/12.jpg)
Introducing XAMLIntroducing XAMLWhat’s the big deal?What’s the big deal?
form1.csform1.cs
public class Form1 public class Form1 : Form: Form{{ public Form1()public Form1() {{ Button b = new Button();Button b = new Button(); b.Text = "Hello World";b.Text = "Hello World"; }}}}
dialog1.rcdialog1.rc
BEGIN DIALOGBEGIN DIALOG BUTTON "HELLO WORLD"BUTTON "HELLO WORLD"END DIALOGEND DIALOG
page1.htmlpage1.html
<html><html> <button><button> Hello WorldHello World </button></button></html></html>
image1.svgimage1.svg
<rect><rect> <text>hello world</text><text>hello world</text></rect></rect>
window1.xamlwindow1.xaml
<Window <Window xmlns= xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentationhttp://schemas.microsoft.com/winfx/2006/xaml/presentation"" xmlns:x= xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml" http://schemas.microsoft.com/winfx/2006/xaml" x:Class="Window1" x:Class="Window1" >>
<Button><Button> <TextBlock><TextBlock> <Rectangle Width="50" Height="50" Fill="Red" /><Rectangle Width="50" Height="50" Fill="Red" /> Hello <Bold>World</Bold>Hello <Bold>World</Bold> </TextBlock></TextBlock> </Button></Button></Window></Window>
![Page 13: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/13.jpg)
AgendaAgenda
WPF – What’s in a name?Introducing XAMLTaming the toolsGetting started
ControlsLayoutDatabindingGraphicsText and Documents
Conclusion + Q&A
![Page 14: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/14.jpg)
Taming the toolsTaming the toolsDeveloper and Designer ProductivityDeveloper and Designer Productivity
NotepadOnce in a WPF developer’s lifetime xp
XamlPadThe 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
![Page 15: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/15.jpg)
XamlPad Visual Studio 2005
![Page 16: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/16.jpg)
AgendaAgenda
WPF – What’s in a name?Introducing XAMLTaming the toolsGetting started
ControlsLayoutDatabindingGraphicsText and Documents
Conclusion + Q&A
![Page 17: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/17.jpg)
Getting StartedGetting StartedThe picture that tells it allThe picture that tells it all
Applications
ActionsContentDataLayout
Controls
Styling and Templates
![Page 18: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/18.jpg)
ControlsControlsTalking about challengesTalking about challenges
Controls are not flexibleLow flexibility to adapt controls to the developer’s
and end-user’s visual needs.
The “gray box” problemYour only customization points are the ones
in the property browser.
No “pay for play”Advanced customization requires significantly more work
(a.k.a. the “OwnerDraw” nightmare).
![Page 19: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/19.jpg)
ControlsControlsWPF’s “realizing your potential”WPF’s “realizing your potential”
NewNew controls built controls built forfor the platform, the platform, usingusing the platformthe platformGlobalization, localization, accessibility, eventing, etcGlobalization, localization, accessibility, eventing, etc
Controls that can Controls that can containcontain anythinganything.Content explained.Content explained
Controls that have Controls that have the lookthe look you want you wantLayout, graphics, visuals theming, etc
![Page 20: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/20.jpg)
ControlsControls.Content == new(.Text).Content == new(.Text)
Replacing .Text but richerWPF C#Button.Content = “Hello World”;
WPF XAML<Button>Hello World</Button><Button><Image Source=“...”/></Button>
An improved approach for datamyButton.Content = new Customer(...);
You get back what you put inDeveloper deals with data, designer deals with the visualization
![Page 21: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/21.jpg)
LayoutLayoutWPF’s Layout ToolboxWPF’s Layout Toolbox
CanvasThe old (bad) absolute positioning
StackPanelThe simplest automatic layout
DockPanelDock controls on top, left, right, bottom and fill
GridPartitions the UI in rows and columns
TextFlowPresent text in a (typographically) user-friendly way
![Page 22: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/22.jpg)
Controls Layout Styles
![Page 23: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/23.jpg)
DatabindingDatabindingBinding in MarkupBinding 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}
![Page 24: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/24.jpg)
DatabindingDatabindingObject Data SourcesObject Data Sources
Connect UI to data objectsE.g. business entities
Add to resource dictionaryNamed source objects<Window.Resources> element
Use with resource bindingSource “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} }" />
![Page 25: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/25.jpg)
DatabindingDatabindingBinding to XMLBinding to XML
XML is everywhereBuilt-in support for XPath
<TextBlock TextContent="{Binding XPath=@Make, Source={StaticResource cars} }" />
<Cars> <Car Make="Ford" Model="F-150"> <Image>truck.png</Image> </Car> …</Cars>
cars.xml
<Window> <Window.Resources> <XmlDataProvider
x:Key="cars" XPath="/Cars/Car" Source="cars.xml" />
</Window.Resources>…
</Window>
![Page 26: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/26.jpg)
Binding controls Binding objects Binding XML
![Page 27: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/27.jpg)
DatabindingDatabindingControls Think DataControls Think Data
ContentControl – singular contentButton, CheckBox, Label, ListBoxItem, …
ItemsControl – plural contentListBox, ComboBox, Menu, TabControl, ToolBar, …
Can use data objects as content
myListBox.Items.Add(new Car(…));
myButton.Content = new Car(…);
Car c = (Car) myListBox.SelectedItem;
![Page 28: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/28.jpg)
DatabindingDatabindingDefining Data TemplatesDefining Data Templates
DataTemplate
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>
![Page 29: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/29.jpg)
DatabindingDatabindingUsing Data TemplatesUsing 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}” />
![Page 30: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/30.jpg)
Binding with templates
![Page 31: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/31.jpg)
GraphicsGraphicsA Macroscopic ViewA Macroscopic View
WPF is a graphical foundation2D and 3D graphicsMultimedia supportA bunch of shapesTransformsGradientsBrushes...
Based on vector graphicsSuperb qualitySuperb performance
![Page 32: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/32.jpg)
Transformations Playing with graphics
![Page 33: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/33.jpg)
Text and DocumentsText and DocumentsText Is EverywhereText Is Everywhere
Natural ReadingClearTypeSub-pixel positioningAnti-aliasing
Adobe Compact Font Format (CFF) supportControls
SinglePageViewerFlowDocumentAnnotation support
![Page 34: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/34.jpg)
Putting it together
![Page 35: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/35.jpg)
AgendaAgenda
WPF – What’s in a name?Introducing XAMLTaming the toolsGetting started
ControlsLayoutDatabindingGraphicsText and Documents
Conclusion + Q&A
![Page 36: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/36.jpg)
Conclusion + Q&AConclusion + Q&A
Questions?
![Page 37: WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C# info@bartdesmet.net .](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649dde5503460f94ad655f/html5/thumbnails/37.jpg)