wpf introduction
TRANSCRIPT
Windows PresentationFoundation
Max KnorDeveloper EvangelistMicrosoft Austria
http://www.knor.net
Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding
Demo
WPF Puzzle
Why WPF? Another UI Framework?
New Display EngineBased on Direct3D no window handles
Leverages Modern Hardware (GPUs)Resolution IndependenceVectorgraphics Scalable
Multimedia IntegrationControls + Documents + Video/Audio
New .NET based Development ConceptNew class librariesSeperated UI vs. Logic
XAML – XML based UI Specification language
Designer Developer
Developer Designer Collaboration
Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding
XAML
Extensible Application Markup Language
Generic XML Object Instantiation
Not How – but What!Creates Object Hierarchies
Used inWindows Presentation Foundation
Windows Workflow Foundation
XAML vs. C#
<Button Background="Red">Click Me!
</Button>
Button button1 = new Button();button1.Content = "Click Me!";button1.Background = new SolidColorBrush(
Colors.Red);
XAML vs. C#
XML Namespaces <--> .NET Namespaces
XML Elements <--> .NET Objects
XML Attributes <--> .NET Object Properties
Demo
XAML
Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding
WPF Positioning
Absolute PositioningX / Y, Width / Height
Relative PositioningNO X/Y, Width/Height
Margin
Alignment
<Button Margin="20,10,20,10">Hallo Welt</Button>
WPF 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>
Layout Controls
StackPanelUnderneath, side-by-side
WrapPanelSame but with automatic wrapping
CanvasX-,Y- Positions
DockPanel
Grid
...
Demo
Using Layout Controls
Topics
Overview
XAML
Dependency Objects & Routed Events
Layout Panels
Controls
Styles, Templates & Resources
Commands
Data Binding
Class Hierarchy
Simple Controls
• PasswordBox
• ScrollBar
• ProgressBar
• Slider
• TextBox
• RichTextBox
Content Controls
Button
RepeatButton
ToggleButton
CheckBox
RadioButton
Label
Frame
ListBoxItem
StatusBarItem
ScrollBarViewer
ToolTip
UserControl
Window
NavigationWindow
Demo
Content Controls
Headered Content Controls
Content Control plus header
Expander
MenuItem
GroupBox
TabItem
…
Items Controls
Container for multiple items (lists)
ListBox
ComboBox
Menu
ContextMenu
StatusBar
TreeView
TabControl
...
Demo
Listbox, Toolbar, Menu
Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding
Dependency Properties
Values stored in a central dictionaryInstead of being stored in a private member
Can include additional metadata (like default value)
Manipulated by the WPF runtimeDatabinding
Animation, Styles, etc…
Dependency Properties
public class MyDependencyObject : DependencyObject{
public static readonly DependencyPropertySomeStateProperty = DependencyProperty.Register("SomeState",
typeof(String), typeof(MyDependencyObject));
public string SomeState{
get { return (string)this.GetValue(SomeStateProperty); }set { this.SetValue(SomeStateProperty, value); }
}}
Attached Properties
Store Properties of one control on another one
<Grid><Button Grid.Column=“0" Grid.Row="40">
Click Me!</Button>
</Grid>
Demo
Dependency Properties
Attached Properties
Routed Events
Application
Window
Grid
Button
Canvas
Ellipse
Preview
Preview
Preview
Preview
Preview
Preview
Tunnelin
gBubblin
g
Routed Events (Attached Events)
“Collect” events at a higher hierarchy level
<Canvas Button.Click=“Button_Click”><Button>
Click Me!</Button>
</Canvas>
Events
Create Routed Events
Use RoutedEventArgs.Source instead of sender
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); }
}
Demo
Routed Events
Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding
Designer Developer
Styles are about setting properties…
Demo
Basic Styles
Resources
Resource Hierarchy
System Resources
Application
Resources
Element
Resources
Element
Resources
Element
Resources
Window/Page
Resources
Window/Page
Resources
Element
Resources
Application
Resources
<Window><Window.Resources>...
</Window.Resources>
<Grid><Grid.Resources>...
</Grid.Resources>
<ListBox><ListBox.Resources>...</ListBox.Resources>
</ListBox></Grid>
</Window>
Automatic Styles/Templates
Most resources must use x:Key
Optional with Styles and Data TemplatesCan use TargetType or DataType instead
Applied to target automatically – no reference required
<Window.Resources><Style TargetType="{x:Type TextBlock}"><Setter Property="Margin" Value="5" />
</Style></Window.Resources>
Lookless Controls and Templates
Control implies behaviour
Probably supplies default lookDesigner free to supply new look
Demo
Control Templates
Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding
Data Binding
Concept
Binding SourceOn<PropertyName>Changed
INotificationPropertyChanged
DependencyProperty
Binding 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}
Demo
UI Element Binding
Object Binding
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}
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 DataContextmyWindow.DataContext = myDataObject;
Data Binding – Conversion & Validation
ValidationValidationRule
ConverterIValueConverter,
IMultiValueConverter
Demo
Databinding to CLR Objects
Data and Controls
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;
class Car{string Image {get;set}string Model {get;set}
}
Data Templates
DataTemplate
<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" Text="{Binding Path=Model}" />
</Border></StackPanel>
</Border></DataTemplate>
Demo
Databinding a list
Datatemplates
Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding
Have a look at
XAML Powertoys(http://karlshifflett.wordpress.com/xaml-power-toys/)
WPF Toolkit – Datagrid, DatePicker, Ribbon(www.codeplex.com/wpf/)
WPF Themes(www.codeplex.com/wpfthemes/)
Silverlight Toolkit(www.codeplex.com/silverlight/)
Contact
Max Knor
Developer Evangelist
Microsoft Austria
http://www.knor.net
WPF Commands
WPF Commands
GOF Command Pattern
Decoupling control and command
ICommand interface
Execute(), CanExecute()
Implemented by RoutedUICommand
Source implements ICommandSource
Commands Architecture
Defining Commands
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>
Command Libraries
Predefined Command LibrariesApplicationCommands
ComponentCommands
EditingCommands
MediaCommands
NavigationCommand
Demo
CommandBindings
Custom Commands
Instantiate an RoutedUICommand
Assign InputGestures
Pack into CommandLibrary
Demo
Custom Command
Interop and Migration
Interoperability!
Can use WPF with existing codeWPF inside existing code
Existing code inside WPF
Interop at the component level
Maximum richness => all WPF
WPF
File Edit View Help
Win32
DirectX
WPF
File Edit View Help
Win32
DirectX
Airspace
One pixel, one technology
File Edit View Help
Win32
DirectX
WPF
Airspace
File Edit View Help
Win32
WPF
DirectX
Chrome and Canvas
Canvas
Chrome
Mixed Application Ideas
A new look for your chrome
Visual effects for your canvas
WPF for faster rendering?
Wizards and help systems
Generate HTML => Generate XAML
Windows Forms
private void WindowLoaded(object sender, EventArgs e){
WindowsFormsHost host = new WindowsFormsHost();host.Height = new Length(120);host.Width = new Length(150);swf.Control child = new UserControl1();child.Dock = swf.DockStyle.None;host.AddChild(child);border.Child = host;
}
Demo
WPF <--> Windows Forms Interop
Summary
Can use WPF with existing code
Maximum richness => all WPF
Interop is for components