Core Library for WPF | ComponentOne
Core Library / LayoutPanels / Layout Panels QuickStarts / DockPanel Quick Start
In This Topic
    DockPanel Quick Start
    In This Topic

    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.