wpf introduction
TRANSCRIPT
![Page 1: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/1.jpg)
Windows PresentationFoundation
Max KnorDeveloper EvangelistMicrosoft Austria
http://www.knor.net
![Page 2: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/2.jpg)
Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding
![Page 3: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/3.jpg)
Demo
WPF Puzzle
![Page 4: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/4.jpg)
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
![Page 5: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/5.jpg)
Designer Developer
Developer Designer Collaboration
![Page 6: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/6.jpg)
Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding
![Page 7: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/7.jpg)
XAML
Extensible Application Markup Language
Generic XML Object Instantiation
Not How – but What!Creates Object Hierarchies
Used inWindows Presentation Foundation
Windows Workflow Foundation
![Page 8: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/8.jpg)
XAML vs. C#
<Button Background="Red">Click Me!
</Button>
Button button1 = new Button();button1.Content = "Click Me!";button1.Background = new SolidColorBrush(
Colors.Red);
![Page 9: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/9.jpg)
XAML vs. C#
XML Namespaces <--> .NET Namespaces
XML Elements <--> .NET Objects
XML Attributes <--> .NET Object Properties
![Page 10: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/10.jpg)
Demo
XAML
![Page 11: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/11.jpg)
Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding
![Page 12: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/12.jpg)
WPF Positioning
Absolute PositioningX / Y, Width / Height
Relative PositioningNO X/Y, Width/Height
Margin
Alignment
<Button Margin="20,10,20,10">Hallo Welt</Button>
![Page 13: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/13.jpg)
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>
![Page 14: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/14.jpg)
Layout Controls
StackPanelUnderneath, side-by-side
WrapPanelSame but with automatic wrapping
CanvasX-,Y- Positions
DockPanel
Grid
...
![Page 15: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/15.jpg)
Demo
Using Layout Controls
![Page 16: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/16.jpg)
Topics
Overview
XAML
Dependency Objects & Routed Events
Layout Panels
Controls
Styles, Templates & Resources
Commands
Data Binding
![Page 17: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/17.jpg)
Class Hierarchy
![Page 18: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/18.jpg)
Simple Controls
• PasswordBox
• ScrollBar
• ProgressBar
• Slider
• TextBox
• RichTextBox
![Page 19: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/19.jpg)
Content Controls
Button
RepeatButton
ToggleButton
CheckBox
RadioButton
Label
Frame
ListBoxItem
StatusBarItem
ScrollBarViewer
ToolTip
UserControl
Window
NavigationWindow
![Page 20: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/20.jpg)
Demo
Content Controls
![Page 21: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/21.jpg)
Headered Content Controls
Content Control plus header
Expander
MenuItem
GroupBox
TabItem
…
![Page 22: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/22.jpg)
Items Controls
Container for multiple items (lists)
ListBox
ComboBox
Menu
ContextMenu
StatusBar
TreeView
TabControl
...
![Page 23: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/23.jpg)
Demo
Listbox, Toolbar, Menu
![Page 24: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/24.jpg)
Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding
![Page 25: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/25.jpg)
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…
![Page 26: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/26.jpg)
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); }
}}
![Page 27: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/27.jpg)
Attached Properties
Store Properties of one control on another one
<Grid><Button Grid.Column=“0" Grid.Row="40">
Click Me!</Button>
</Grid>
![Page 28: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/28.jpg)
Demo
Dependency Properties
Attached Properties
![Page 29: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/29.jpg)
Routed Events
Application
Window
Grid
Button
Canvas
Ellipse
Preview
Preview
Preview
Preview
Preview
Preview
Tunnelin
gBubblin
g
![Page 30: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/30.jpg)
Routed Events (Attached Events)
“Collect” events at a higher hierarchy level
<Canvas Button.Click=“Button_Click”><Button>
Click Me!</Button>
</Canvas>
![Page 31: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/31.jpg)
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); }
}
![Page 32: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/32.jpg)
Demo
Routed Events
![Page 33: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/33.jpg)
Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding
![Page 34: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/34.jpg)
Designer Developer
![Page 35: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/35.jpg)
Styles are about setting properties…
![Page 36: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/36.jpg)
Demo
Basic Styles
Resources
![Page 37: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/37.jpg)
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>
![Page 38: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/38.jpg)
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>
![Page 39: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/39.jpg)
Lookless Controls and Templates
Control implies behaviour
Probably supplies default lookDesigner free to supply new look
![Page 40: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/40.jpg)
Demo
Control Templates
![Page 41: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/41.jpg)
Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding
![Page 42: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/42.jpg)
Data Binding
Concept
Binding SourceOn<PropertyName>Changed
INotificationPropertyChanged
DependencyProperty
![Page 43: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/43.jpg)
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}
![Page 44: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/44.jpg)
Demo
UI Element Binding
Object Binding
![Page 45: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/45.jpg)
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}
![Page 46: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/46.jpg)
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;
![Page 47: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/47.jpg)
Data Binding – Conversion & Validation
ValidationValidationRule
ConverterIValueConverter,
IMultiValueConverter
![Page 48: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/48.jpg)
Demo
Databinding to CLR Objects
![Page 49: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/49.jpg)
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;
![Page 50: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/50.jpg)
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>
![Page 51: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/51.jpg)
Demo
Databinding a list
Datatemplates
![Page 52: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/52.jpg)
Topics
Overview
XAML
Layout Panels
Controls
Dependency Objects & Routed Events
Styles, Templates & Resources
Data Binding
![Page 53: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/53.jpg)
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/)
![Page 54: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/54.jpg)
Contact
Max Knor
Developer Evangelist
Microsoft Austria
http://www.knor.net
![Page 55: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/55.jpg)
![Page 56: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/56.jpg)
WPF Commands
![Page 57: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/57.jpg)
WPF Commands
GOF Command Pattern
Decoupling control and command
ICommand interface
Execute(), CanExecute()
Implemented by RoutedUICommand
Source implements ICommandSource
![Page 58: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/58.jpg)
Commands Architecture
![Page 59: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/59.jpg)
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>
![Page 60: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/60.jpg)
Command Libraries
Predefined Command LibrariesApplicationCommands
ComponentCommands
EditingCommands
MediaCommands
NavigationCommand
![Page 61: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/61.jpg)
Demo
CommandBindings
![Page 62: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/62.jpg)
Custom Commands
Instantiate an RoutedUICommand
Assign InputGestures
Pack into CommandLibrary
![Page 63: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/63.jpg)
Demo
Custom Command
![Page 64: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/64.jpg)
Interop and Migration
![Page 65: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/65.jpg)
Interoperability!
Can use WPF with existing codeWPF inside existing code
Existing code inside WPF
Interop at the component level
Maximum richness => all WPF
![Page 66: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/66.jpg)
WPF
File Edit View Help
Win32
DirectX
WPF
File Edit View Help
Win32
DirectX
Airspace
One pixel, one technology
![Page 67: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/67.jpg)
File Edit View Help
Win32
DirectX
WPF
Airspace
File Edit View Help
Win32
WPF
DirectX
![Page 68: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/68.jpg)
Chrome and Canvas
Canvas
Chrome
![Page 69: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/69.jpg)
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
![Page 70: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/70.jpg)
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;
}
![Page 71: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/71.jpg)
Demo
WPF <--> Windows Forms Interop
![Page 72: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/72.jpg)
Summary
Can use WPF with existing code
Maximum richness => all WPF
Interop is for components
![Page 73: Wpf Introduction](https://reader034.vdocument.in/reader034/viewer/2022052307/554e337eb4c90518468b4823/html5/thumbnails/73.jpg)