I'm trying to create a table with a variable number of rows and columns. I'm doing this with an ItemsControl
which has a Grid
as its ItemsPanel
. And I know I can set Grid.Row
and Grid.Column
of each item through its ItemContainerStyle
. But I don't know how to change the number of rows and columns and their sizes when I can't access the Grid by its name.
How can you modify RowDefinitions
or ColumnDefinitions
of a Grid
in run-time without any code-behind using Binding?
This is the XAML code:
<ItemsControl Name="myItemsControl" ItemsSource="{Binding Cells}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid Name="myGrid">
<Grid.RowDefinitions>
<!-- unknown number of rows are added here in run-time -->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!-- known number of columns are added here in run-time -->
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style.../>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
I tried to add some RowDefinition
in code behind but I couldn't find a way to gain access to myGrid
by its name (or any other way) since it is inside an ItemsPanelTemplate
.
I'm wondering if is there any way to programmatically add or modify RowDefinitions
in run-time?
You can use attached properties for a Grid
that modify the RowDefinitions
and ColumnDefinitions
when those properties are set or changed.
It will allow you to write your Grid
like this:
<Grid local:GridHelpers.RowCount="{Binding MaxGridRow}"
local:GridHelpers.ColumnCount="3" />
Then just expose a property from your ViewModel
which returns the largest row number in the Cells
collection.
You can find a detailed implementation of those properties on my blog.