xaml - XAML StackPanel 分割

Question

XAML で、StackPanel コントロール (または一般的なコンテナー) で行と列を線で区切ることは可能ですか? たとえば、チェス盤のように見えるようにするには？また、ユーザーがウィンドウのサイズを変更すると、パネルもサイズ変更されます。

Answer 1

Panels線を描画する組み込みの唯一のものはGridwithShowGridLines="True"セットですが、描画される線は変更できない醜い破線であり、実際にはデバッグ目的にのみ適しています。

独自の線を描画するには、各セル、またはレイアウト全体に広げたい場合は各行または列に同じ境界線を追加するだけです。チェス盤のレイアウトを行う最も簡単な方法は、次のものを使用することUniformGridです。

<UniformGrid Rows="2" Columns="2">
    <Border BorderBrush="Gray" BorderThickness="1" />
    <Border BorderBrush="Gray" BorderThickness="1" />
    <Border BorderBrush="Gray" BorderThickness="1" />
    <Border BorderBrush="Gray" BorderThickness="1" />
</UniformGrid>

完全なボードの場合、入力を節約し、64 個のアイテム コレクションにバインドされた ItemsControl を行のテンプレートと共に使用できます。

<ItemsControl ItemsSource="{Binding ListOf64Items}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Gray" BorderThickness="1"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="8" Columns="8"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

また、グリッドから正確に何を求めているかに応じて、さまざまなバリエーションが考えられます。