Windows Presentation Foundation Introduction(II) - User Interfaces Part I

/*by Jiangong SUN*/

Page Layout:
WPF provides layout support by using a common infrastructure that includes layout classes such asDockPanel, Grid, StackPanel, and WrapPanel.


WPF Page Layout Model:  Mesurement Pass, Arrangement Pass

During the measurement pass of the layout process, the parent Panel object evaluates each member of the Children collection to determine its DesiredSize.

During the arrangement pass, the parent Panel element uses the DesiredSize of each child object and any additional offset properties, such as margin and alignment, to determine the final size of the child object and to place the child within its layout slot.

Therefore, you should avoid triggering the layout process unless it is necessary to avoid degrading the performance of your application
You can use a LayoutTransform to affect the content of a UI, but if the result of the transform does not need to affect the position of other elements, youshoulduse aRenderTransform instead because it does not invoke the layout process.


Page Layout Classes:
All layout classes that derive from the Panel class support the FlowDirection property that you can use to dynamically update the layout of content based on a user's locale or language settings.

WPF provides the following 6 layout classes that are designed specifically for creating UIs:
Canvas. Defines an area within which you can position child elements by coordinates that are relative to the Canvas area. (X, Y 坐标)

  <Canvas>    <TextBlock FontSize="14" Canvas.Top="20" Canvas.Left="10">Hello World!</TextBlock>    <TextBlock FontSize="22" Canvas.Top="40" Canvas.Left="20">Canvas example.</TextBlock>  </Canvas>

DockPanel. Defines an area within which you can arrange child elements either horizontally or vertically, relative to each other.

    <DockPanel LastChildFill="True">        <Border DockPanel.Dock="Left" Width="20" Background="AntiqueWhite"></Border>        <Button DockPanel.Dock="Right">Dock = "Right"</Button>        <Button DockPanel.Dock="Top">Dock = "Top"</Button>        <Button DockPanel.Dock="Top">Dock = "Top"</Button>        <Button DockPanel.Dock="Bottom">Dock = "Bottom"</Button>        <Button DockPanel.Dock="Left">Dock = "Left"</Button>        <Button>"Fill" content</Button>    </DockPanel>

Grid. Defines a flexible grid area that consists of columns and rows.

StackPanel. Arranges child elements into a single line that can be oriented horizontally or vertically.

VirtualizingStackPanel. Exhibits the same behavior as the StackPanel but keeps in memory only child elements that are currently visible.

WrapPanel. Positions child elements in sequential position, breaking content to the next line at the edge of the containing box. Sequential ordering occurs from top to bottom or right to left, depending on the value of the Orientation property.

  <WrapPanel Background="LightBlue" Width="220" Height="100">    <Button Width="200">Button 1</Button>     <Button>Button 2</Button>     <Button Width="100">Button 3</Button>     <Button>Button 4</Button>  </WrapPanel>

Layout Best practices:
Avoid fixed positions - use the Alignment properties in combination with Margin to position elements in a panel
Avoid fixed sizes - set the Width and Height of elements to Auto whenever possible.
Don't abuse the canvas panel to layout elements. Use it only for vector graphics.
Use a StackPanel to layout buttons of a dialog
Use a GridPanel to layout a static data entry form. Create a Auto sized column for the labels and a Star sized column for the TextBoxes.
Use an ItemControl with a grid panel in a DataTemplate to layout dynamic key value lists. 

Use the SharedSize feature to synchronize the label widths.

(from http://wpftutorial.net/LayoutProperties.html)


Content Control: they can just contain only one content.
For example:

<Button>This works!</Button><Button>This will generate error: The property 'Content' is set more than once<Border></Border></Button>

Common content controls: 

Button, CheckBox, GroupItem, Label, RadioButton, RepeatButton, ToggleButton, ToolTip


HeaderedContentControl is a specialized ContentControl that exposes the Content property and also exposes a Header property


Items Control: The ItemsControl class contains a collection of objects that are specified by using either the ItemSource property or the Items property.


Common items controls: ComboBox, ListBox, Menu, StatusBar, TabControl, ToolBar, TreeView

TreeView Example:

<TreeView>  <TreeViewItem Header="Employee1">    <TreeViewItem Header="Jesper"/>    <TreeViewItem Header="Aaberg"/>    <TreeViewItem Header="12345"/>  </TreeViewItem> <TreeViewItem Header="Employee2">    <TreeViewItem Header="Dominik"/>    <TreeViewItem Header="Paiha"/>    <TreeViewItem Header="98765"/>  </TreeViewItem></TreeView>

Host Windows Forms Controls:
WPF enables you to host Windows Forms controls in your WPF applications by using theWindowsFormsHostclass in theSystem.Windows.Forms.Integration namespace.


To use Windows Forms controls in your WPF applications, you must add references to the following assemblies:
WindowsFormsIntegration.dll (C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.0)
System.Windows.Forms.dll (add reference)
The System.Windows.Forms assembly contains the Windows Forms controls and the WindowsFormsIntegration assembly provides the interoperability between the Windows Forms controls and the WPF application.

xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"xmlns:wfi="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"><wfi:WindowsFormsHost><wf:DateTimePicker x:Name="startDate" /></wfi:WindowsFormsHost>

Hope this helps! Enjoy coding!