手順2：アプリケーションへの C1DockPanel の追加

この手順では、複数の C1DockPanels を追加してスタイルを設定します。

次の手順に従います。

最初に、プロジェクトから Grid タグを取り除きます。
Visual Studio のツールボックスで、C1DockPanel コントロールをページにドラッグします。これで、パネルと参照がページに追加されます。

<Xaml:C1DockPanel> タグを編集して、画面の上下左右にドッキングされる境界線を追加します。マークアップは次のようになります。

	コードのコピー
<Xaml:C1DockPanel Background="White" Width="400" Height="250"> <Border Xaml:C1DockPanel.Dock="Top" Height="50" Background="Red"> <TextBlock Text="上" /> </Border> <Border Xaml:C1DockPanel.Dock="Bottom" Height="50" Background="Blue"> <TextBlock Text="下" /> </Border> <Border Xaml:C1DockPanel.Dock="Right" Width="50" Background="Yellow"> <TextBlock Text="右" /> </Border> <Border Xaml:C1DockPanel.Dock="Left" Width="50" Background="Green"> <TextBlock Text="左" /> </Border> </Xaml:C1DockPanel>

コードのコピー

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

次の手順では、このアプリケーションを実行します。