Step 2 of 3: Adding a C1DockPanel to the Application

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

Complete the following steps:

First, remove the Grid tags from your project.

Drag and drop C1DockPanel control on the page. This adds the panel and a reference to the page.

Edit the <Xaml:C1DockPanel> tags to add docked borders on the left, right, top, and bottom of the screen so the markup looks like the following:

Markup	Copy Code
<Xaml:C1DockPanel Background="White" Width="400" Height="250"> <Border Xaml:C1DockPanel.Dock="Top" Height="50" Background="Red"> <TextBlock Text="Top" /> </Border> <Border Xaml:C1DockPanel.Dock="Bottom" Height="50" Background="Blue"> <TextBlock Text="Bottom" /> </Border> <Border Xaml:C1DockPanel.Dock="Right" Width="50" Background="Yellow"> <TextBlock Text="Right" /> </Border> <Border Xaml:C1DockPanel.Dock="Left" Width="50" Background="Green"> <TextBlock Text="Left" /> </Border> </Xaml:C1DockPanel>

Markup

Copy Code

<Xaml:C1DockPanel Background="White" Width="400" Height="250">
   <Border Xaml:C1DockPanel.Dock="Top" Height="50" Background="Red">
      <TextBlock Text="Top" />
   </Border>
   <Border Xaml:C1DockPanel.Dock="Bottom" Height="50" Background="Blue">
      <TextBlock Text="Bottom" />
   </Border>
   <Border Xaml:C1DockPanel.Dock="Right" Width="50" Background="Yellow">
      <TextBlock Text="Right" />
   </Border>
   <Border Xaml:C1DockPanel.Dock="Left" Width="50" Background="Green">
      <TextBlock Text="Left" />
   </Border>
</Xaml:C1DockPanel>

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