Core Library / LayoutPanels / Layout Panels QuickStarts / DockPanel Quick Start
DockPanel Quick Start

The following quick start guide is intended to get you up and running with DockPanel for WPF. In this quick start, you'll create a new project in Visual Studio, and add elements docked on the top, bottom, left, right, or even fill the C1DockPanel.

Set up the Application

  1. In Visual Studio, select File | New | Project.
  2. In the New Project dialog box, select WPF Application.
  3. Enter a Name and Location for your project and click OK to create the new application.

In the next step, you'll add and style C1DockPanels.

Add and Style DockPanel

In this step we'll add and style several C1DockPanels.

  1. First, remove the Grid tags from your project.
  2. From the Visual Studio Toolbox, drag a C1DockPanel control to the page.
  3. Place your cursor in between the <c1:C1DockPanel> tags and enter the following XAML to add C1DockPanels on the left, right, top, and bottom and to fill the center of the screen:
XAML
Copy Code
<Border c1:C1DockPanel.Dock="Top" Height="50" Background="Red">
   <TextBlock Text="Top" />
</Border>
<Border c1:C1DockPanel.Dock="Bottom" Height="50" Background="Blue">
   <TextBlock Text="Bottom" />
</Border>
<Border c1:C1DockPanel.Dock="Right" Width="50" Background="Yellow">
   <TextBlock Text="Right" />
</Border>
<Border c1:C1DockPanel.Dock="Left" Background="Green" Width="50" >
   <TextBlock Text="Left" />
</Border>
<Border Background="White" >
   <TextBlock Text="Fill" />
</Border>

In the next step, you'll run the application.

Run the Application

Now you're ready to run the application. From the Debug menu, select Start Debugging. Your application will look similar to the following, with four C1DockPanels on the top, right, left, and bottom and the center block filled:

Multicolored dockpanels in application

Congratulations! You have successfully completed the DockPanel for WPF quick start.