1. WPF Deep Dive Aniruddha Chakrabarti Sr. Solution Architect “If I have six hours to chop down a tree, I will use four hours to sharpen the axe” – Abraham Lincoln

2. Key benefits of WPF Broad integration Provides access to normal 2D graphics, controls, 3D, video, speech and rich document viewing with consistent programming model as well as tight integration Hardware acceleration Improved Visual Rendering Retained mode graphics Vector graphics Resolution independence (Device Independent Graphics) Declarative programming (aka XAML) Rich composition, layout and customization Easy deployment Incorporates best of Web and Windows Integrate developers and designers

3. WPF Architecture

4. WPF Architecture

5. WPF: Assemblies and Namespaces Primary Assemblies containing the WPF API PresentationFramework PresentationCore WindowsBase milcore (unmanaged) mil: Media Integration Layer Namespaces System.Windows Other child namespaces starting with System.Windows except System.Windows.Forms (Win Forms) System.Windows.Controls System.Windows.Data System.Windows.Documents System.Windows.Media (+ child namespaces) System.Windows.Shapes Managed Unmanaged/Native

6. WPF Base Class Hierarchy WindowsBase PresentationFramework PresentationCore

8. Provides basic constructs for dealing with concurrency and threading. WPF is based on a messaging system implemented by the dispatcher - works much like familiar Win32 message pump

9. System.Windows.DependencyObject:

10. Provides reach Property System (DP + attached property)

11. System.Windows.Media.Visual:

12. Provides for building a tree of visual objects. Visual is designed to be extremely lightweight and flexible, so most of the features have no public API exposure.

13. Visual is really the entry point to the WPF composition system. Visual is the point of connection between these two subsystems, the managed API and the unmanaged milcore.

14. System.Windows.UIElement:

15. defines core subsystems including Layout, Input, and Events

16. System.Windows.FrameworkElement:

17. Provides Advanced Layout on top of the features provided by UIElement

18. Provides DataBinding & Styles

19. System.Windows.Controls.Control:

21. Window class is used to create windows and dialog boxes

22. Browser Hosted Applications / XAML Browser Applications (XBAP)

23. Create Page, Page Function

26. .NET Framework 3.0 includes

27. A compiler and run-time parser for XAML,

28. Plug-in that enables to view standalone WPF-based XAML files (sometimes called loose XAML pages) inside IE.

29. Can be used independent of WPF (e.g. WF)

30. XAML Spec defines rules that map .NET namespaces, types, properties, and events into XML namespaces, elements, and attributes.

31. Declaring an XML element in XAML (known as an object element) is equivalent to instantiating the corresponding .NET object (always via a default constructor).

33. Loose XAML files <Button xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Height="50" Width="250" FontSize="16"> Hello from loose XAML page </Button>

35. Default Namespace: declared with xmlns attribute

36. Xmlns: http://schemas.microsoft.com/winfx/2006/xaml/presentation - maps to .NET namespace System.Windows.Controls.

