UWP C# - 列表视图中的网格问题 [英] UWP C# - Problems with Grid in a Listview

问题描述

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

I am writing a little app in C# for windows 10, and I have a listview as below, which is already in a grid.

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

However the grid I am adding to the listview doesn't expand out to fill the space, it is just grows as wide as the length of the data contained in the field bound to it. What am I doing wrong? I don't want to use fixed fields, I'd prefer to use a relative proportion of the page width.

帮助！

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

推荐答案

你需要在ListView.ItemContainerStyle里面为ListViewItem设置Horizo​​ntalContentAlignment拉伸.

ListView 的完整 XAML 如下所示.

Your Full XAML For ListView will be like below.

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

最后看，我是如何添加 ItemContainerStyle Targeting Only ListViewItem 的.

See in the end, How I added ItemContainerStyle Targeting Only ListViewItem.

最终输出将是

祝你好运.

这篇关于UWP C# - 列表视图中的网格问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！