如何使用类似表格的 DataTemplate 在 UWP ListView 中动态缩放列宽

Posted 2023-03-25

【中文标题】如何使用类似表格的 DataTemplate 在 UWP ListView 中动态缩放列宽

【英文标题】：How to dynamically scale column width in UWP ListView with DataTemplate like table

【发布时间】：2021-09-20 17:10:22

【问题描述】：

我正在使用带有表数据模板的 ListView 开发 UWP 桌面应用程序。当我为列设置固定宽度时，项目与标题对齐，但是当我尝试将宽度更改为“*”以占据网格中的可用宽度时，例如当应用程序最大化时，项目是未对齐。 任何帮助都是最受欢迎的。谢谢。

有效的代码...

<ListView x:Name="lvwTest">
        <ListView.HeaderTemplate>
            <DataTemplate>
                <Grid Padding="12" Margin="3,5,3,5" Background="Gray">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="350"/>
                        <ColumnDefinition Width="350"/>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="Header 1" />
                    <TextBlock Grid.Column="1" Text="Header 2" />
                    <TextBlock Grid.Column="2" Text="Header 3" />
                    <TextBlock Grid.Column="3" Text="Header 4" />
                </Grid>
            </DataTemplate>
        </ListView.HeaderTemplate>
        <ListView.ItemTemplate>
            <DataTemplate x:Name="TableDataTemplate" >
                <Grid Margin="3,5,3,5" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="350"/>
                        <ColumnDefinition Width="350"/>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" TextWrapping="Wrap" FontSize="12" Text="Binding OriginalText" />
                    <TextBlock Grid.Column="1" TextWrapping="Wrap" FontSize="12" Text="Binding TextForAudio"/>
                    <TextBlock Grid.Column="2" FontSize="12" Text="Binding Start"/>
                    <TextBlock Grid.Column="3" FontSize="12" Text="Binding Stop"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

失败的代码...

<ListView x:Name="lvwTest">
        <ListView.HeaderTemplate>
            <DataTemplate>
                <Grid Padding="12" Margin="3,5,3,5" Background="Gray">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="Header 1" />
                    <TextBlock Grid.Column="1" Text="Header 2" />
                    <TextBlock Grid.Column="2" Text="Header 3" />
                    <TextBlock Grid.Column="3" Text="Header 4" />
                </Grid>
            </DataTemplate>
        </ListView.HeaderTemplate>
        <ListView.ItemTemplate>
            <DataTemplate x:Name="TableDataTemplate" >
                <Grid Margin="3,5,3,5" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" TextWrapping="Wrap" FontSize="12" Text="Binding OriginalText" />
                    <TextBlock Grid.Column="1" TextWrapping="Wrap" FontSize="12" Text="Binding TextForAudio"/>
                    <TextBlock Grid.Column="2" FontSize="12" Text="Binding Start"/>
                    <TextBlock Grid.Column="3" FontSize="12" Text="Binding Stop"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

【参考方案1】：

但是当我尝试将宽度更改为“*”以占用网格中的可用宽度时，例如在应用程序最大化时，项目未对齐。

问题是ListViewItem的默认HorizontalContentAlignment不是Stretch，所以ListViewItem内容不会填满listview列。对于这种情况，您可以像下面这样设置ItemContainerStyle 来进行内容拉伸。更多内容请参考ItemContainerStyle文档。

<ListView x:Name="lvwTest">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.HeaderTemplate>
    ......

【讨论】：

完美！谢谢@Nico Zhu。