UWP change ScrollViewers based on screensize - xaml

Question

I have a layout where there are two columns at wider screen size and when the app is resized down to smaller sizes the right column falls under the left column. This is done using StateTriggers to change ColumnSpan and Row, as you can see in the code below.
This is working well, except I would like to have the columns individually scrollable when side-by-side, but when switched to top/bottom, I want the whole thing to be scrollable together.
I've got a root ScrollViewer and ScrollViewers around the content in each column. I'm enabling/disabling the root scroll based on screen size, which is working, but the nested ScrollViewers aren't working.
Please let me know if there's something I'm missing or maybe there's a better way to do this layout.
<Page
x:Class="ScrollTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ScrollTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="RootScrollViewer.VerticalScrollMode" Value="Enabled" />
<Setter Target="RootScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Target="Column1Grid.(Grid.ColumnSpan)" Value="2" />
<Setter Target="Column2Grid.(Grid.ColumnSpan)" Value="2" />
<Setter Target="Column2Grid.(Grid.Row)" Value="1" />
<Setter Target="Column2Grid.(Grid.Column)" Value="0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="WideView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="860" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="RootScrollViewer.VerticalScrollMode" Value="Disabled" />
<Setter Target="RootScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
<Setter Target="Column1Grid.(Grid.ColumnSpan)" Value="1" />
<Setter Target="Column2Grid.(Grid.ColumnSpan)" Value="1" />
<Setter Target="Column2Grid.(Grid.Row)" Value="0" />
<Setter Target="Column2Grid.(Grid.Column)" Value="1" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ScrollViewer x:Name="RootScrollViewer" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="Column1Grid" Grid.Column="0" Background="AliceBlue">
<ScrollViewer VerticalScrollMode="Auto" VerticalScrollBarVisibility="Auto">
<Grid>
<TextBlock FontSize="90" Foreground="Black" TextWrapping="Wrap">Column 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</TextBlock>
</Grid>
</ScrollViewer>
</Grid>
<Grid x:Name="Column2Grid" Grid.Column="1" Background="Aqua">
<ScrollViewer VerticalScrollMode="Auto" VerticalScrollBarVisibility="Auto">
<TextBlock FontSize="90" Foreground="Black" TextWrapping="Wrap">Column 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</TextBlock>
</ScrollViewer>
</Grid>
</Grid>
</ScrollViewer>
</Grid>
UPDATE: I'm still unable to find a fix for this. It would be great if someone has some input on this approach or could recommend a different one.

Answer 1

A ScrollViewer enables content to be displayed in a smaller area than its actual size. In your code, the content size of the nested Grid(Column1Grid) is auto setting so the scrollviewer cannot appear. A simple solution is to set the height dynamically according to the windows's size in code behind like follows:
public CChangeView()
{
this.InitializeComponent();
Window.Current.SizeChanged += Current_SizeChanged;
}
private void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
{
Column1Grid.Height = Window.Current.Bounds.Height;
Column2Grid.Height = Window.Current.Bounds.Height;
}