UWP C# - 列表视图中的网格问题

Question

我正在用 C# 为 Windows 10 编写一个小应用程序，我有一个如下所示的列表视图，它已经在一个网格中。

但是，我添加到列表视图中的网格不会扩展以填充空间，它只会与绑定到它的字段中包含的数据的长度一样宽。我究竟做错了什么？我不想使用固定字段，我更喜欢使用页面宽度的相对比例。

帮助！

<Grid x:Name="RootGrid" Margin="5" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="FolderMate" Style="{StaticResource SampleHeaderTextStyle}"/>

        <Button x:Name="GetFilesAndFoldersButton" 
                Grid.Row="1"
                Grid.Column="0"
                Content="Get files and folders" 
                Click="GetFilesAndFoldersButton_Click" 
                Margin="0,10,0,10"/>
        <TextBlock x:Name="FileInfo"
                Grid.Row="1"
                Grid.Column="1"
                Grid.ColumnSpan="3"                      
                VerticalAlignment="Center" 
                Margin="10" 
                Foreground="Green"/>
        <Button x:Name="ResetButton"
                Grid.Row="1"
                Grid.Column="5"
                Content="reset"
                HorizontalAlignment="Right"
                Click="ResetButton_Click" 
                Margin="0,10,10,0"/>

        <!--<ScrollViewer VerticalScrollMode="Auto" 
                      VerticalScrollBarVisibility="Auto" 
                      Grid.Row="2"
                      Grid.ColumnSpan="5"
                      BorderBrush="Black"
                      BorderThickness="2"
                      Background="Chartreuse" 
                      Margin="0,5,0,5">-->
            <ListView x:Name="ThisList" 
                      Grid.Row="2"
                      Grid.ColumnSpan="5"
                      Background="LightBlue"
                      Margin="5"
                      IsItemClickEnabled="True"  
                      ItemClick="ThisList_ItemClick">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid BorderThickness="1" BorderBrush="Red" >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="3*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <Border Background="Aquamarine" Grid.Column="0">
                                <SymbolIcon Symbol="Folder" HorizontalAlignment="Center" Margin="15 0"/>
                            </Border>
                            <Border Background="Yellow" Grid.Column="1">
                                <TextBlock Text="{Binding FName}" Margin="10" />
                            </Border>
                            <Border Background="Cyan" Grid.Column="2">
                                <TextBlock Text="{Binding FTime}" Margin="10"/>
                            </Border>
                            <Border Background="Tomato" Grid.Column="3">
                                <TextBlock Text="{Binding FSize}" HorizontalAlignment="Right" Margin="10"/>
                            </Border>
                        </Grid>

                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        <!--</ScrollViewer>-->
    </Grid>

Answer 1

您需要将HorizontalContentAlignment内部设置ListView.ItemContainerStyle为ListViewItemto Stretch。

您的完整 XAML ForListView将如下所示。

<ListView x:Name="ThisList" 
              Grid.Row="2"
              Grid.ColumnSpan="5"
              Background="LightBlue"
              Margin="5"
              ItemsSource="{Binding data}"
              IsItemClickEnabled="True"  
              ItemClick="ThisList_ItemClick">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid BorderThickness="1" BorderBrush="Red" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="3*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Border Background="Aquamarine" Grid.Column="0">
                    <SymbolIcon Symbol="Folder" HorizontalAlignment="Center" Margin="15 0"/>
                </Border>
                <Border Background="Yellow" Grid.Column="1">
                    <TextBlock Text="{Binding FName}" Margin="10" />
                </Border>
                <Border Background="Cyan" Grid.Column="2">
                    <TextBlock Text="{Binding FTime}" Margin="10"/>
                </Border>
                <Border Background="Tomato" Grid.Column="3">
                    <TextBlock Text="{Binding FSize}" HorizontalAlignment="Right" Margin="10"/>
                </Border>
            </Grid>

        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

见最后，我是如何添加ItemContainerStyleTargeting Only 的ListViewItem。

最终输出将是

祝你好运。