Dynamic column binding

Question

How can I make dynamic set columns in grid or what grid analog should I use?

I have a List, for example List<List<string>> = {{a},{b,c},{d,e},{f,g,h}} And i need to make from each element a row, and sub-elements should be stretched. like on the picture below. So if there one element, it takes all grid width, if there two sub-elements each takes half of grid's width and so on. I got xaml from here here it is

<Page>
   <Page.Resources>
        <DataTemplate x:Key="DataTemplate_Level2">
                <Button  Content="{Binding}" Margin="1,1,1,1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
        </DataTemplate>

        <DataTemplate x:Key="DataTemplate_Level1">
            <ItemsControl ItemsSource="{Binding}" ItemTemplate="{StaticResource DataTemplate_Level2}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></StackPanel>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </DataTemplate>
    </Page.Resources>

    <Grid>
        <ItemsControl ItemsSource="{Binding}" x:Name="lst" ItemTemplate="{StaticResource DataTemplate_Level1}"/>
    </Grid>
</Page>

But it can't streach sub-elementslike I need, like this:

Flat Eric · Answer 1 · 2016-01-28T18:29:10.783

Try this:

<ItemsControl HorizontalAlignment="Stretch">
  <ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemTemplate>
      <DataTemplate>
        <ItemsControl ItemsSource="{Binding}" HorizontalAlignment="Stretch">
          <ItemsControl.ItemTemplate>
            <DataTemplate>
              <Button Content="{Binding}" Margin="1,1,1,1" VerticalAlignment="Stretch" 
                      HorizontalAlignment="Stretch"/>
            </DataTemplate>
          </ItemsControl.ItemTemplate>
          <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
              <UniformGrid Rows="1" />
            </ItemsPanelTemplate>
          </ItemsControl.ItemsPanel>
        </ItemsControl>
      </DataTemplate>
    </ItemsControl.ItemTemplate>

  </ItemsControl>
</ItemsControl>

And this is how it looks

EDIT:

Since Universal App doesn't support UniformGrid, I created my own panel:

public class UniformGridSingleLine : Panel
{
  protected override Size MeasureOverride(Size availableSize)
  {
    foreach (UIElement child in Children)
      child.Measure(availableSize);

    return new Size(double.IsPositiveInfinity(availableSize.Width) ? 0 : availableSize.Width,
        double.IsPositiveInfinity(availableSize.Height) ? Children.Cast<UIElement>().Max(x => x.DesiredSize.Height) : availableSize.Height);
  }

  protected override Size ArrangeOverride(Size finalSize)
  {
    Size cellSize = new Size(finalSize.Width / Children.Count, finalSize.Height);
    int col = 0;
    foreach (UIElement child in Children)
    {
      child.Arrange(new Rect(new Point(cellSize.Width * col, 0), new Size(cellSize.Width, child.DesiredSize.Height)));
      col++;
    }
    return finalSize;
  }
}

Just replace UniformGrid with UniformGridSingleLine in the XAML above (don't forget the namespace)

Thank you! But there is error "UniformGrid is not supported in a Windows Universal project... are you sure it should work for windows universal app? — MiddleD., Jan 27 '16 at 18:32
Sorry, didn't read it. Thought of WPF. I see if I can find an alternative — Flat Eric, Jan 27 '16 at 18:39
Did not find a solution out-of-the-box but this post could help creating your own panel that behaves like a UniformGrid: http://blogs.microsoft.co.il/pavely/2012/02/07/a-uniformgrid-for-silverlightwindows-phone/ — Flat Eric, Jan 27 '16 at 18:52
I've create such class, but the page stay empty. May be that's because difference in code behind? Can you show me your code behind? — MiddleD., Jan 28 '16 at 08:20

score 0 · Accepted Answer · answered Feb 01 '16 at 13:39

0

Problem resolved by using this post.

answered Feb 01 '16 at 13:39

MiddleD.

315
1
4
21

Link-only answers are generally [frowned upon](http://meta.stackexchange.com/a/8259/204922) on Stack Overflow. In time it is possible for links to atrophy and become unavailable, meaning that your answer is useless to users in the future. It would be best if you could provide the general details of your answer in your actual post, citing your link as a reference. – vaultah Feb 01 '16 at 14:04

Dynamic column binding

2 Answers2