Wpf draw collection of objects inside Grid

Question

In my wpf application i want to create grid view filled with data. This collection is Observable collection of objects

public class BindableProfileData : BindableBase
{

    private ProfileItem _profileModel;
    private BindableDPDataItem _dataModel;

    private int row;
    public int column;
    private int rowSpan;
    private int columnSpan;
    public int Row

    {
        get { return row; }
        set { SetProperty(ref row, value); }
    }

    public int Column
    {
        get { return column; }
        set { SetProperty(ref column, value); }
    }

    public int RowSpan
    {
        get { return rowSpan; }
        set { SetProperty(ref rowSpan, value); }
    }

    public int ColumnSpan
    {
        get { return columnSpan; }
        set { SetProperty(ref columnSpan, value); }
    }



    public string Name
    {
        get
        {
            return "STRING";
        }
    }
}

This is test object but it already contains informations about in which row and column controll should appear and how many columnSpan and rowSpac should take. Whats more every object should choose dataTemplate to draw itself with using binding context of ObservableCollection element.

So in fact ObservableCollection would contain object extending from BindableProfileData.

TextBoxCotainer : BindableProfileData {}
RangeBarContainer : BindableProfileData {}

So far i didn't wrote those templates, but i found something . this

To clearify I would like to be able to draw something like this

For now I'm trying to use this approach: `

<ItemsControl ItemsSource="{Binding SelectedCategory}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid helper:GridHelpers.RowCount="100"
                          helper:GridHelpers.ColumnCount="3"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Column}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

`

But all elements draws at same place on view: image

Could you tell me what am I doing wrong, or maybe there is better approach to bite that problem. Any advice would be helpfull. Thanks.

Answer 1

Declare an ItemContainerStyle like this:

<ItemsControl ItemsSource="{Binding SelectedCategory}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid helper:GridHelpers.RowCount="100"
                  helper:GridHelpers.ColumnCount="3"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Column}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>

    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Grid.Column" Value="{Binding Column}"/>
            <Setter Property="Grid.ColumnSpan" Value="{Binding ColumnSpan}"/>
            <Setter Property="Grid.Row" Value="{Binding Row}"/>
            <Setter Property="Grid.RowSpan" Value="{Binding RowSpan}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>