如何使用像 table 这样的 DataTemplate 在 UWP ListView 中动态缩放列宽

Question

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

有效的代码...

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

Answer 1

but when I try to change the width to "*" to occupy the available width in the grid, when the application is maximized, for example, the items are not aligned.

问题是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>
    ......

如何使用像 table 这样的 DataTemplate 在 UWP ListView 中动态缩放列宽

How to dynamically scale column width in UWP ListView with DataTemplate like table

listview

uwp

width

uwp-xaml