Step 1 of 3: Creating a WPF Application

In this step you'll create a WPF or Silverlight application in Visual Studio using DockControl for WPF and Silverlight.

To set up your project and add a C1DockControl control to your application, complete the following steps:

In Visual Studio, select File | New | Project. Note that Visual Studio 2010 is used to complete the steps in this quick start.
In the New Project dialog box, select a language in the left pane (in this example, C# is used), and in the templates list select WPF Application or Silverlight Application.
In the .NET Framework drop-down list, select .NET Framework 3.5 or later.
Enter a Name for your project and click OK. The New WPF Application or New Silverlight Application dialog box will appear.
Uncheck the Host the WPF application in a new Web site or Host the Silverlight application in a new Web site box, if necessary, and click OK. The MainPage.xaml file opens.
In the XAML window of the project, place the cursor between the <Grid> and </Grid> tags and click once.

Navigate to the Toolbox and drag the C1DockControl icon in between the <Grid> tags to add the C1DockControl to Window.xaml. The XAML markup will now look similar to the following:

WPF XAML	Copy Code
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Grid x:Name="LayoutRoot"> <c1:C1DockControl></c1:C1DockControl> </Grid> </Window>

WPF XAML

Copy Code

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
<c1:C1DockControl></c1:C1DockControl>
  </Grid>
</Window>

Silverlight XAML	Copy Code
<UserControl xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="C1DockControlQuickStart.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Grid x:Name="LayoutRoot"> <c1:C1DockControl></c1:C1DockControl> </Grid> </UserControl>

Silverlight XAML

Copy Code

<UserControl
xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
  x:Class="C1DockControlQuickStart.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
<c1:C1DockControl></c1:C1DockControl>
  </Grid>
</UserControl>

Note: The C1.WPF.Docking or C1.Silverlight.Docking namespace and <c1:C1DockControl></c1:C1DockControl> tags have been added to the project.

In the next step, you will add a C1DockTabControl with C1DockTabItems.