37. Mapping defined in PresentationFramework.dll assembly [assembly:XmlnsDefinition (“http://schemas.microsoft.com/winfx/2006/xaml/presentation”, “System.Windows.Controls”)]

38. Root object element in a XAML file must specify at least one XML namespace: used to qualify itself & any child elements.

39. Additional XML namespaces (on the root or on children) can be declared , but each one must be given a distinct prefix to be used on any identifiers from that namespace.

42. Defined in namespace System.Windows.Markup

45. Managing the lifetime of the application

46. Tracking the visible windows

47. Dispensing resources

48. Managing the global state of the application

49. Provides Run() method to start an app

50. Most WPF apps create a subclass of Application

51. Run() method starts the dispatcher which sends the messages & events.

52. WPF requires the UI thread to be STA because many components that WPF uses (e.g. Clipboard) require STA

54. Using VS2008 WPF Template

56. Current (static) – refers to current App

57. MainWindow – points to application’s Main window

58. Windows – collection of windows of app

59. StartupUri – Uri of resource to be started if Run is called without parameter

60. ShutdownMode

61. Method

62. Run – starts the app

63. Shutdown – ends the app

64. Events

65. Startup & Exit

66. Activated & Deactivated

68. OS does not distinguish between windows with WPF content and normal Win32 content.

69. Similar to Form in Win Forms

70. Represented by System.Windows.Window class

71. Order of Window events1. Constructor is called. 2. Window.Initialized event is raised. 3. Window.Activated event is raised.13 4. Window.Loaded event is raised. 5. Window.ContentRendered event is raised. 6. User interacts with the window. 7. Window.Closing event is raised. 8. Window.Unloaded event is raised. 9. Window.Closed event is raised.

73. Built with three basic concepts –

74. Navigation Hosts: hosts the content like Browser

75. Navigable Content: Page

76. Journal: responsible for tracking the navigation actions<Label>This is page 1</Label> <TextBlock> <HyperlinkNavigateUri="Page2.xaml">Go to Page2 </Hyperlink> </TextBlock>

77. Controls

79. Provides Content property instead of familiar Win32 Text property. Content can be any object, not only string.

80. Content actually supports both string and UIElement

81. For other datatypes, it uses the string value returned by ToString().

82. Most WPF controls ship with several default appearances

83. Aero (default Windows Vista theme)

84. Luna (default Windows XP theme)

85. Royale (Media Center & Tablet PC theme)

86. Classic (Win 9x theme)

87. Provides different type of controls

88. Content Controls

89. Buttons

90. Simple Containers

91. Containers with a Header

92. Items Controls

93. Range Controls

96. ToolTip – provides rich tooltip like Office 2007

98. Expander – New control in WPF. Does not exist in Win32/ WinForms.

99. Contains a button that enables you to expand and collapse the inner content.

101. ListBox

102. ListView

104. Range Control ProgressBar Slider

105. Text and Ink Control TextBox RichTextBox Can Contain Rich formatted text & images PasswordBox InkCanvas

107. ContextMenu

108. ToolBar

109. StatusBar

110. WPF does not provide these control

111. Grid

114. Input

115. Height & Width property (from FrameworkElement)

116. Avoid Explicit Sizing

117. use MinHeight, MinWidth, MaxHeight & MaxWidth

118. Output

119. ActualHeight, ActualWidth (read only)

120. DesiredSize, RenderSize (UIElement)

121. Default unit of measurement in WPF is Device Independent Pixel / Logical Pixel

122. NOT in Pixel (as in WinForms) as it’s resolution dependant.

124. No as it can parse NaN & Infinity but NOT in, cm, pt strings

126. Converter Example System.ComponentModel namespace provides a base class called TypeConverter. All Converter classes ultimately derives from TypeConverter. .NET Framework TypeConverter Supported in: 3.5, 3.0 SP1, 3.0, 2.0 SP1, 2.0, 1.1, 1.0

128. Padding - Controls how much extra space gets placed around the inside edges of the element

129. Visibility – NOT boolean, rather a three-state System.Windows.Visibility enumeration

130. Visible: The element gets rendered and participates in layout.

131. Collapsed: The element is invisible and does not participate in layout.

132. Hidden: The element is invisible yet still participates in layout.<StackPanel Background="LightBlue" Margin="40,30,20,10"> <Button Margin="50" Padding="20">Hello World</Button> </StackPanel>

133. Position Alignment HorizontalAlignment : Left, Center, Right, Stretch (default) VerticalAlignment: Top, Center, Bottom, Stretch (default) <StackPanel> <Button HorizontalAlignment="Left">Left Button</Button> <Button HorizontalAlignment="Center">Center Button</Button> <Button HorizontalAlignment="Right">Right Button</Button> <Button HorizontalAlignment="Stretch">Stretch Button</Button> </StackPanel>

135. HorizontalContentAlignment : Left, Center, Right, Stretch

136. VerticalContentAlignment: Top, Center, Bottom, Stretch<StackPanel> <Button HorizontalAlignment="Left">Left Button</Button> <Button HorizontalAlignment="Center">Center Button</Button> <Button HorizontalAlignment="Right">Right Button</Button> <Button HorizontalAlignment="Stretch" MinHeight="60" HorizontalContentAlignment="Right" VerticalContentAlignment="Bottom">Stretch Button</Button> </StackPanel>

137. How all properties come together HorizonalAlignment and VerticalAlignment Margin and Padding Height and Width Transform

138. Layout with Panels

140. Panel allows adding multiple child controls (UIElement) via Children property.

141. Different type of panels -

142. StackPanel

143. WrapPanel

144. DockPanel

145. Grid and UniformGrid

148. ItemHeight, ItemWidth – uniform height & width can be set for all children (controls)<WrapPanel Orientation="Horizontal"> <Button MinWidth="150">Button 1</Button> <Button MinWidth="120">Button 2</Button> <Button MinWidth="100">Button 3</Button> <Button MinWidth="80">Button 4</Button> <Button MinWidth="170">Button 5</Button> <Button MinWidth="40">Button 6</Button> </WrapPanel>

149. Dock Panel Wraps its children (controls) to additional rows or columns when there’s not enough space <DockPanel> <Button DockPanel.Dock="Top">Button 1</Button> <Button DockPanel.Dock="Left">Button 2</Button> <Button DockPanel.Dock="Bottom">Button 3</Button> <Button DockPanel.Dock="Right">Button 4</Button> <Button>Center Button</Button> </DockPanel>

151. Most versatile Panel & most used

152. Default Layout used by Visual Studio & Expression

153. Similar to working with Table in HTML<Grid ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition Height="40" /> <RowDefinition Height="40" /> <RowDefinition Height="40" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="120"></ColumnDefinition> <ColumnDefinition Width="*"></ColumnDefinition> </Grid.ColumnDefinitions> <Label Margin="7">First Name:</Label> <TextBox Grid.Column="1" Margin="7"></TextBox> <Label Margin="7" Grid.Row="1">Middle Name:</Label> <TextBox Grid.Row="1" Grid.Column="1" Margin="7"></TextBox> <Label Margin="7" Grid.Row="2">Last Name:</Label> <TextBox Grid.Row="2" Grid.Column="1" Margin="7"></TextBox> </Grid>

154. UniformGrid Special type of Grid Provides same height & width to all children (controls) <UniformGrid> <Button>Button 1</Button> <Button>Button 2</Button> <Button>Button 3</Button> <Button>Button 4</Button> <Button>Button 5</Button> <Button>Button 6</Button> </UniformGrid>

156. Provides absolute positioning using Left, Top, Bottom & Right with explicit coordinates

157. Should not be used if possible<Canvas Background="LightBlue" > <Label Canvas.Left="10">First Name:</Label> <TextBox Canvas.Left="100" MinWidth="150"></TextBox> <Label Canvas.Left="20" Canvas.Top="50">Middle Name:</Label> <TextBox Canvas.Left="120" Canvas.Top="50" MinWidth="150"></TextBox> <Label Canvas.Left="10" Canvas.Top="140">Last Name:</Label> <TextBox Canvas.Left="80" Canvas.Top="140" MinWidth="180"></TextBox> </Canvas>

158. Controlling Scrolling: ScrollViewer ScrollViewer: provides Scrolling capability with scroll bar <ScrollViewer> <StackPanel> <Button MinHeight="50">Button 1</Button> <Button MinHeight="60">Button 2</Button> <Button MinHeight="90">Button 3</Button> <Button MinHeight="50">Button 4</Button> <Button MinHeight="120">Button 5</Button> <Button MinHeight="50">Button 6</Button> </StackPanel> </ScrollViewer>

159. ViewBox ViewBox: Scales Content to fit the window <Viewbox> <StackPanel> <Label>Patient Detail:</Label> <StackPanel Orientation="Horizontal"> <Label Foreground="Gray">Name:</Label><Label>John W Smith</Label> </StackPanel> <StackPanel Orientation="Horizontal"> <Label Foreground="Gray">Sex:</Label><Label>Male</Label> </StackPanel> <StackPanel Orientation="Horizontal"> <Label Foreground="Gray">Age:</Label><Label>30 yrs</Label> </StackPanel> <Label Foreground="Gray">Address:</Label> <Label>2A Market Avenue, Minneapolis, MN, USA</Label> </StackPanel> </Viewbox>

160. Resources and Styles

161. Resource Different from traditional .NET Resources which are binary resources (strings, images, icons etc) WPF Resources are Logical Resources. A Resource can be anything that should be reused Resources are stored in an object of type ResourceDisctionary. Each resource in resource dictionary must have unique key Three fundamental classes (FrameworkElement, FrameworkContentElement and Application) define a property named Resource of type ResourceDisctionary. Any element derived from FrameworkElement (such as panels, controls) can have a Resource collection.

162. Resource Example Resource Key <Window.Resources> <SolidColorBrush x:Key="ButtonBackground">LightBlue</SolidColorBrush> <s:Doublex:Key="ButtonFontSize">17.5</s:Double> </Window.Resources> <StackPanel> <Button Background="{StaticResource ButtonBackground}" FontSize="{StaticResource ButtonFontSize}">Button 1</Button> <Button Background="{StaticResource ButtonBackground}">Button 2</Button> <Button FontSize="{StaticResource ButtonFontSize}">Button 3</Button> <Button>Button 4 <Button.FontSize> <StaticResource ResourceKey="ButtonFontSize" /> </Button.FontSize> <Button.Background> <StaticResource ResourceKey="ButtonBackground" /> </Button.Background> </Button> </StackPanel> Attribute syntax Property Element syntax

164. Through Markup Extension (via {})

165. Static Resource Markup Extension

166. Dynamic Resource Markup Extension

167. Through Property Element Syntax

168. Helps in consistency & reusability

169. Can be stored at different level (like individual control, panels, window or application level)

170. The markup extension class implements the ability to walk the logical tree to find the item. Element hierarchy Application.Resources Type theme System theme

171. Application Resources <Application.Resources> <s:Double x:Key="bigFontSize">20</s:Double> <SolidColorBrush x:Key="buttonBg">LightBlue</SolidColorBrush> </Application.Resources> App.xaml <StackPanel> <ButtonFontSize="{StaticResourcebigFontSize}" Background="{StaticResourcebuttonBg}">Hello World </Button> </StackPanel> Window1.xaml <Window.Resources> <SolidColorBrush x:Key="buttonBg"> LightGreen</SolidColorBrush> </Window.Resources> <StackPanel> <ButtonFontSize="{StaticResourcebigFontSize}" Background="{StaticResourcebuttonBg}">Hello World </Button> </StackPanel> Window2.xaml

172. Markup Extension Example <Button Content="{Hello}"></Button> Error: WPF expects markup Extension OK – Displays {Hello}, Escape Character <Button Content="{}{Hello}"></Button> <StackPanel> <Label Foreground="Green">Machine Name:</Label> <Label Content="{x:Static s:Environment.MachineName}"></Label> <Label Foreground="Green">OS version:</Label> <Label Content="{x:Static s:Environment.OSVersion}"></Label> <Label Foreground="Green">Version:</Label> <Label Content="{x:Static s:Environment.Version}"></Label> <Label Foreground="Green">User Name:</Label> <Label Content="{x:Static s:Environment.UserName}"></Label> <Label Foreground="Green">User Domain Name:</Label> <Label Content="{x:Static s:Environment.UserDomainName}"></Label> <Label Foreground="Green">System Directory:</Label> <Label Content="{x:Static s:Environment.SystemDirectory}"></Label> <Label Foreground="Green">Current Directory:</Label> <Label Content="{x:Static s:Environment.CurrentDirectory}"></Label> </StackPanel>

173. Static vs. Dynamic Resource WPF provides two ways to access a logical resource: Statically with StaticResource, meaning the resource is applied only once (the first time it’s needed) Dynamically with DynamicResource, meaning the resource is reapplied every time it changes

174. System Resource WPF provides out of the box System Resources: System settings encapsulated by static fields on three classes in the System.Windows namespace: SystemColors, SystemFonts, and SystemParameters <Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="System Resources Demo" Height="300" Width="300" Background="{x:StaticSystemColors.ActiveCaptionBrush}"> <StackPanel> <LabelFontFamily="{x:StaticSystemFonts.MessageFontFamily}">User:</Label> <TextBox>Aniruddha</TextBox> </StackPanel> </Window>

176. Conceptually similar to using CSS in HTML.

177. Consists of Property Setters.

178. Named Styles are the simplest.<Window.Resources> <Style x:Key="SpecialButton"> <Setter Property="Button.Background" Value="LightSlateGray"></Setter> <Setter Property="Button.FontSize" Value="20.5"></Setter> <Setter Property="Button.Foreground" Value="DarkBlue"></Setter> <Setter Property="Button.FontFamily" Value="Verdana"></Setter> </Style> </Window.Resources> <StackPanel> <Button Style="{StaticResource SpecialButton}">Special Button</Button> </StackPanel>

179. Style Inheritance Styles can be inherited: BasedOn property in Style <Window.Resources> <Style x:Key="SpecialButton"> <Setter Property="Button.Background" Value="LightSlateGray"></Setter> <Setter Property="Button.FontSize" Value="20.5"></Setter> <Setter Property="Button.Foreground" Value="DarkBlue"></Setter> <Setter Property="Button.FontFamily" Value="Verdana"></Setter> </Style> <Style x:Key="VerySpecialButton"BasedOn="{StaticResource SpecialButton}"> <Setter Property="Button.FontSize" Value="26.5"></Setter> <Setter Property="Button.FontStyle" Value="Italic"></Setter> <Setter Property="Button.Foreground" Value="White"></Setter> </Style> </Window.Resources> <StackPanel> <Button Style="{StaticResource SpecialButton}">Special Button</Button> <Button Name="btn2" Style="{StaticResource VerySpecialButton}">Very Special Button</Button> </StackPanel>

181. TargetType can be set to a specific type of controls like Button, Checkbox etc so that the Style is applied to those controls only.<Window.Resources> <Style x:Key="SpecialButton"TargetType="{x:Type Button}"> <Setter Property="Control.Background" Value="LightSlateGray"></Setter> <Setter Property="Control.FontSize" Value="18.5"></Setter> <Setter Property="Control.Foreground" Value="DarkBlue"></Setter> <Setter Property="Control.FontFamily" Value="Verdana"></Setter> </Style> </Window.Resources> <StackPanel> <Button Style="{StaticResourceSpecialButton}">Special Button</Button> <CheckBoxStyle="{StaticResourceSpecialButton}">Special Checkbox</CheckBox> </StackPanel>

183. Three types of Triggers

184. Property triggers: Invoked when the value of a dependency property changes

185. Data triggers: Invoked when the value of a plain .NET property changes

186. Event triggers: Invoked when a routed event is raised

187. FrameworkElement, Style, DataTemplate & ControlTemplate all have a Triggers collection, but whereas Style and the template classes accept all three types, FrameworkElement only accepts event triggers.

190. When the property no longer has this value, the property trigger “undoes” the Setters.<Window.Resources> <Style x:Key="magicButton" TargetType="Button"> <Setter Property="FontSize" Value="18"></Setter> <Setter Property="Foreground" Value="Green"></Setter> <Setter Property="Background" Value="LightBlue"></Setter> <Setter Property="FontStyle" Value="Italic"></Setter> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="FontSize" Value="26"></Setter> <Setter Property="Foreground" Value="Red"></Setter> <Setter Property="Background" Value="Yellow"></Setter> <Setter Property="FontWeight" Value="Bold"></Setter> </Trigger> </Style.Triggers> </Style> </Window.Resources> <StackPanel> <Button Style="{StaticResource magicButton}">Button 1</Button> <Button Style="{StaticResource magicButton}">Button 2</Button> </StackPanel>

194. Graphics Overview Provides a new rendering and composition model – Enables to use advanced display techniques Takes advantage of the capabilities of modern graphics cards Retained-mode Graphics High Quality Rendering Painter’s Algorithm Retained-mode Graphics – no repainting All Shapes (Rectangle, Ellipse) are Vector based. Vector images do not get distorted when they are enlarged. Vector graphics formats work by specifying the primitive shapes that make up the picture, and describing their positions using coordinates (or "vectors").

196. This is because GDI's graphics model is primarily a "pixel painter"—once a primitive like ellipse is rendered, GDI "forgets" the primitive.

197. The application must retain the state (geometry, formatting attributes, etc.) of all these graphic objects in order to repaint.

198. GDI programmers never have to worry about maintaining the images of user-interface controls because controls are retained-mode graphics—they are objects stored in the underlying graphics system

199. The burden of maintaining the image of the control is borne by the graphics platform itself, not by the app.

200. Retained-mode graphics is not new to GDI/Win32. In WPF ALLgraphic objects are retained. In addition to the UI controls and media primitives, 2-D Shape primitives (rectangles, ellipses, paths, etc.) and 3-D modeling primitives are retained objects.Paint (WM_PAINT) Not handled

202. Resolution independence: Device Independent Pixel

203. Anti-aliasing, eliminating the "jagged" edges of the rendering of diagonal or curved lines

204. Higher performance in drawing and refreshing, due to WPF's better use of the underlying graphics hardware WPF WinForm/GDI/GDI+

206. This system works very well in memory constrained systems because when something changes you only have to touch the affected component – no two components ever contribute to the color of a single pixel.

207. WPF uses "painter's algorithm" painting model - Instead of clipping each component, each component is asked to render from the back to the front of the display. This allows each component to paint over the previous component's display.

209. Brushes Overview WPF provides two types of brushes Three Color Brush SolidColorBrush , LinearGradientBrush, RadialGradientBrush Three Tile Brush Visual Brush, Drawing Brush, Image Brush

210. Brushes: Color Brushes WPF provides three Color Brush SolidColorBrush LinearGradientBrush RadialGradientBrush <Window.Background> <SolidColorBrush Color="LightSteelBlue" /> </Window.Background> <LinearGradientBrush> <GradientStop Color="White" Offset="0" /> <GradientStop Color="Black" Offset="2" /> </LinearGradientBrush> <RadialGradientBrush> <GradientStop Color="White" Offset="0" /> <GradientStop Color="DarkBlue" Offset="1" /> </RadialGradientBrush>

212. Visual Brush

213. Drawing Brush

214. Image Brush<Window.Background> <VisualBrush TileMode="FlipXY" Viewport="0,0,0.5,0.5"> <VisualBrush.Visual> <TextBox>Aniruddha</TextBox> </VisualBrush.Visual> </VisualBrush> </Window.Background> <Window.Background> <ImageBrushImageSource="C:sersublicicturesample Picturesinter Leaves.jpg"></ImageBrush> </Window.Background> <Window.Background> <ImageBrushTileMode="FlipXY" Viewport="0,0,0.5,0.5"ImageSource="C:sersublicicturesample Picturesinter Leaves.jpg"></ImageBrush> </Window.Background>

215. Pen A Pen is a brush with a thickness Important Pen properties StartLineCap and EndLineCap Line Join DashStyle <Line X1="20" Y1="40" X2="250" Y2="40" Stroke="Red" StrokeThickness="10" StrokeDashArray="1" StrokeDashCap="Flat" StrokeStartLineCap="Triangle" StrokeEndLineCap="Round"> </Line>

217. Rectangle

218. Ellipse

219. Line

220. PolyLine

221. Polygon

222. Path<StackPanel> <Rectangle Fill="Blue" Height="50" Width="175" Stroke="Black" StrokeThickness="5"></Rectangle> <Ellipse Fill="Orange" Height="50" Width="175" Stroke="Red" StrokeThickness="3"></Ellipse> <Line Stroke="Green" StrokeThickness="3" X1="20" Y1="20" X2="250" Y2="20"></Line> <Polyline Points="0,0 30,30 40,50 90,50 120,30 170,20" Stroke="Blue" StrokeThickness="2"></Polyline> </StackPanel>

223. Bitmap Effect WPF provides the following bitmap effects Bevel Emboss Drop Shadow Blur Outer Glow <Button Margin="10"> <Button.BitmapEffect> <DropShadowBitmapEffect/> </Button.BitmapEffect> Drop Shadow </Button>

225. RotateTransform

226. ScaleTransform

227. SkewTransform

228. TranslateTransform

229. MatrixTransform

230. All FrameworkElements have two properties of type Transform:

231. LayoutTransform, which is applied before the element is laid out

233. Angle: Angle of rotation, specified in degrees (default value = 0)

234. CenterX: Horizontal center of rotation (default value = 0)

235. CenterY: Vertical center of rotation (default value = 0)<StackPanel> <Button>Button 1</Button> <Button MinWidth="120" MinHeight="30"> <Button.LayoutTransform> <RotateTransform Angle="45"></RotateTransform> </Button.LayoutTransform> Button 2 </Button> <Button>Button 3</Button> </StackPanel>

237. ScaleX: Multiplier for the element’s width (default value = 1)

238. ScaleY: Multiplier for the element’s height (default value = 1)

239. CenterX: Origin for horizontal scaling (default value = 0)

240. CenterY: Origin for vertical scaling (default value = 0)<StackPanel> <Button>Button 1</Button> <Button>Button 2 <Button.LayoutTransform> <ScaleTransform ScaleX="2.5" ScaleY="1.5"></ScaleTransform> </Button.LayoutTransform> </Button> <Button>Button 3</Button> </StackPanel>

242. AngleX: Amount of horizontal skew (default value = 0)

243. AngleY: Amount of vertical skew (default value = 0)

244. CenterX: Origin for horizontal skew (default value = 0)

245. CenterY: Origin for vertical skew (default value = 0)<StackPanel> <Button>Button 1</Button> <Button>Button 2 <Button.LayoutTransform> <SkewTransform AngleX="45" AngleY="5"></SkewTransform> </Button.LayoutTransform> </Button> <Button>Button 3</Button> </StackPanel>

246. Combining Transform: TransformGroup Multiple Transforms can be grouped using TransformGroup <StackPanel> <Button>Button 1</Button> <Button MinWidth="120" MinHeight="30"> <Button.LayoutTransform> <TransformGroup> <SkewTransform AngleX="45" AngleY="5"></SkewTransform> <ScaleTransform ScaleX="2" ScaleY="1.5"></ScaleTransform> <RotateTransform Angle="5"></RotateTransform> </TransformGroup> </Button.LayoutTransform> Button 2 </Button> <Button>Button 3</Button> </StackPanel>

248. RenderTransform (inherited from UIElement): Applied after the layout<StackPanel> <Button>Button 1</Button> <Button MinWidth="120"> <Button.RenderTransform> <RotateTransform Angle="45" /> </Button.RenderTransform> Button 2 </Button> <Button>Button 3</Button> </StackPanel> <StackPanel> <Button>Button 1</Button> <Button MinWidth="120"> <Button.LayoutTransform> <RotateTransform Angle="45" /> </Button.LayoutTransform> Button 2 </Button> <Button>Button 3</Button> </StackPanel>

249. Trees in WPF Logical Tree or Element Tree Visual Tree <DockPanel> <ListBox DockPanel.Dock="Top"> <ListBoxItem>Dog</ListBoxItem> <ListBoxItem>Cat</ListBoxItem> <ListBoxItem>Fish</ListBoxItem> </ListBox> <Button Height="20" Width="100" DockPanel.Dock="Top">Buy a Pet</Button> </DockPanel> Logical Tree

251. System.Windows.LogicalTreeHelper

253. Data Binding & Template

255. Each Binding (represented by Binding class) has these four components:

256. a binding Target object,

257. a Target property,

258. a Binding Source,

259. a Path to the value in the binding source to use.

260. e.g if you want to bind the content of a TextBox to the Name property of an Employee object, your target object is the TextBox, the target property is the Text property, the value to use is Name, and the source object is the Employee object.

262. If binding has correct settings & data provides proper notifications, then, when the data changes its value, elements bound to data reflect changes automatically.<Label>Enter your name:</Label> <TextBox x:Name="nameTextBox"></TextBox> <Label Margin="0,20,0,0">Name Entered by you:</Label> <Label x:Name="label" Content="{BindingElementName=nameTextBox, Path=Text}"></Label> Binding binding = new Binding(); // Set the Source object binding.Source = nameTextBox; // Set the Source property binding.Path =new PropertyPath("Text"); // Attach to Target property label.SetBinding(Label.ContentProperty, binding);

264. Markup Extensions are indicated by curly braces - { and }

265. No “ or ‘ within the curly braces

266. ElementName and Path are separated by ,<Label>Enter your name:</Label> <TextBox x:Name="nameTextBox"></TextBox> <Label Margin="0,20,0,0">Name Entered by you:</Label> <Label Content="{BindingElementName=nameTextBox,Path=Text}"> </Label> <Label Content="{BindingText,ElementName=nameTextBox}"> </Label> Alternate Property Element Syntax <Label>Enter your name:</Label> <TextBox x:Name="nameTextBox"></TextBox> <Label Margin="0,20,0,0">Name Entered by you:</Label> <Label x:Name="label"> <Label.Content> <BindingElementName="nameTextBox" Path="Text"></Binding> </Label.Content> </Label>

268. OneWay: Changes to source property automatically update the target property, but changes to target property are not propagated back to source property.

269. TwoWay: Changes to either source property or target property to automatically update the other. This is default.

270. OneWayToSource: Reverse of OneWay binding. updates source property when target property changes.

272. LostFocus: Default for TextBox.Text. Occurs when the TextBox control loses focus.

273. PropertyChanged: As you type into the TextBox.

274. Explicit: When the application calls UpdateSource.<Label>Enter your name:</Label> <TextBox x:Name="nameTextBox"></TextBox> <Label Margin="0,20,0,0">Name Entered by you:</Label> <TextBox x:Name="label" Text="{BindingElementName=nameTextBox, Path=Text,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"></TextBox>

276. The property is of type RelativeSource, which also happens to be a markup extension.

278. Binding to .NET primitive data public class PatientManager { public string PatientName { get; set;} public PatientManager() { PatientName ="John Smith"; } } <Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:p="clr-namespace:WpfApplication1" Title="Data Binding - .NET primitive data" Height="300" Width="300"> <Window.Resources> <p:PatientManager x:Key="PatientSource"></p:PatientManager> </Window.Resources> <StackPanel> <Label>Patient Name:</Label> <TextBox Text="{Binding Source={StaticResourcePatientSource}, Path=PatientName}"></TextBox> </StackPanel> </Window>

279. Data Context public class PatientManager { public string PatientName { get; set; } public DateTime DateOfBirth {get; set; } public string Address { get; set; } public string City { get; set; } public PatientManager() { PatientName ="John Smith"; DateOfBirth =DateTime.Now; Address ="C.V.Raman Nagar"; City = "Bangalore"; } } <Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:p="clr-namespace:WpfApplication1" Title="Data Binding - DataContext" Height="300" Width="300"> <Window.Resources> <p:PatientManager x:Key="PatientSource"></p:PatientManager> </Window.Resources> <StackPanel> <StackPanel.DataContext> <Binding Source="{StaticResourcePatientSource}"></Binding> </StackPanel.DataContext> <Label>Patient Name:</Label> <TextBox Text="{Binding Path=PatientName}" /> <Label>Date of Birth:</Label> <TextBox Text="{Binding Path=DateOfBirth}" /> <Label>Address:</Label> <TextBox Text="{Binding Path=Address}" /> <Label>City:</Label> <TextBox Text="{Binding Path=City}" /> </StackPanel> </Window>

280. Binding to .NET collection data <Window.Resources> <p:Patient x:Key="PatientData"></p:Patient> </Window.Resources> <StackPanelDataContext="{StaticResourcePatientData}"> <Label>Patient Name:</Label> <TextBox Text="{Binding Path=Name}" /> <Label>DOB:</Label> <TextBox Text="{Binding Path=Dob}" /> <Label>Patient's Addresses:</Label> <ListBoxItemsSource="{Binding Path=Addresses}" /> </StackPanel>

282. INotifyCollectionChanged: Notifies listeners of dynamic changes, such as when items get added and removed or the whole list is refreshed. Provided in .NET 3.0

285. INotifyCollectionChanged interface exposes an event that should be raised whenever the underlying collection changes.

288. Template allows to completely replace an element’s visual tree while keeping all of its functionality intact.

289. Default visuals for every Controlin WPF are defined in templates (and customized for each Windows theme).

291. Template Binding <StackPanel> <Button BorderThickness="3" Height="40" Width="150" Background="LightPink" BorderBrush="Brown" FontSize="16">Hello World <Button.Template> <ControlTemplate> <Grid> <Ellipse Fill="{TemplateBinding ContentControl.Background}" Height="{TemplateBinding ContentControl.Height}" Width="{TemplateBinding ContentControl.Width}" Stroke="{TemplateBinding ContentControl.BorderBrush}" StrokeThickness="{TemplateBinding ContentControl.BorderThickness}"></Ellipse> <ContentControl HorizontalAlignment="{TemplateBinding ContentControl.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding ContentControl.VerticalContentAlignment}" FontSize="{TemplateBinding ContentControl.FontSize}" Content="{TemplateBinding ContentControl.Content}"></ContentControl> </Grid> </ControlTemplate> </Button.Template> </Button> </StackPanel>

292. Input and Command

294. Primary input API exposure is found on base element classes: UIElement, ContentElement, FrameworkElement, and FrameworkContentElement

295. Provide functionality for input events related to key presses, mouse buttons, mouse wheel, mouse movement, focus management, and mouse capture.

296. Additionally Keyboard class & Mouse classes provide additional API for working with keyboard & mouse input.

297. Examples of input API on the Keyboard class are the Modifiers property, which returns the ModifierKeys currently pressed

298. IsKeyDown method, which determines whether a specified key is pressed.

300. Physical Event: Supports direct Mouse events like MouseUp, MouseDown

301. Semantic Event: Supports higher level events like Click.

302. Can fire when user presses space bar (with the button in focus)

303. Can fire when user presses Enter (when the button is default)

304. Can happen when user uses mouse or stylus

305. Writing code against the Click event has two advantages:

306. Independent of specific input gesture (mouse versus keyboard),

307. NOT tied with button. Code written against the Click event depends only on a component that can be clicked. Decoupling of code to the action produced allows for more flexibility in the implementation of handlers.

308. Events suffer from a form of coupling that requires the method implementation to be of a specific signature. e.g. the delegate for Button.Click is defined as follows:public delegate void RoutedEventHandler(object sender, RoutedEventArgs e);

310. WPF’s built-in commands are exposed as static properties of five different classes.

311. ApplicationCommands: Close, Copy, Cut, Delete, Find, Help, New, Open, Paste, Print, PrintPreview, Properties, Redo, Replace, Save, SaveAs, SelectAll, Stop, Undo

312. ComponentCommands: MoveDown, MoveLeft, MoveRight, MoveUp, ScrollByLine, ScrollPageDown, ScrollPageLeft, ScrollPageRight, ScrollPageUp, SelectToEnd, SelectToHome, SelectToPageDown, SelectToPageUp

313. MediaCommands:ChannelDown, ChannelUp, DecreaseVolume, FastForward, IncreaseVolume, MuteVolume, NextTrack, Pause, Play, PreviousTrack, Record, Rewind, Select, Stop

314. NavigationCommands: BrowseBack, BrowseForward, BrowseHome, BrowseStop, Favorites, FirstPage, GoToPage, LastPage, NextPage, PreviousPage, Refresh, Search, Zoom, and more

316. Custom Command Implement ICommand interface Execute: The method that executes the command specific logic CanExecute: A method returning true if the command is enabled or false if it is disabled CanExecuteChanged: An event that is raised whenever the value of CanExecute changes

317. Custom Command Example

318. Custom Command Example (Cont’d)

320. When a routed event is raised, it can travel up or down the visual and logical tree, getting raised on each element in a simple and consistent fashion, without the need for any custom code.

321. Helps Apps remain oblivious to details of the visual tree & is crucial to success of element composition.

322. Routing strategies: the wayinwhich event raising travels through element tree - Tunneling: The event is first raised on the root, then on each element down the tree until the source element is reached (or until a handler halts the tunneling by marking the event as handled). Bubbling: The event is first raised on the source element, then on each element up the tree until the root is reached (or until a handler halts the bubbling by marking the event as handled). Direct: The event is only raised on source element. This is same behavior as plain .NET event, except that such events can still participate in mechanisms specific to routed events.

324. OriginalSource: The element in the visual tree that originally raised the event.

325. Handled: A Boolean that can be set to true to mark the event as handled. This is precisely what halts any tunneling or bubbling.

328. Used throughout the platform to enable styling, automatic data binding, animation and more.

329. A dependency property depends on multiple providers for determining its value at any point in time.

330. Providers could be an animation continuously changing its value, a parent element whose property value trickles down to its children, and so on.

331. Biggest feature of DP is built-in ability to provide change notification.

332. DP allows property value inheritance.

333. Doesn’trefer to traditional object oriented class based inheritance, but rather the flowing of property values down the element tree.this.FontSize = 20;

334. Dependency Property Example // Declare a public object of type DependencyProperty public static readonlyDependencyPropertySpaceProperty; // .NET Property Wrapper (Optional) public intSpace { get { return (int)GetValue(SpaceProperty); } set { SetValue(SpaceProperty, value); } } // Declare metadata such as default value of the DP FrameworkPropertyMetadatametadata =new FrameworkPropertyMetadata(); metadata.DefaultValue = 1; metadata.AffectsMeasure =true; metadata.Inherits = true; metadata.PropertyChangedCallback += OnSpacePropertyChanged; // Register the Dependency Property SpaceProperty = DependencyProperty.Register("Space",typeof(int),typeof(SpaceButton), metadata,ValidateSpaceButton); static void OnSpacePropertyChanged(DependencyObjectobj,DependencyPropertyChangedEventArgsargs) { }

335. Change Notification

336. WPF Books