title: Display ItemsControl as a single datagrid row
body: <p>I have the following ItemsControl that I use to display a collection of viewModels.</p>
  
  <pre><code>&lt;Border&gt;
      &lt;ItemsControl ItemsSource="{Binding MyViewModel.MyCollection}"&gt;
          &lt;ItemsControl.ItemsPanel&gt;
              &lt;ItemsPanelTemplate&gt;
                  &lt;StackPanel Orientation="Horizontal" HorizontalAlignment="Center"  Margin="20"/&gt;
              &lt;/ItemsPanelTemplate&gt;
              &lt;/ItemsControl.ItemsPanel&gt;
              &lt;ItemsControl.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;ContentControl Content="{Binding}"/&gt;
              &lt;/DataTemplate&gt;
          &lt;/ItemsControl.ItemTemplate&gt;
       &lt;/ItemsControl&gt;
  &lt;/Border&gt;
  </code></pre>
  
  <p>And the code behind is:</p>
  
  <pre><code>MyCollection = new ObservableCollection&lt;ViewModel&gt;();
  
  foreach(var model in MyModelList)
  {
      var myViewModel = new ViewModel(model);
  
      MyCollection.Add(myViewModel);
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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)</p>
  
  <p>How do I modify the above to do this?</p>