Bind dynamically number of RowDefinition to a Grid in an ItemsPanelTemplate

Question

I have written xaml for display video files in a grid with 3 column. I have used xaml as below:

     <ItemsControl  Name="icTodoList" Grid.IsSharedSizeScope="True" ItemsSource="{Binding items}" Grid.Row="0" Grid.Column="0" >
                        <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate >
                                    <Grid  x:Name="icTooList" Margin="100,0,100,0" Style="{Binding Path=Style}">
                                    <Grid.ColumnDefinitions>
                                        <!--Whatever I do I can't get the screen to resize and the cols to have the same width-->
                                        <ColumnDefinition Width="Auto" SharedSizeGroup="A" />
                                        <ColumnDefinition Width="Auto" SharedSizeGroup="A" />
                                        <ColumnDefinition Width="Auto" SharedSizeGroup="A" />
                                    </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
                                    </Grid.RowDefinitions>
                                </Grid>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Grid Margin="40,0,40,30">
                                    <TextBlock HorizontalAlignment="Center" Margin="0,0,0,0">
                                           <Hyperlink TextDecorations="None" NavigateUri="{Binding UriPath}" RequestNavigate="Hyperlink_RequestNavigate"
                                                      CommandParameter="{Binding ElementName=myImg}">
                                                            <Image Width="120" Height="120"  x:Name="myImg" Source="{Binding Source}" Margin="5"/>
                                           </Hyperlink>
                                    </TextBlock>
                                    <TextBlock Margin="0,120,0,0" HorizontalAlignment="Center">
                                                <TextBlock FontSize="20px" Text="{Binding Title}" Foreground="white"></TextBlock>
                                        </TextBlock>
                                </Grid>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                        <ItemsControl.ItemContainerStyle>
                            <Style>
                                <Style.Setters>
                                    <Setter Property="Grid.Row" Value="{Binding GridRow}" />
                                    <Setter Property="Grid.Column" Value="{Binding GridColumn}" />
                                </Style.Setters>
                            </Style>
                        </ItemsControl.ItemContainerStyle>
                    </ItemsControl>

Here I have used RowDefinition as below

<Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
                                    </Grid.RowDefinitions>

I have already found numbers of RowDefinition need in backend as below

 void setaligned()
            {
                int currentColumn = 0;
                int currentRow = 0;

                foreach (BindingFilesContent checkBoxItem in items)
                {
                    checkBoxItem.GridColumn = currentColumn;
                    checkBoxItem.GridRow = currentRow;
                    if (currentColumn != 2)
                    {
                        currentColumn++;
                    }
                    else
                    {
                        currentRow++;
                        currentColumn = 0;
                    }
            }
}

But I need to bind this RowDefinition dynamically in Grid. I have tried with following one but not working for me. Commented on below question no one replied.

How can I dynamically add a RowDefinition to a Grid in an ItemsPanelTemplate?

I think that the response you linked is the one you need, just follow the official guide to attached properties linked in it. — Seididieci, Apr 26 '17 at 07:06
i dont know how to write.. i need to add RowDefinition with multiple times based on rowcount. — arun d, Apr 26 '17 at 07:24
How about using `` as panel instead of tinkering with the grid? — grek40, Apr 26 '17 at 08:07
Always remember it's good to include your current approach (as you did) but also ask the question about what you actually want (you wanted specific layout but asked about dynamic grid row definitions). — grek40, Apr 26 '17 at 10:31

arun d · Accepted Answer · 2017-04-26T10:31:17.480

1

I have used the UniformGrid and bind the rows, find below code to bind rows dynamically.

Xaml:

 <UniformGrid Columns="3" Rows="{Binding RowCount}">
  </UniformGrid>

C#

List<PartList> items1 = new List<PartList>();

 int currentRow = 10;

 items1.Add(new PartList() { RowCount = currentRow });

public class PartList
{
            public int RowCount { get; set; }
}

edited Apr 26 '17 at 10:31

answered Apr 26 '17 at 10:24

arun d

229
1
3
10

Bind dynamically number of RowDefinition to a Grid in an ItemsPanelTemplate

1 Answers1

Linked