Display ItemsControl as a single datagrid row

Question

I have the following ItemsControl that I use to display a collection of viewModels.

<Border>
    <ItemsControl ItemsSource="{Binding MyViewModel.MyCollection}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"  Margin="20"/>
            </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
            <DataTemplate>
                <ContentControl Content="{Binding}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
     </ItemsControl>
</Border>

And the code behind is:

MyCollection = new ObservableCollection<ViewModel>();

foreach(var model in MyModelList)
{
    var myViewModel = new ViewModel(model);

    MyCollection.Add(myViewModel);
}

Now this works fine. BUT now I want to not have an ItemsControl because there are only ever two items that are going to be added to MyCollection ObservableCollection.

I want to add each of the two viewModels into their own column in a single row datagrid in order to display the grid columns differently. (For example when user clicks on one viewModel I want to change the datagird background for only that column)

How do I modify the above to do this?

Can you please suggest a code example with your DataGrid? I'm not sure the ItemsControl code helps in this case... — Amittai Shapira, Dec 11 '17 at 15:15
No I want to remove the ItemsControl. I want to place one View model in datagrid row=0 column=0 and another ViewModel into datagrid row=0 column=1. — Harry Boy, Dec 11 '17 at 15:18

score 2 · Answer 1 · answered Dec 11 '17 at 15:42

Create a class that holds the two view models:

public class RowOfViewModels
{
    public ViewModel ViewModelA { get; set; }
    public ViewModel ViewModelB { get; set; }
}

...and set or bind the ItemsSource property of the DataGrid to collection that contains a single instance of this one:

dataGrid.ItemsSource = new List<RowOfViewModels>(1) { ViewModelA = new ViewModel(), ViewModelB = new ViewModel() };

XAML:

<DataGrid x:Name="dataGrid">
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="1">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Grid>
                        <TextBlock Text="{Binding SomePropertyOfViewModelA}" />
                    </Grid>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTemplateColumn Header="2">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Grid>
                        <TextBlock Text="{Binding SomePropertyOfViewModelB}" />
                    </Grid>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

score 0 · Answer 2 · answered Dec 11 '17 at 15:24

You can create a template for Cell in specific column (see this question), for example:

<DataGridTemplateColumn Header="...">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
           <ContentControl Content="{Binding}"/>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

Display ItemsControl as a single datagrid row

2 Answers2