#449 – Data Binding Elements in a Collection to a Grid, part II

This post continues with the goal of binding a collection of elements to a Grid, with each object’s Row and Column properties indicating where in the Grid it should be located.  Last time we set the ItemsPanel property of an ItemsControl to order things in an 8×8 grid.  We also set the ItemTemplate property to include a Label with attached Grid.Row and Grid.Column properties.

In this post, we create a series of ChessPiece elements at runtime, representing a series of chess pieces.

            ChessPieces = new ObservableCollection<ChessPiece>();
            ChessPieces.Add(new ChessPiece("QR-Blk", 1, 1));
            ChessPieces.Add(new ChessPiece("QN-Blk", 1, 2));
            ChessPieces.Add(new ChessPiece("QB-Blk", 1, 3));
            ChessPieces.Add(new ChessPiece("Q-Blk", 1, 4));
            ChessPieces.Add(new ChessPiece("K-Blk", 1, 5));
            ChessPieces.Add(new ChessPiece("KB-Blk", 1, 6));
            ChessPieces.Add(new ChessPiece("KN-Blk", 1, 7));
            ChessPieces.Add(new ChessPiece("KR-Blk", 1, 8));

            ChessPieces.Add(new ChessPiece("P1-Blk", 2, 1));
            ChessPieces.Add(new ChessPiece("P2-Blk", 2, 2));
            ChessPieces.Add(new ChessPiece("P3-Blk", 2, 3));
            ChessPieces.Add(new ChessPiece("P4-Blk", 2, 4));
            ChessPieces.Add(new ChessPiece("P5-Blk", 2, 5));
            ChessPieces.Add(new ChessPiece("P6-Blk", 2, 6));
            ChessPieces.Add(new ChessPiece("P7-Blk", 2, 7));
            ChessPieces.Add(new ChessPiece("P8-Blk", 2, 8));
            OnPropertyChanged("ChessPieces");

#448 – Data Binding Elements in a Collection to a Grid, part I

Assume that you have a collection of objects that you want to place in a grid, with their position only known at runtime.  You might have properties on the objects indicating what row and column they should be placed in and then use data binding to locate the objects.

You can use a Grid panel as the ItemsPanel of an ItemsControl.  This dictates the layout of the items in the collection.  You can then specify the ItemTemplate to indicate how each item should be displayed.

Your first try might look something like this:

    <ItemsControl ItemsSource="{Binding ChessPieces}" Height="500" Width="500">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid ShowGridLines="True">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <!-- 7 more rows -->
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <!-- 7 more columns -->
                    </Grid.ColumnDefinitions>
                </Grid>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Label Content="{Binding Text}" Grid.Row="{Binding Row}" Grid.Column="{Binding Column}"
                        HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

Next time–create a collection of ChessPiece objects at runtime.