手順 2：C1DockTabItems を含む C1DockTabControl の追加

ここでは、C1DockTabItem を含む C1DockTabControl を追加します。

XAML マークアップで、<c1:C1DockControl></c1:C1DockControl> タグの間にカーソルを置き、［Enter］キーを押します。

次の XAML マークアップを使用して、これらのタグ内に C1DockTabControl を追加します。

XAML	コードのコピー
<c1:C1DockTabControl Dock="Left"> <c1:C1DockTabItem Header="ツールボックス"> <TextBlock Text="これはツールボックスです。" /> </c1:C1DockTabItem> </c1:C1DockTabControl>

この XAML には、Toolbox のラベルが付けられた C1DockTabItem も含まれています。ここでアプリケーションを実行すると、C1DockTabControl は次のように表示されます。

アプリケーションを実行したときに、タブを選択したり、C1DockTabControl をドッキングまたは浮動化できることを確認できるように、C1DockTabItem と C1DockTabControl をもう１つ追加します。

</c1:C1DockTabItem> の終了タグの後に、C1DockTabItem と C1DockTabControl の XAML をもう１つ追加します。C1DockControl の XAML 全体は次のようになります。

XAML	コードのコピー
<c1:C1DockControl> <c1:C1DockTabControl Dock="Left"> <c1:C1DockTabItem Header="ツールボックス"> <TextBlock Text="これはツールボックスです。" /> </c1:C1DockTabItem> <c1:C1DockTabItem Header="プロジェクト"> <TextBlock Text="ファイルツリー" /> </c1:C1DockTabItem> </c1:C1DockTabControl> <c1:C1DockTabControl DockWidth="500" ShowHeader="False"> <c1:C1DockTabItem Header="myfile.ext"> <TextBlock Text="これは myfile.ext のテキストです。" /> </c1:C1DockTabItem> </c1:C1DockTabControl> </c1:C1DockControl>

XAML

コードのコピー

<c1:C1DockControl>
     <c1:C1DockTabControl Dock="Left">
         <c1:C1DockTabItem Header="ツールボックス">
             <TextBlock Text="これはツールボックスです。" />
         </c1:C1DockTabItem>
        <c1:C1DockTabItem Header="プロジェクト">
             <TextBlock Text="ファイルツリー" />
         </c1:C1DockTabItem>
     </c1:C1DockTabControl>
     <c1:C1DockTabControl DockWidth="500" ShowHeader="False">
         <c1:C1DockTabItem Header="myfile.ext">
             <TextBlock Text="これは myfile.ext のテキストです。" />
         </c1:C1DockTabItem>
     </c1:C1DockTabControl>
</c1:C1DockControl>

次の手順では、アプリケーションを実行して、ウィンドウのドッキングモードを変更してみます。