windows presentation foundation maximilian knor developer evangelist developer and plattform group...
TRANSCRIPT
Windows Presentation FoundationWindows Presentation Foundation
Maximilian KnorDeveloper EvangelistDeveloper and Plattform GroupMicrosoft Österreich
[email protected] http://blogs.msdn.com/knom/
MSDN Briefings – OrganisationMSDN Briefings – Organisation
Monthly technical briefingsCurrently released technologyYour current needs
Invitation / Registration / Feedbackhttp://blogs.msdn.com/msdnat http://blogs.msdn.com/talk
Well, what I am doing here?
TopicsTopics
Windows Presentation Foundation
Overview2D
Controls and Layout
Styles, Templates & ResourcesData BindingAnimationInterop and Migration
Why WPF? Another UI Framework?Why WPF? Another UI Framework?
Aren‘t these some classicsApp flickers on re-sizeOverlay controls and videosThemeing und styling
What‘s the cause?Win32 has limitsGraphics rendered by CPU
The WPF ApproachThe WPF Approach
Unify UI, Documents, MediaIntegrated development
New Windows infrastructure Vector based graphicsUse display hardware (D3D)Built-in UI patterns
Designers and toolsBringing designers into the processDeclarative programming models
.NET 3.0.NET 3.0
Operating System
.NET Framework 2.0
.NET Framework 3.0
WindowsPresentationFoundation
WindowsCommunication
Foundation
WindowsWorkflow
Foundation
WindowsCard Space
WPFUser
Experience
WCFUnified
Messaging
WFFederated Workflow
CSFederated
Identity
WPF Programming ModelWPF Programming Model
Button b1 = new Button();b1.Content = "OK";b1.Background = new SolidColorBrush(Colors.LightBlue);b1.Width = new Length(100);
<Button Width="100px"> OK <Button.Background> HorizontalGradient= "White LtBlue" </Button.Background></Button>
Dim b1 As New Buttonb1.Content = "OK"b1.Background = New SolidColorBrush(Colors.LightBlue)b1.Width = New Length(100)
Separate UI and behaviorDo you know ASP.NET Similar but more powerful
XAMLWhat, Not How!Creates object hierarchy
Designer Developer
Developer Designer CollaborationDeveloper Designer Collaboration
XAMLXAML
Extensible Applications Markup Language
<Button Name="button1" Background="Red">
Click Me!</Button>
Button button1 = new Button();button1.Content = "Click Me!";button1.Background = new SolidColorBrush(
Colors.Red);
Properties as Attributes or ElementsProperties as Attributes or Elements
<Button Content="Click Me!" Background="LightGreen" />
<Button> <Button.Background> LightGreen </Button.Background> Click Me!</Button>
Attached PropertiesAttached Properties
<Canvas> <Button Canvas.Top="30" Canvas.Left="40"> Click Me! </Button></Canvas>
Markup ExtensionsMarkup Extensions
<Button Name="button1"> <Button.Style> <StaticResource ResourceKey="key" /> </Button.Style> Click Me!</Button>
<Button Name="button1" Style="{StaticResource key}" Content="Click Me" />
TopicsTopics
Windows Presentation Foundation
Overview2D
Controls and Layout
Styles, Templates & ResourcesData BindingAnimationInterop and Migration
ShapesShapes
Elements of UI treeJust like controls and other elements
Rectangle
Ellipse
Polyline
Polygon
Path
DemoDemo
2D Shapes
Shapes and CodeShapes and Code
Shapes accessible from code behindJust like any element
Change appearance by setting propertiesScreen is automatically updated
<Ellipse Fill="Yellow" Name="myEllipse" StrokeThickness="7" Stroke="Black" Width="100" Height="100" />
// ...in code behind
myEllipse.Width = 200;
BrushesBrushes
Specifies how shape is filledUsed for properties throughout WPF
<Rectangle Fill="Red" Width="200" Height="100" />
Linear/RadialGradientBrushLinear/RadialGradientBrush
Fills across a range of colorsEnables interesting visual effects
ImageBrushImageBrush
<TextBlock FontSize="72" FontFamily="Arial Black"> <TextBlock.Foreground>
<ImageBrush ImageSource="c:\Windows\Blue Lace 16.bmp" />
</TextBlock.Foreground> Hello, World!</TextBlock>
Composability: DrawingBrushComposability: DrawingBrush
Fill with vector imageScalable
Composability: VisualBrushComposability: VisualBrush
Fill with any UI elementMakes certain design tricks easy
Reflection of UIUse as 3D surface texture
OpacityMaskOpacityMask
Apply opacity to any visual using any Brush
TransformationsTransformations
Any element can be transformedScaling, rotation, moving
Optionally affects layoutLayoutTransformRenderTransform
Included into hit testing
DemoDemo
Transformations
TopicsTopics
Windows Presentation Foundation
Overview2D
Controls and Layout
Styles, Templates & ResourcesData BindingAnimationInterop and Migration
Class HierarchyClass Hierarchy
Dependency PropertyDependency Property
public class MyDependencyObject : DependencyObject{ public static readonly DependencyProperty SomeStateProperty = DependencyProperty.Register("SomeState", typeof(String), typeof(MyDependencyObject)); public string SomeState { get { return (string)this.GetValue(SomeStateProperty); } set { this.SetValue(SomeStateProperty, value); } }}
Layout ControlsLayout Controls
StackPanelWrapPanelCanvasDockPanelGrid...
WPF PositioningWPF Positioning
Absolute PositioningX / Y, Width / Height
Relative PositioningNO X/Y, Width/HeightMarginAlignment
<Button Margin="20,10,20,10">Hallo Welt</Button>
WPF Positioning - AlignmentWPF Positioning - Alignment
HorizontalAlignmentStretch, Left, Right, Center
VerticalAlignmentStretch, Top, Center, Bottom
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> Hallo Welt</Button>
<Button HorizontalAlignment="Left"
VerticalAlignment="Bottom">
Hallo Welt</Button>
Simple ControlsSimple Controls
PasswordBoxScrollBarProgressBarSliderTextBoxRichTextBox...
Content ControlsContent Controls
ButtonRepeatButtonToggleButtonCheckBoxRadioButtonLabelFrameListBoxItemStatusBarItemScollBarViewer
ToolTipUserControlWindowNavigationWindow...
DemoDemo
Controls
EventsEvents
Routed Event Handling
Routing StrategyTunneling, Bubbling, Direct
EventsEvents
Create Routed Events
public static readonly RoutedEvent TapEvent = EventManager.RegisterRoutedEvent("Tap", RoutingStrategy.Bubble,
typeof(RoutedEventHandler), typeof(MyButtonSimple));
public event RoutedEventHandler Tap { add { AddHandler(TapEvent, value); }remove { RemoveHandler(TapEvent, value); }
}
EventsEvents
Event notationPreviewXxx – TunnelledXxx - Bubbled
Base Class RoutedEventArgs
Attached Events
DemoDemo
Routed Event Handling
Headered Content ControlsHeadered Content Controls
• Content Control with additional header
• Expander
• MenuItem
• GroupBox
• TabItem
• Usw.
Items ControlsItems Controls
• Container for multiple items (list)
• ListBox• ComboBox
• Menu• ContextMenu• StatusBar
• TreeView• TabControl
• Usw.
CommandsCommands
Controls define a command
CommandBindings define the handler
<Button Command="ApplicationCommands.New"> <Image Source="toolbargraphics/New.bmp" /> </Button>
<Window.CommandBindings> <CommandBinding Command="ApplicationCommands.New" Executed="FileNew" CanExecute="CanFileNew" /></Window.CommandBindings>
DemoDemo
TabControl, Listbox, Toolbar, Commands
TopicsTopics
Windows Presentation Foundation
Overview2D
Controls and Layout
Styles, Templates & ResourcesData BindingAnimationInterop and Migration
Designer
Developer
Ske
leto
nPrototype
&
Experiment
Feedback from Customers
Fin
al
Pro
du
ct
Design
Development Process
Styling & Templates
Styles are about setting properties…Styles are about setting properties…
Setting Properties
Trigger
Animations
Template
Styles
Lookless Controls and TemplatesLookless Controls and Templates
Control implies behaviour
Probably supplies default lookDesigner free to supply new look
Styling and ResourcesStyling and Resources
Style rarely defined inlineTend to be reused for consistency
Usually defined as resources
Resource DictionariesResource Dictionaries
Simple Key, Value collectionFrameworkElement.Resources
<Grid> <Grid.Resources> <Style x:Key="dapper"> <Setter Property="Background" Value="LimeGreen" /> </Style> </Grid.Resources>
...
<Button Style="{StaticResource dapper}">Click</Button>
Resource HierarchyResource Hierarchy
System Resources
Application Resources
ElementResources
ElementResources
ElementResources
Window/PageResources
Window/PageResources
ElementResources
Application Resources
<Window> <Window.Resources> ... </Window.Resources>
<Grid> <Grid.Resources> ... </Grid.Resources>
<ListBox> <ListBox.Resources> ... </ListBox.Resources> </ListBox> </Grid></Window>
Application ResourcesApplication Resources
Styles and templatesShared graphics
<Application x:Class="ResourcePlay.MyApp" xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
<Application.Resources> <Style x:Key="dapper"> <Setter Property="Background" Value="LimeGreen" /> </Style> </Application.Resources></Application>
Page/Window ResourcesPage/Window Resources
Utility elementsData sourcesConverters
Page-specific templates
Element-Specific ResourcesElement-Specific Resources
Locally-scoped Styles and templates
<Window ...> ... <Grid> <Grid.Resources> <Style TargetType="{x:Type TextBlock}"> <Setter Property="Margin" Value="5" /> </Style> </Grid.Resources>
... </Grid> ...</Window>
Automatic Styles/TemplatesAutomatic Styles/Templates
Most resources must use x:KeyOptional with Styles and Data Templates
Can use TargetType or DataType insteadApplied to target automatically – no reference required
<Window.Resources> <Style TargetType="{x:Type TextBlock}"> <Setter Property="Margin" Value="5" /> </Style></Window.Resources>
DemoDemo
Styles
System ResourcesSystem Resources
SystemColors – Colors and BrushesSystemFontsSystemParameters (sizes, settings)
<Rectangle Height="50" Width="100" Fill="{x:Static SystemColors.ControlBrush}" />
<!-- Better – responds to config changes --><Rectangle Height="50" Width="100" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
Resources and Code-BehindResources and Code-Behind
FindResource
SetResourceReference
Change resource value with indexersomeElem.Resources["foo"] = bar;
Initializing from code-behind not so goodMust set before referencing XAML loadedOK for app resources, less good otherwise