WPF/Silverlight Layouts

ClipToBounds="True": This is a property which gives us the visibility of the controls inside the bound of the Canvas.

Example: Canvas



Figure 1.1 Layouts: Canvas: Basic Positioning

<Canvas Width="400" Height="300" Background="LightBlue">
<Button Canvas.Top="2" Canvas.Left="2">Top, Left</Button>
<Button Canvas.Top="2" Canvas.Right="2">Top, Right</Button>
<Button Canvas.Bottom="2" Canvas.Left="2">Bottom, Left</Button>
<Button Canvas.Bottom="2" Canvas.Right="2">Bottom, Right</Button>
<Button Canvas.Top="120" Canvas.Left="120" Canvas.Bottom="120" Canvas.Right="120">Top120, Left120, Bottom120, Right120</Button>
</Canvas>



Figure 1.2 Layouts: Canvas: Overtaking Controls

<XAML Code>

<Canvas Width="400" Height="300" Background="LightBlue"> <Button Canvas.Top="2" Canvas.Left="2">Top, Left</Button>
<Button Canvas.Top="10" Canvas.Left="40">Top, Right</Button>
<Button Canvas.Bottom="2" Canvas.Left="2">Bottom, Left</Button>
<Button Canvas.Bottom="2" Canvas.Right="2">Bottom, Right</Button>
<Button Canvas.Top="120" Canvas.Left="120" Canvas.Bottom="120" Canvas.Right="120">Top120, Left120, Bottom120, Right120</Button>
</Canvas>

Stack Panel

• As the name implies, StackPanel stacks things up in a row.

• Through the Orientation property we can control whether the stack is horizontal or vertical.

• Default orientation of StackPanel is Vertical.

• The slot for each child in StackPanel is given the entire width or height of the control (depending on its orientation).

• StackPanel determines its preferred size according to the maximum size of its children.

• StackPanel must be used carefully because it measures children using an infinite width or height based on the orientation.

• specifically causing problems for TextBlock with wrapping and ScrollViewer.

Example: Stack Panel



Figure 1.3 Layouts: StackPanel : Orientation Vertical(default) & Horizontal.

<XAML Code>

<StackPanel Background="LightBlue" Width="300" Height="400" Orientation="Horizontal">
<Button>Button1</Button>
<Button>Button2</Button>
<Button>Button3</Button>
<Button>Button4</Button>
<Button>Button5</Button>
</StackPanel>

Dock Panel

• DockPanel is fairly similar to StackPanel, except that it allows mixing of stacking from different edges within the same layout container.

• DockPanel is probably one of the most common UI layouts today.

• Windows Forms natively supported docking.

• Docking allows elements to be stacked at any edge of a container, with the final element filling the remaining space.

• Implementing this layout in WPF is relatively simple: The DockPanel offers a single property, Dock, which allows us to specify the edge to which a controlis docked.

• The declaration order of the elements determines the order in which they're placed, and by default the last child fills the remaining space.

Example: Dock Panel



Figure 1.3 Layouts: DockPanel: Mocking Windows Explorer Layout

<XAML Code>

<DockPanel Height="600" Width="600">
<Button DockPanel.Dock='Top'>Menu Area (Dock=Top)</Button>
<Button DockPanel.Dock='Top'>Toolbar Area (Dock=Top)</Button>
<Button DockPanel.Dock='Left'>Folders (Dock=Left)</Button>
<Button>Content (Fills remaining space becauseLastChildFill='true')</Button>
</DockPanel>

Wrap Panel

• If DockPanel is a stack panel with multiple edges, then WrapPanel is a stack panel with wrapping support.

• WrapPanel, on the other hand, uses the available space and fits elements to it; and when it runs out of room, it wraps to the next line. (Example: Toolbar Layout)

• By default, WrapPanel simply sizes all the children to fit their content.

• Although we can fix the width and height of the children by using the ItemWidth and ItemHeight properties.

Example: Wrap Panel



Figure 1.4 Layouts: WrapPanel: Mocking Toolbar buttons

<XAML Code>

<WrapPanel Background="LightBlue" Width="400" Height="300">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
<Button>Four</Button>
<Button>Five</Button>
<Button>Six</Button>



Figure 1.5 Layouts: WrapPanel: Mocking Toolbar buttons (Defining ItemWidth and ItemHeight)

<XAML Code>

<WrapPanel Background="LightBlue" Width="400" Height="300" ItemHeight="20" ItemWidth="50">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
<Button>Four</Button>
<Button>Five</Button>
<Button>Six</Button>

Uniform Grid

• The final basic layout, which is really nothing like StackPanel, is UniformGrid.

• UniformGrid provides a very basic grid layout: Each cell is the same size (hence uniform), and the locations of the items are determined simply by their order in the children collection.

• To use UniformGrid, we specify the number of columns and rows we want. If we specify only columns, then rows will be calculated as the number of children divided by the number of columns, and vice versa.

• The width of each cell is calculated as the maximum of all child widths, and the height of each cell is the maximum of all child heights.

• If we provide more children than can be displayed (e.g., adding a seventh button to the preceding example), it will be positioned as if the grid had infinite height (the Seven button will be directly below the Five button).

• It is important, but odd, that UniformGrid has positioned the last child outside the bounds of the control.

Example: Uniform Grid



Figure 1.6 Layouts: Uniform Grid

<XAML Code>

<UniformGrid Columns="2" Rows="3" Background="LightBlue" Height="200" Width="200">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
<Button>Four</Button>
<Button>Five</Button>
<Button>Six</Button>
</UniformGrid>

Grid