WPF Controls: Panels

Windows Presentation Foundation (WPF) has the called Panel controls. Those are controls that can contain a set of child controls.

Each Panel has its own particular way of organizing controls.

2015-57-10 10-57-21-365

Panel Controls

Panel controls are everything that derives from System.Windows.Controls.Panel. Their main purpose is to group a set of controls in a container.

  • System.Windows.Controls.Canvas
  • System.Windows.Controls.DockPanel
  • System.Windows.Controls.Grid
  • System.Windows.Controls.Primitives.TabPanel
  • System.Windows.Controls.Primitives.ToolBarOverflowPanel
  • System.Windows.Controls.Primitives.UniformGrid
  • System.Windows.Controls.Ribbon.Primitives.RibbonContextualTabGroupsPanel
  • System.Windows.Controls.Ribbon.Primitives.RibbonGalleryCategoriesPanel
  • System.Windows.Controls.Ribbon.Primitives.RibbonGalleryItemsPanel
  • System.Windows.Controls.Ribbon.Primitives.RibbonGroupItemsPanel
  • System.Windows.Controls.Ribbon.Primitives.RibbonQuickAccessToolBarOverflowPanel
  • System.Windows.Controls.Ribbon.Primitives.RibbonTabHeadersPanel
  • System.Windows.Controls.Ribbon.Primitives.RibbonTabsPanel
  • System.Windows.Controls.Ribbon.Primitives.RibbonTitlePanel
  • System.Windows.Controls.StackPanel
  • System.Windows.Controls.VirtualizingPanel
  • System.Windows.Controls.WrapPanel

Note: This post doesn’t cover Ribbon Panels, but basically they are all the panel types that compose a ribbon bar.

Canvas

The Canvas control allows you to add controls to any position on the screen by informing the coordinates. This is the control you want when developing a game, because you can draw on it.

<Canvas>
    <TextBlock Text="Coord =" Canvas.Top="10" Canvas.Left="50" />
</Canvas>

DockPanel

The DockPanel control can define where elements will be docked within it. We can specify where the elements will be docked by setting DockPanel.Dock to the position where they should be docked.
If the element is inside the DockPanel and is not specifying a position it is going to use the remaining space.

<DockPanel>
    <Button Background="Green" DockPanel.Dock="Top" Height="25" />
    <Button Background="Blue" DockPanel.Dock="Left" Width="25" />
    <Button Background="Orange" DockPanel.Dock="Right" Width="25" />
    <Button Background="Yellow" DockPanel.Dock="Bottom" Height="25" />
    <Button Background="Purple" />
</DockPanel>

The above code will result in the image bellow. Notice that elements docked last have less space available to them than the elements docked first.

dockpanel

Grid

The Grid control allows you to define rows and columns by creating ColumnDefinitions and RowDefinitions.

You can set their size to a number of pixels, Auto (which means resize itself to the contents occupied space), “*” or “N*” (* = give me what is left; 2* = give me two pieces of what is left; 5* = five pieces of what is left…).

And then to place the controls in their respective rows and columns you add Grid.Row="X" and Grid.Column="Y" to the controls tag. You can also set Grid.RowSpan and Grid.ColumnSpan to occupy more rows/columns.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="25" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>
            
    <Grid.RowDefinitions>
        <RowDefinition Height="25" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="3*" />
    </Grid.RowDefinitions>

    <Button Content="B" Grid.Row="0" Grid.Column="0" />
    <Button Content="B" Grid.Row="0" Grid.Column="1" />
    <Button Content="B" Grid.Row="0" Grid.Column="2" />
    <Button Content="B" Grid.Row="0" Grid.Column="3" Height="44" />
            
    <Button Content="B" Grid.Row="1" Grid.Column="0" />
    <Button Content="B" Grid.Row="1" Grid.Column="1" Height="50" />
    <Button Content="B" Grid.Row="1" Grid.Column="2" />
    <Button Content="B" Grid.Row="1" Grid.Column="3" />
            
    <Button Content="Button" Grid.Row="2" Grid.Column="0"
            Grid.RowSpan="2" Grid.ColumnSpan="4"
            />

</Grid>

Generates:

2015-17-10 10-17-00-228

TabPanel

The TabPanel control is the control used internally by the TabControl to contain the set of tabs.

<TabControl>
    <TabItem Header="Home" IsSelected="True">
        <Label Content="Hi Home" />
    </TabItem>
    <TabItem Header="Tab1" IsSelected="True">
        <Label Content="Hi Tab1" />
    </TabItem>
    <TabItem Header="Tab2" IsSelected="True">
        <Label Content="Hi Tab2" />
    </TabItem>
</TabControl>

tabpanel

You can use it to create a similar look using some controls. It is somewhat similar to a horizontal oriented StackPanel. For example:

<TabPanel>
    <Button Content="Button 1" />
    <Button Content="Button 2" />
    <Button Content="Button 3" />
    <Button Content="Button 4" />
</TabPanel>

ToolBarOverflowPanel

The ToolBarOverflowPanel control is used internally by the toolbar to handle overflow of items. When there are more items it can show the extra content is added under the arrow button.

UniformGrid

The UniformGrid control renders equal sized columns and rows. You can specify the number of columns and rows it is going to generate and the controls declared inside will be placed in their respective row/column by the order they are declare. For example:

<UniformGrid Columns="2" Rows="3" Height="100"
    VerticalAlignment="Top">
    <Label Content="Name" VerticalAlignment="Center" />
    <TextBox VerticalAlignment="Center" />

    <Label Content="RequiredAge" VerticalAlignment="Center" />
    <TextBox VerticalAlignment="Center" />

    <Label Content="Actvie" VerticalAlignment="Center" />
    <TextBox VerticalAlignment="Center" />
</UniformGrid>

Results in:

2015-57-10 10-57-21-365

StackPanel

The StackPanel control is the simplest and easiest control to use. It simply displays elements by the order they are declare, by default it has the Orientation set to Vertical which causes the controls to render one above the other:

<StackPanel>
    <Button Content="Button" />
    <Button Content="Button" />
    <Button Content="Button" />
</StackPanel

2015-11-10 11-11-46-891

You can manually set the Orientation to Horizontal, which will cause elements to be rendered that way:

<StackPanel Orientation="Horizontal">
    <Button Content="Button" />
    <Button Content="Button" />
    <Button Content="Button" />
</StackPanel

2015-12-10 11-12-46-288

VirtualizingPanel

The VirtualizingPanel control is an abstract control. The types deriving from it can set IsVirtualizing to true indicating the control will only draw the controls in the screen that can be visible. The other elements aren’t rendered unless you scroll them into view.

Example:

<ListBox VirtualizingStackPanel.IsVirtualizing="True">
    <ListBoxItem Content="Test" />
    ...
</ListBox>

WrapPanel

The WrapPanel control can be used to handle wrapping when the contents of the panel go over its size.

ezgif.com-crop

Advertisements

One thought on “WPF Controls: Panels

  1. Pingback: The MVVM pattern in WPF | Coding Wise

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s