How to fix the ScrollViewer/ListBox height to be the screen height?

Question

I have a Universal Windows Platform application. I have a ScrollViewer which has a button on the top, a ListBox and a button below the ListBox (I know it is not a good practice to have a ListBox inside a ScrollViewer, but this is not my code and I can't modify the implementation). The ScrollViewer's VerticalScrollMode and VerticalScrollBarVisibility are both set to false, so it is not possible to scroll vertically (this is also a requirement).

When the ListBox contains many items, the height of the list becomes bigger than the device height. As a result a part of the ListBox and the Buttons below the list are not available (as the vertical scroll is disabled).

<ScrollViewer>
  <RelativeLayout>
    ...
    <Button name="Button1">
    ...
    </Button>
    <ListBox MinHeight="120">
    </ListBox>
    <Button name="Button2">
    ...
    </Button>
  </RelativeLayout>
</ScrollViewer>

Is there a way to fix the ScrollViewer's height to be the device screen height? And fix the ListBox's height so that the ListBox's height grows only so that the ListBox fits on the space between the Button1 and Button2?

Corcus Corcus · Accepted Answer · 2015-09-02T12:58:13

Your problem is not the scrollviewer's height. It is the listbox that expands to accomodate it's contents (as it should). By limiting the listbox's height you can take care of that.

You can use a grid with 3 rows. Something like this

<Grid>
   <Grid.RowDefinitions>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="*"/>
       <RowDefinition Height="Auto"/>
   </Grid.RowDefinitions>
   <Button x:Name="ButtonTop" Grid.Row=0/>
   <ListView x:Name="DontPutListViewInScrollViewer" Grid.Row=1/>
   <Button x:Name="ButtonBottom" Grid.Row=2/>
</Grid>

Notice the Height defined in the middle row. That means that the listview will take all space that the top and bottom row leave available.

Then put this grid in the ScrollViewer.

How to fix the ScrollViewer/ListBox height to be the screen height?

1 Answers