How to dynamically add RowDefinition or ColumnDefinition to a Grid with binding?

Question

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.

---

Question:

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?

Solution 1

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.

Solution 2

If you had access to the grid from code-behind you could do this:

var rowDefinition = new RowDefinition();
rowDefinition.Height = GridLength.Auto;
grid.RowDefinitions.Add(rowDefinition);

Comments

[Bizhan]

This won't help. I can't access myGrid by its name from within code.

[Bizhan]

Thanks a lot. I feel relieved:) and by the way there was a tiny mistake in the last two methods. I changed them to : GetStarColumns(grid).Split(',');

[Rachel]

@Bizz Thank you :) The first time I copied the code to wordpress it got rid of all special characters and I must have replaced the single quotes with double quotes by mistake. The extra .ToString() was there because the star columns/rows used to be an integer before I needed multiple star columns one day and decided to update it to a string

[Xavier Huppé]

You can't access whatever it is when it is the ItemPanelTemplate of an ItemsControl. @WtFudgE you are probably doing something else than that.

[arun d]

How defined local in xaml?

[Rachel]

@arund Usually something like xmlns:local="clr-namespace:MyProjectNamespace" in the <Window> tag. It tells WPF to use the term "local" as a shortcut to point to the XML NameSpace MyProjectNamespace

[arun d]

Thanks for update @Rachel ..i have used UniformGrid instead of Grid and binded rows. [link]stackoverflow.com/questions/43627127/…