Use grid to make page layout notes

did not use WPF to do a fine page layout, learning a bit.

There are many controls for page layouts in WPF, which has been learned over the course of time: to want specific effects, you must understand the use layout and common property settings of the control.

First I explain the effect I want and how to implement it:

Effects such as

The goal is to implement drag-and-drop mid-cyan GridSplitter to arbitrarily adjust the area of the upper and lower controls.

Here are a few things to keep in mind:

1, DockPanel is used to rule the order to visit the control, the goal is that the control can be docked in the four Corners, the last control can fill the remaining space

Todo: Recently more busy later added ...

After learning to find a lot of methods can be, now posted one of my test (the binding of the background code to see the effect, VS2015):

<dockpanel name= "DockPanel1" >
<wrappanel grid.row= "0" grid.column= "0" grid.columnspan= "4" horizontalalignment= "Stretch"
Verticalalignment= "Stretch" background= "Beige" dockpanel.dock= "Top" height= "Up" margin= "2" >
<button command= "{Binding copycmd}" height= "" content= "Copy" margin= "6"/>
<label horizontalcontentalignment= "left" verticalcontentalignment= "Center" horizontalalignment= "Stretch"
Verticalalignment= "Stretch"
Background= "Green" margin= "width=" >
Message
</Label>
</WrapPanel>

<label grid.row= "5" grid.column= "0" grid.columnspan= "4" horizontalalignment= "Stretch"
Verticalalignment= "Stretch" horizontalcontentalignment= "left" verticalcontentalignment= "Center"
Background= "Teal" dockpanel.dock= "Bottom" margin= "6" >
Status:
</Label>
<Grid>
<Grid.RowDefinitions>
<rowdefinition height= "/>"
<rowdefinition height= "5"/>
<rowdefinition height= "*"/>
</Grid.RowDefinitions>
<dockpanel grid.row= "0" horizontalalignment= "Stretch"
Verticalalignment= "Stretch" background= "Beige" margin= "2" >
<label horizontalcontentalignment= "left" verticalcontentalignment= "Center"
Background= "Hotpink" margin= "6" >
Row1
</Label>
</DockPanel>

<gridsplitter background= "Aquamarine" grid.row= "1" grid.column= "0" height= "5" grid.columnspan= "4"
Horizontalalignment= "Stretch"
Verticalalignment= "Center" showspreview= "True"/>

<grid grid.row= "2" horizontalalignment= "Stretch"
Verticalalignment= "Stretch" >
<Grid.RowDefinitions>
<rowdefinition height= "/>"
<rowdefinition height= "5"/>
<rowdefinition height= "*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<columndefinition width= "/>"
<columndefinition width= "/>"
<columndefinition width= "*"/>
<columndefinition width= "/>"
</Grid.ColumnDefinitions>
<dockpanel grid.row= "0" grid.column= "0" grid.columnspan= "4" horizontalalignment= "Stretch"
Verticalalignment= "Stretch" background= "Beige" margin= "2" >
<textbox text= "{Binding model. WPF} "margin=" 5 "
Background= "Darkgoldenrod" horizontalscrollbarvisibility= "Disabled"
Verticalscrollbarvisibility= "Auto"
Verticalcontentalignment= "Stretch" horizontalalignment= "Stretch"
Verticalalignment= "Stretch" textwrapping= "Wrapwithoverflow" acceptsreturn= "True"/>
</DockPanel>

<gridsplitter background= "Aquamarine" grid.row= "1" grid.column= "0" height= "5" grid.columnspan= "4"
Horizontalalignment= "Stretch"
Verticalalignment= "center" showspreview= "True"/>

<dockpanel grid.row= "2" grid.column= "0" grid.columnspan= "4" horizontalalignment= "Stretch"
Verticalalignment= "Stretch" background= "Beige" margin= "2" >
<button command= "{Binding copycmd}" height= "" content= "Copy" dockpanel.dock= "Top" margin= "5"/>
<textblock text= "{Binding model. WPF} "textwrapping=" Wrapwithoverflow "
Background= "Darkgoldenrod" margin= "6"/>
</DockPanel>
</Grid>
</Grid>
</DockPanel>

Use grid to make page layout notes