How do you bind to a Grid in a ItemsPanel? - binding

Question

I am building a custom control based on ItemsControl. I am trying to bind to the grid contained in the ItemsPanelTemplate. I cannot seem to get the binding correct. Any help is appreciated!
<local:MyItemsControl Height="500" Width="500" Margin="50" gRow="1">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid Background="Red" >
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</local:MyItemsControl>
Here is my class:
public class MyItemsControl : ItemsControl
{
public MyItemsControl()
{
this.DefaultStyleKey = typeof(ItemsControl);
}
public int gRow { get; set; }
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
base.PrepareContainerForItemOverride(element, item);
if (element is FrameworkElement)
{
(element as ContentPresenter).SetBinding(Grid.RowProperty, new Binding {Source = item, Path = new PropertyPath("gRow")});
}
}
}

Answer 1

You sure can!
Using this XAML:
<local:MyItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Text}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Grid.RowSpan="{Binding RowSpan}"
Grid.ColumnSpan="{Binding ColumnSpan}"
Grid.Row="{Binding Row}"
Grid.Column="{Binding Column}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<local:MyItem Text="One" Row="0" RowSpan="1" Column="0" ColumnSpan="1" />
<local:MyItem Text="Two" Row="1" RowSpan="1" Column="0" ColumnSpan="1" />
<local:MyItem Text="Three" Row="0" RowSpan="1" Column="1" ColumnSpan="1" />
<local:MyItem Text="Four" Row="1" RowSpan="1" Column="1" ColumnSpan="1" />
</local:MyItemsControl>
Use this code:
public class MyItem
{
public string Text { get; set; }
public int Row { get; set; }
public int RowSpan { get; set; }
public int Column { get; set; }
public int ColumnSpan { get; set; }
public override string ToString()
{
return Text;
}
}
public class MyItemsControl : ItemsControl
{
protected override DependencyObject GetContainerForItemOverride()
{
var container = base.GetContainerForItemOverride() as FrameworkElement;
if (container == null) return container;
var content = ItemTemplate.LoadContent() as FrameworkElement;
if (content == null) return container;
// sync the container grid dependency properties with the content
var binding = content.GetBindingExpression(Grid.RowProperty);
if (binding != null)
container.SetBinding(Grid.RowProperty, content.GetBindingExpression(Grid.RowProperty).ParentBinding);
binding = content.GetBindingExpression(Grid.RowSpanProperty);
if (binding != null)
container.SetBinding(Grid.RowSpanProperty, binding.ParentBinding);
binding = content.GetBindingExpression(Grid.ColumnProperty);
if (binding != null)
container.SetBinding(Grid.ColumnProperty, binding.ParentBinding);
binding = content.GetBindingExpression(Grid.ColumnSpanProperty);
if (binding != null)
container.SetBinding(Grid.ColumnSpanProperty, binding.ParentBinding);
return container;
}
}
Best of luck!