Dynamic table in universal app

Question

I am developing universal app for windows phone 8.1/windows 8.1. I am using MVVM pattern. I have table with dynamic number of stackpanels that are bind to source in view model. One stackpanel is one row in the table. How can I make items in stack panels same width? I know about IsSharedSizeScope, but this is not available in grids in universal app.

<ItemsControl Grid.Column="1" HorizontalAlignment="Stretch" 
            ItemsSource="{Binding PowerMaxiTableSource0, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Border Background="{Binding IsEnabled, Converter={StaticResource BackgroundConverter}}">
                    <TextBlock Text="{Binding Text0}" />
                </Border>
                <Border Background="{Binding IsEnabled, Converter={StaticResource BackgroundConverter}}">
                    <TextBlock Text="{Binding Text1}" />
                </Border>
                <Border Background="{Binding IsEnabled, Converter={StaticResource BackgroundConverter}}">
                    <TextBlock Text="{Binding Text2}" />
                </Border>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

Because this is table I tried using grid instead of stackpanels, but I couldn't make it work. I tried this solution wpf grid with dynamic columns. But I ended up with items clustered in row 0, column 0 even with correct values in bind properties.

Any help would be much appreciated (even solution with grid).

Answer 1

StackPanels width is driven by its children. It looks like there are 3 children in the StackPanel, meaning they are not dynamically generated. You state that only the number of stack panels changes. If you are not opposed to the Grid use instead of your StackPanel, than the following code will work because the Grid will automatically will stretch (take all allowable width) and trickle down that width to it's children dynamically if you create columns who's width is specified as percentage:

<ItemsControl HorizontalAlignment="Stretch">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="33*"/>
                        <ColumnDefinition Width="33*"/>
                        <ColumnDefinition Width="33*"/>
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0" Background="{Binding IsEnabled, Converter={StaticResource BackgroundConverter}}">
                        <TextBlock Text="{Binding Text0}" />
                    </Border>
                    <Border Grid.Column="1" Background="{Binding IsEnabled, Converter={StaticResource BackgroundConverter}}">
                        <TextBlock Text="{Binding Text1}" />
                    </Border>
                    <Border Grid.Column="2" Background="{Binding IsEnabled, Converter={StaticResource BackgroundConverter}}">
                        <TextBlock Text="{Binding Text2}" />
                    </Border>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>