example - UWP C#- Problemas con la grilla en una lista

uwp vs wpf

Question

Estoy escribiendo una pequeña aplicación en C # para Windows 10, y tengo una vista de lista como la de abajo, que ya está en una grilla.

Sin embargo, la grilla que estoy agregando a la vista de lista no se expande para llenar el espacio, simplemente crece hasta la longitud de los datos contenidos en el campo. ¿Qué estoy haciendo mal? No quiero utilizar campos fijos, prefiero usar una proporción relativa del ancho de la página.

¡Ayuda!

<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

Debe establecer HorizontalContentAlignment dentro de ListView.ItemContainerStyle para ListViewItem para Stretch .

Su XAML completo para ListView será como a continuación.

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

Ver al final, Cómo agregué ItemContainerStyle Targeting Only ListViewItem .

La salida final será

Buena suerte.

Answer 2

Puede ser útil para usted. Yo había usado así-

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