Create multiple visuals per generated item - wpf

Question

Here's the plan. I have an ItemsControl that will have a two columns Grid as its main panel:
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
For each item in the underlying VM, I need to generate a Label that will go into first column, and a Rectangle that will go into the second one. How can I achieve this?
<ItemsControl.ItemTemplate>
<DataTemplate DataType="local:TimeSlotVM">
???
</DataTemplate>
</ItemsControl.ItemTemplate>

Answer 1

As you want to use Grid.Row attached property, then assign this attached property to the parent ContentPresenter by the GridHelper.
And the visual tree will be like that:
Grid
-ContentPresenter Grid.Row="1"
-Gird
-ContentPresenter Grid.Row="0"
-Gird
-ContentPresenter Grid.Row="2"
-Gird
...
GridHelper.cs
public class GridHelper
{
public static readonly DependencyProperty GridRowProperty =
DependencyProperty.RegisterAttached("GridRow", typeof(bool), typeof(GridHelper),
new PropertyMetadata(false, new PropertyChangedCallback(OnGridRowPropertyChanged)));
public static bool GetGridRow(DependencyObject d)
{
return (bool)d.GetValue(GridRowProperty);
}
public static void SetGridRow(DependencyObject d, bool value)
{
d.SetValue(GridRowProperty, value);
}
private static void OnGridRowPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
Grid grid = d as Grid;
bool gridRow = (bool)e.NewValue;
if (gridRow)
{
// construct the required row definitions
grid.LayoutUpdated += (s, e2) =>
{
// iterate over any new content presenters (i.e. instances of our DataTemplate)
// that have been added to the grid
var presenters = grid.Children.OfType<ContentPresenter>().ToList();
foreach (var presenter in presenters)
{
// the child of each DataTemplate
var itemGrid = VisualTreeHelper.GetChild(presenter, 0) as Grid;
if (itemGrid != null)
{
Grid.SetRow(presenter, Grid.GetRow(itemGrid));
if (Grid.GetRow(itemGrid) > grid.RowDefinitions.Count - 1)
{
presenter.Visibility = Visibility.Collapsed;
}
}
}
};
}
}
}
XAML
<ItemsControl ItemsSource="{Binding ItemList}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid Name="outer" local:GridHelper.GridRow="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
...
</Grid.RowDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Grid.Row="{Binding Row}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="{Binding Field}" />
<Rectangle Grid.Row="{Binding Row}" Grid.Column="1" Fill="Blue" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Answer 2

What about using a UniformGrid and a Collection of 24 Empty TimeSlotVM's and then insert your TimeSlotVM at the desired postion in the Collection like this :
in your VM :
TimeSlotCollection=new ObservableCollection<TimeSlotVM>(new TimeSlotVM[24]);
TimeSlotCollection.Insert(10,new TimeSlotVM());
TimeSlotCollection.Insert(5, new TimeSlotVM());
and in your View :
<Grid>
<Grid.Resources>
<DataTemplate DataType="{x:Type local:TimeSlotVM}">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="{Binding BindingField}" />
<Rectangle Grid.Column="1" Fill="Blue" />
</Grid>
</DataTemplate>
</Grid.Resources>
<ItemsControl ItemsSource="{Binding TimeSlotCollection}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="24"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>