XAML StackPanel divided

Question

is it possible in XAML to separate in a StackPanel control (or any container in general) rows and columns with lines? So that it looks for example like a chessboard? And also when the user resizes the window, the panel would also resize.

Answer 1

The only one of the built in Panels that draws lines is a Grid with ShowGridLines="True" set on it but the lines drawn are just kind of ugly dashed lines that can't be changed and are really only good for debugging purposes.

To draw your own lines you can just add an identical border into each cell, or each row or column if you want them to stretch across the whole layout. The easiest way to do a chessboard layout is with a 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>

For a full board you can save typing and use an ItemsControl bound to some 64 item collection with a template for the lines:

<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>

There are also lots of possible variations depending on what exactly you want out of the grid.