Layout
Taking another look at Example 1-22 with the TextBlock and the Image as content for the Button, we don't really have enough
information to place them inside the area of the button. Should they be
stacked left to right or top to bottom? Should one be docked on one edge
and one docked to the other? How will things be stretched or arranged if
the button resizes? These are questions best answered with a panel.
A panel is a control that knows how to arrange its content. WPF comes with the following general-purpose panel controls:
CanvasArranges content by position and size with no automatic rearrangement when the
Canvasis resizedDockPanelArranges content according to the edge that each piece of content "docks" to, except for the last, which fills the remaining area
GridArranges content in rows and columns as specified by the developer
StackPanelArranges content top to bottom or left to right according to the orientation of the panel
UniformGridArranges content in a grid with the same number of rows and columns generated as needed to display the content
WrapPanelArranges things in a horizontal row until the next item won't fit, in which case it wraps to the next row
Grid Layout
The most flexible panel by far is the grid, which arranges content elements in rows and columns, including the ability to span multiple rows and/or multiple columns, as shown in Example 1-23.
Example 1-23. A sample usage of the Grid panel
<Window ...>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition ...