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).

Would it be possible to give all of the TextBlocks a fixed width and use the TextTrimming property? — goobering, May 13 '15 at 14:08
Well it would be better without fixed width as I need to cover many different screen sizes, but I don't see any other way. — benderto, May 13 '15 at 14:46

denis morozov · Accepted Answer · 2015-05-18T14:10:46.800

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>

Thank it works nearly perfect. However the width is off in some cells sometimes, but that is acceptable in my situation, thank you. — benderto, May 18 '15 at 06:55

Dynamic table in universal app

1 Answers1