ListView Vertical Stretch in Win UI 3-CodePudding

I am struggling with the XAML below to make the listView stretch vertically Grid row 2 when the form is resized while leaving the progress bar and infor bar anchored to the bottom of the form. Can anyone give me a point in the right direction to get resolve the issue?

XAML:

<Grid Margin="6">
    <Grid.RowDefinitions>
        <RowDefinition Height="300"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>

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

    <StackPanel Orientation="Vertical">


        <CommandBar Background="Transparent" 
            HorizontalAlignment="Left"
            IsOpen="False" 
            DefaultLabelPosition="Right">
            <AppBarButton Icon="AttachCamera" Label="Find Import Sources" x:Name="findSourcesButton"/>
            <AppBarButton Icon="Import" x:Name="importButton" Label="Import Selected Items"/>
        </CommandBar>

        <ComboBox Header="Sources:" x:Name="sourcesComboBox" Width="500"/>
        <DatePicker Header="Import Date:      Select the required date to start the import from." Margin="0,20,0,10" />

        <TextBlock Text="Files:" Margin="0,20,0,10" />
        <ListView x:Name="fileListView"  
                VerticalAlignment="Stretch"
                MinHeight="300"
                Width="500"
                SelectionMode="None"
                BorderBrush="#FF858585"   
                BorderThickness="1"
                ScrollViewer.VerticalScrollBarVisibility="Visible">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.05*"/>
                            <ColumnDefinition Width="0.20*"/>
                            <ColumnDefinition Width="0.75*"/>
                        </Grid.ColumnDefinitions>
                        <!--<CheckBox Grid.Column="0" IsChecked="{Binding ImportableItem.IsSelected, Mode=TwoWay}" />
                        --><!-- Click="CheckBox_Click"/>--><!--
                        <Image Grid.Column="1" Source="{Binding Thumbnail}" Width="120" Height="120" Stretch="Uniform"/>
                        <TextBlock Grid.Column="2" Text="{Binding ImportableItem.Name}" VerticalAlignment="Center" Margin="10,0"/>-->
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackPanel>
    
    <ProgressBar x:Name="progressBar" SmallChange="0.01" LargeChange="0.1" Maximum="1" MinHeight="100" Grid.Row="2" Grid.ColumnSpan="3"/>
    <InfoBar
            Grid.Row="2"
            Grid.ColumnSpan="3"
            IsOpen="True"
            IsIconVisible="True"
            IsClosable="True"
            Title="Title"
            Message="Message display here." />
</Grid>

CodePudding user response：

I managed to fix it. The problem probably was, that the stackpanel did not adjust its height, so I removed the ListView from it and put it directly in the grid at Grid.Row="1".

Now the first row in the grid will adjust its height to the rendered height of the stackpanel in it. Not more not less thats because it is set to auto. The third row of the grid has the predifined height of 100 and the rest of the screen will be filled with the listview, thats why its height is defined with a "*".

Here is also the meaning of the height properties:

Star (*) : It will take the remaining space when Auto and fixed sized are filled.

<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="2*" />
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>

From: https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.grid.rowdefinitions?view=winrt-22621

This is the changed code:

<Grid Margin="6">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>

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

    <StackPanel Grid.Row="0" Orientation="Vertical">
        <CommandBar Background="Transparent" 
        HorizontalAlignment="Left"
        IsOpen="False" 
        DefaultLabelPosition="Right">
            <AppBarButton Icon="AttachCamera" Label="Find Import Sources" x:Name="findSourcesButton"/>
            <AppBarButton Icon="Import" x:Name="importButton" Label="Import Selected Items"/>
        </CommandBar>

        <ComboBox Header="Sources:" x:Name="sourcesComboBox" Width="500"/>
        <DatePicker Header="Import Date:      Select the required date to start the import from." Margin="0,20,0,10" />

        <TextBlock Text="Files:" Margin="0,20,0,10" />
    </StackPanel>
    
    <ListView Grid.Row="1" x:Name="fileListView"  
            SelectionMode="None"
              VerticalAlignment="Stretch"
            BorderBrush="#FF858585"   
            BorderThickness="1"
            ScrollViewer.VerticalScrollBarVisibility="Visible">
            <ListViewItem Content="Hello"/>
            <ListViewItem Content="Hello"/>
            <ListViewItem Content="Hello"/>
            <ListViewItem Content="Hello"/>
        </ListView>

    <ProgressBar x:Name="progressBar" SmallChange="0.01" LargeChange="0.1" Maximum="1" MinHeight="100" Grid.Row="2" Grid.ColumnSpan="3"/>
    <InfoBar
        Grid.Row="2"
        Grid.ColumnSpan="3"
        IsOpen="True"
        IsIconVisible="True"
        IsClosable="True"
        Title="Title"
        Message="Message display here." />