# XAML Quick Reference

## Content



This topic is dedicated to providing a quick overview of the XAML used to create a <span data-popup-content="This class is available in \u003ca href=\u0022/componentone/api/wpf/online-dockcontrol/dotnet-api/C1.WPF.Docking/C1.WPF.Docking.C1DockControl.html\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/api/wpf/online-dockcontrol/dotnet-api/C1.WPF.Docking/C1.WPF.Docking.C1DockControl.html\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="C1DockControl" data-popup-theme="ui-tooltip-green qtip-green">C1DockControl</span>, <span data-popup-content="This class is available in \u003ca href=\u0022/componentone/api/wpf/online-dockcontrol/dotnet-api/C1.WPF.Docking/C1.WPF.Docking.C1DockGroup.html\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/api/wpf/online-dockcontrol/dotnet-api/C1.WPF.Docking/C1.WPF.Docking.C1DockGroup.html\u0022\u003e.NET Framework\u003c/a\u003e and ." data-popup-title="C1DockGroup" data-popup-theme="ui-tooltip-green qtip-green">C1DockGroup</span>, <span data-popup-content="This class is available in \u003ca href=\u0022/componentone/api/wpf/online-dockcontrol/dotnet-api/C1.WPF.Docking/C1.WPF.Docking.C1DockTabControl.html\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/api/wpf/online-dockcontrol/dotnet-api/C1.WPF.Docking/C1.WPF.Docking.C1DockTabControl.html\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="C1DockTabControl" data-popup-theme="ui-tooltip-green qtip-green">C1DockTabControl</span>, and <span data-popup-content="This class is available in \u003ca href=\u0022/componentone/api/wpf/online-dockcontrol/dotnet-api/C1.WPF.Docking/C1.WPF.Docking.C1DockTabItem.html\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/api/wpf/online-dockcontrol/dotnet-api/C1.WPF.Docking/C1.WPF.Docking.C1DockTabItem.html\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="C1DockTabItem" data-popup-theme="ui-tooltip-green qtip-green">C1DockTabItem</span>.

To get started developing, add a **c1** namespace declaration in the root element tag:

xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"

Here is a sample docking layout:

![](https://cdn.mescius.io/document-site-files/images/071cfce4-8a59-4c77-94ca-7b05c2184e6d/graphics/dockcontrolxaml.png)

Below is the XAML for the sample docking layout:

```xml
<c1:C1DockControl  x:Name="dockControl" Margin="-128,0,12,127">
            <c1:C1DockGroup>
                <c1:C1DockTabControl Dock="Top">
                    <c1:C1DockTabItem Header="Tab 1" TabShape="Sloped">
                        <!--Your Content Here-->
                    </c1:C1DockTabItem>
                    <c1:C1DockTabItem Header="Tab 2" TabShape="Sloped">
                        <!--Your Content Here-->
                    </c1:C1DockTabItem>
                </c1:C1DockTabControl>
                <c1:C1DockTabControl>
                    <c1:C1DockTabItem Header="Tab 3" TabShape="Sloped" >
                        <!--Your Content Here-->
                    </c1:C1DockTabItem>
                </c1:C1DockTabControl>
            </c1:C1DockGroup>
            <c1:C1DockGroup>
                <c1:C1DockTabControl Dock="Top" DockWidth="500" DockHeight="500" TabItemShape="Rounded">
                    <c1:C1DockTabItem Header="Tab 4">
                        <!--Your Content Here-->
                    </c1:C1DockTabItem>
                    <c1:C1DockTabItem Header="Tab 5">
                        <!--Your Content Here-->
                    </c1:C1DockTabItem>
                </c1:C1DockTabControl>
                <c1:C1DockTabControl>
                    <c1:C1DockTabItem Header="Tab 6">
                        <!--Your Content Here-->
                    </c1:C1DockTabItem>
                </c1:C1DockTabControl>
            </c1:C1DockGroup>
            <c1:C1DockTabControl>
                <c1:C1DockTabItem Header="Tab 7" TabShape="Sloped">
                    <!--Your Content Here-->
                </c1:C1DockTabItem>
                <c1:C1DockTabItem Header="Tab 8" TabShape="Sloped">
                    <!--Your Content Here-->
                </c1:C1DockTabItem>
            </c1:C1DockTabControl>
        </c1:C1DockControl>
```