通用应用中的动态 table

Question

我正在为 windows phone 8.1/windows 8.1 开发通用应用程序。我正在使用 MVVM 模式。我有 table 动态数量的堆栈面板绑定到视图模型中的源。一个堆栈面板是 table 中的一行。如何使堆叠面板中的项目宽度相同？我知道 IsSharedSizeScope，但这在通用应用程序的网格中不可用。

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

因为这是 table 我尝试使用网格而不是堆栈面板，但我无法让它工作。我尝试了这个解决方案 wpf grid with dynamic columns。但我最终得到的项目聚集在第 0 行、第 0 列，即使绑定属性中的值正确。

任何帮助将不胜感激（即使是网格解决方案）。

Answer 1

StackPanels 宽度由其 children 驱动。看起来 StackPanel 中有 3 个 children，这意味着它们不是动态生成的。您声明只有堆栈面板的数量发生变化。如果您不反对使用 Grid 而不是您的 StackPanel，那么下面的代码将起作用，因为 Grid 将自动拉伸（占用所有允许的宽度）并逐渐减小该宽度如果您创建宽度指定为百分比的列，它会动态地 children:

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

通用应用中的动态 table

Dynamic table in universal app

c#

wpf

mvvm

stackpanel

win-universal-app