Set ScrollViewer Height With Screen Height In Windows Phone

Frankly, this gave me a ton of a headache. I thought when using the Grid container’s RowDefinition attribute’s height to auto, it will set the height according to the screen’s height.

As I found out, it does not. What happened was that I placed component after component and the Grid‘s height kept on expanding to the point that its height went beyond that of the screen’s overall height.

Naturally, I attached a ScrollViewer so that I could scroll down to see the other contents but what happened was that once I released my finger upon scrolling down, it snapped back to its original position (top).

I read in forums that setting the ScrollViewer height should do the trick but that even that is not a viable solution since who knows in the future Microsoft may have smart phones with different screen size.

My XAML looks like this. Grid > Grid > ScrollViewer > contents.

Now, the solution is not really to place any static height within the ScrollViewer but to make sure that your root Grid has a height value of its RowDefinition to * and not auto.

See example.

<Grid x:Name="LayoutRoot">
	<Grid.RowDefinitions>
		<RowDefinition Height="*"/>
	</Grid.RowDefinitions>   
 
	<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
		<ScrollViewer>
			...
		</ScrollViewer>
	</Grid>
</Grid>

Now you can scroll to the bottom most part of the ScrollViewer.