UWP C# - Problems with Grid in a Listview

问题

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.

Help!

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

回答1:

You need to set the HorizontalContentAlignment inside ListView.ItemContainerStyle for ListViewItem to Stretch.

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>

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

Final Output will be

Good Luck.

回答2:

Might be it will helpful for you. I had used like that-

<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto">
                            <StackPanel>
                                <ListView x:Name="UserMessageList">
                                    <ListView.ItemTemplate>
                                        <DataTemplate x:DataType="local1:MessageModel">
                                            <StackPanel>

                                                //Add your conrole

                                            </StackPanel>

                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </StackPanel>
                        </ScrollViewer>

来源：https://stackoverflow.com/questions/43396727/uwp-c-sharp-problems-with-grid-in-a-listview