Step 2 of 3: Adding a C1DockPanel

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

1.   In the XAML window of the project, place the cursor between the <Grid x:Name="ContentPanel"></Grid> tags and click once.

2.   Add the following markup between the <Grid x:Name="ContentPanel"></Grid> tags to add a C1DockPanel:

<c1:C1DockPanel x:Name="c1dockpanel1"></c1:C1DockPanel>

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:

   <Border c1:C1DockPanel.Dock="Top" Height="100" Background="Red">

      <TextBlock Text="Top" />

   </Border>

   <Border c1:C1DockPanel.Dock="Bottom" Height="100" Background="Blue">

      <TextBlock Text="Bottom" />

   </Border>

   <Border c1:C1DockPanel.Dock="Right" Width="100" Background="Yellow">

      <TextBlock Text="Right" />

   </Border>

   <Border c1:C1DockPanel.Dock="Left" Background="Green" Width="100" >

      <TextBlock Text="Left" />

   </Border>

   <Border Background="White" >

      <TextBlock Text="Fill" />

   </Border>

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