WPF Layout: Panels

Proper layout and positioning are vital parts of interactive, high-performance and user-friendly Windows applications. In a series of articles, the layout process in WPF is explained. The series starts with an understanding of the WPF layout process. The next part of this series will cover the basics of layout and positioning such as size, margin, padding and alignment of elements. Later in this series, I will cover various panels and related parent controls available in WPF.

Table of Contents

• WPF Layout System: An Introduction
• WPF Layout: Size, Width and Height
• WPF Layout: Margins
• WPF Layout: Horizontal and Vertical Alignment
• WPF Layout: Content Alignments
• WPF Layout: Dealing with Percentage Size in WPF
• WPF Layout: Panels
• WPF Layout: Canvas
• WPF Layout: DockPanel
• WPF Layout: Grid
• WPF Layout: StackPanel
• WPF Layout: WrapPanel
• WPF Layout: Border
• WPF Layout: VirtualizingStackPanel

Introduction

In the previous article, WPF Layout: Dealing with Percentage Size in WPF, I discussed how to deal with the size ration based on the screen size. Now, I switch my focus to panels. This article focuses on the basic understanding of various panels in WPF.

Panels

All Panel controls are defined in the System.Windows.Controls namespace that resides in presentationframework.dll assembly. Besides the root Window, a Panel is the base control that works as a parent control for other child controls. If you create a WPF application using Visual Studio 2008, the default code for the Window looks as in Listing 15, where you can see a Grid panel is the default parent control for child controls that may be placed on a Window.

Listing 1

Listing 1 generates Figure 1.



                                Figure 1

WPF comes with the following five built-in panels:

• Canvas
• DockPanel
• Grid
• StackPanel
• WrapPanel

The purpose and use of these panels is different. Each panel has a different way to position and reposition child controls placed within that panel. The following articles in this series will summarise these panels and their usages.

Similar to any other WPF control, a Panel control may be represented in two ways. First, at design-time using XAML elements and attributes, and second, at run-time, using a WPF class and its properties.

The code snippet in Listing 2 creates a Grid panel at design-time using XAML.

<Window x:Class="CanvasPanelSample.Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Window1" Height="300" Width="300"
   Name="RootWindow">
   <Grid Name="GridPanel" Background="Blue"
      Width="250" Height="200"
      VerticalAlignment="Top"
      HorizontalAlignment="Left"
      FlowDirection="LeftToRight"
   />
</Window>

Listing 2

Listing 2 generates Figure 2.



                                 Figure 2

The code snippet in Listing 3 creates exactly the same Grid panel shown in Figure 2 at run-time using WPF classes.

private void CreateDynamicPanel()
{

   // Create a Grid Panel control
   Grid gridPanel = new Grid();

   // Set Grid Panel properties
   gridPanel.Background = new SolidColorBrush(Colors.Blue);
   gridPanel.Width = 250;
   gridPanel.Height = 200;
   gridPanel.HorizontalAlignment = HorizontalAlignment.Left;
   gridPanel.VerticalAlignment = VerticalAlignment.Top;
   gridPanel.FlowDirection = FlowDirection.LeftToRight;

   // Set Grid Panel as content of the Window
   RootWindow.Content = gridPanel;

}

Listing 3

All Panel controls are derived from the Panel class. Let's have a look at the Panel class properties and methods.

Panel Class Properties

The Background property represents the background color of a panel using a Brush object.

The Children property represents all child controls of a Panel.

The HasLogicalOrientation property represents whether a Panel arranges its descendants in a single dimension.

The InternalChildren property represents all child controls of a Panel, including items added directly in the code and also items that are generated by data binding.

The IsItemHost property represents if this Panel is a container for UI items that are generated by an ItemsControl. An ItemsControl is a control that can be used to present a collection of items.

The LogicalChildrent property returns an enumerator that can iterate the logical child elements of this panel.

The LogicalOrientation property represents if a panel only supports layout in a single dimension.

The VisualChildrentCount property represents the number of child Visual objects in this Panel.

Summary

In this article, I discussed basics of the panels in WPF. In the next article of this series, I will focus on the Canvas panel in details.