Fill matrix per cell definition

Question

I need to show and edit my data in a view like matrix. All the data will be collected in a ObserverableCollection. Then i will fill the collection per cell definition. Each cell definition has the key of it's row and column, and a string, which should be shown in the matrix.

public class CellViewModel : ViewModelBase
{
    public object RowKey { get; set; }    
    public object ColumnKey { get; set; }
    public string CellText { get; set; }
}

That means, when a CellViewModel is added to the collection, and a row with same RowKey is already existed, the cell will be filled to suitable column of this row. If the column is not existed, a new column will be added. The key could be any object, with that man can add a cell with any object keys and don't need to care about setting right position of cell. For example, i fill the collection with CellViewModels:

GridCellViewModelCollection = new ObservableCollection<CellViewModel>
{
    new CellViewModel
    {
        RowKey = 1,
        ColumnKey = 1,
        CellText = "Cell1_1"
    },
    new CellViewModel
    {
        RowKey = "string",
        ColumnKey = 'char',
        CellText = "Cell2_2"
    },
    new CellViewModel
    {
        RowKey = 3,
        ColumnKey = 1,
        CellText = "Cell3_1"
    },
    new CellViewModel
    {
        RowKey = 1,
        ColumnKey = 3,
        CellText = "Cell1_3"
    },
    new CellViewModel
    {
        RowKey = 3,
        ColumnKey = 'char',
        CellText = "Cell3_2"
    }
}

Then the matrix should look like that:

        column1 column2 column3
row1    Cell1_1         Cell1_3
row2            Cell2_2
row3    Cell3_1 Cell3_2

I have tried with ItemsControl and convert the whole collection to suit the ItemsControl with place-holder...

var list = new List<CellViewModel>{ null, null, cellViewModel };

But I think that is not a good idea. And the place-holder will not reserve the place to hold the whole matrix in good order. Besides ItemsControl has no header for rows and columns.

Any idea or suggestion? With which control should I do that?

Answer 1

You may use a Grid as ItemsPanel in your ItemsControl, and bind the Grid.Column and Grid.Row properties in a Style in ItemContainerStyle. Of course column and row indices are zero-based.

<ItemsControl ItemsSource="{Binding GridCellViewModelCollection}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid IsItemsHost="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Grid.Column" Value="{Binding ColumnKey}"/>
            <Setter Property="Grid.Row" Value="{Binding RowKey}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding CellText}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>