winfx – a lap around the windows presentation foundation bart j.f. de smet mvp visual c#...
TRANSCRIPT
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
AgendaAgenda
WPF – What’s in a name?Introducing XAMLTaming the toolsGetting started
ControlsLayoutDatabindingGraphicsText and Documents
Conclusion + Q&A
WPF – What’s in a name?WPF – What’s in a name?RoadblocksRoadblocks
WPF – What’s in a name?WPF – What’s in a name?Technology IslandsTechnology Islands
WPF – What’s in a name?WPF – What’s in a name?No Design ProtocolNo Design Protocol
WPF – What’s in a name?WPF – What’s in a name?Your “Dear” Powerful GPUYour “Dear” Powerful GPU
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
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
AgendaAgenda
WPF – What’s in a name?Introducing XAMLTaming the toolsGetting started
ControlsLayoutDatabindingGraphicsText and Documents
Conclusion
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
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>
AgendaAgenda
WPF – What’s in a name?Introducing XAMLTaming the toolsGetting started
ControlsLayoutDatabindingGraphicsText and Documents
Conclusion + Q&A
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
XamlPad Visual Studio 2005
AgendaAgenda
WPF – What’s in a name?Introducing XAMLTaming the toolsGetting started
ControlsLayoutDatabindingGraphicsText and Documents
Conclusion + Q&A
Getting StartedGetting StartedThe picture that tells it allThe picture that tells it all
Applications
ActionsContentDataLayout
Controls
Styling and Templates
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).
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
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
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
Controls Layout Styles
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}
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} }" />
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>
Binding controls Binding objects Binding XML
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;
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>
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}” />
Binding with templates
GraphicsGraphicsA Macroscopic ViewA Macroscopic View
WPF is a graphical foundation2D and 3D graphicsMultimedia supportA bunch of shapesTransformsGradientsBrushes...
Based on vector graphicsSuperb qualitySuperb performance
Transformations Playing with graphics
Text and DocumentsText and DocumentsText Is EverywhereText Is Everywhere
Natural ReadingClearTypeSub-pixel positioningAnti-aliasing
Adobe Compact Font Format (CFF) supportControls
SinglePageViewerFlowDocumentAnnotation support
Putting it together
AgendaAgenda
WPF – What’s in a name?Introducing XAMLTaming the toolsGetting started
ControlsLayoutDatabindingGraphicsText and Documents
Conclusion + Q&A
Conclusion + Q&AConclusion + Q&A
Questions?
