UWPの変更画面サイズに基づくScrollViewers

Question

私は、より広い画面サイズで2つの列があり、アプリケーションがより小さいサイズにサイズ変更されたときに、右側の列が左側の列の下にあるレイアウトを持っています。これは、以下のコードでわかるように、StateTriggersを使用してColumnSpanとRowを変更して行います。

これはうまくいきますが、横並びに列を個別にスクロールできるようにしたい場合を除き、上/下に切り替えたときにすべてをスクロール可能にしたいと考えています。

私は各列のコンテンツの周りにルートScrollViewerとScrollViewerを持っています。画面のサイズに基づいてルートスクロールを有効/無効にしていますが、これは動作していますが、ネストされたScrollViewerは機能しません。

私に不足しているものがあるかどうか、またはこのレイアウトを行うためのより良い方法があるかどうか教えてください。

<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：私はまだこのための修正を見つけることができませんよ。誰かがこのアプローチについて何らかの意見を持っているか、別のものを推薦することができれば素晴らしいだろう。

Answer 1

ScrollViewerは、コンテンツを実際のサイズよりも小さい領域に表示することができます。コードでは、ネストされたグリッド（Column1Grid）のコンテンツサイズは自動設定されているため、スクロールビューアは表示されません。簡単な解決策は、ウィンドウのサイズに応じて動的に高さを設定することです。

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; 

    }