Scrolling Listview inside a grid - UWP - xaml

Question

I want to show a listview and an image on a uwp page.Items to listview are adding dynamically. When loading page user can see the full listview. and if he clicks any of it's row the list view will filter based on that clicked row.Then user can see filtered listview and an image below the listview. If the user clicks on image it will again show the full listview without image. Now my issue is I want to display listview with scroll view(scrolling should work when listview height reaches end of screen). and if the user clicks on any row of listview,the height of image should fill from end of filtered listview to bottom of screen.
I have done like below.
<Grid HorizontalAlignment="Stretch" >
<Grid.RowDefinitions >
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ListView x:Name="ItemListView" Margin="0,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="Auto" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid >
//binding items here
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Border Background="Green" Grid.Row="1" x:Name="Bg" Tapped="Bg_TappedAsync" Visibility="Collapsed">
<TextBlock x:Uid="txt_string1" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="DetectFromContent" FontSize="15" MaxLines="4" FontFamily="Calibri" FontStyle="Italic"/>
</Border>
</Grid>
When I did like above both list view and image(in code it is a Border) takes half half portion of screen.So when showing filtered listview (it may have only one row) a gap is occurring between listview and image. I want to fill the image with remaining height of screen. How can I achieve it? I don't want to set MaxHeight of listview. Because it should run on various size of devices

Answer 1

When you create two rows with a * for RowDefinition.Height, you will get two equally sized Grid rows, which is the behavior you are seeing. A star gives the row all space that is left after evaluating all rows with Auto and hardcoded pixel height. When there are multiple rows with a star, they will divide the remaining space equally. You can also use values like 2* to say that the row should have twice the height of a * row, so you can create "fractions" like 2:1.
In your case however, you might want to rather use Auto for the second row's Height. Auto will give the row the size it actually needs, so when the image is not displayed, it will effectively have zero height. When the image is displayed, it will be as high as the image and the list will take up the rest of the Grid height thanks to the *.