Изменение UWP ScrollViewers на основе скриншотов

Question

У меня есть макет, где есть два столбца с более широким размером экрана, и когда приложение изменяется до меньших размеров, правый столбец попадает под левый столбец. Это делается с помощью StateTriggers для изменения ColumnSpan и Row, как вы можете видеть в приведенном ниже коде.

Это хорошо работает, за исключением того, что я хотел бы, чтобы столбцы были индивидуально прокручиваемыми, когда бок о бок, но при переключении на верх/низ, я хочу, чтобы все это было прокручиваемо вместе.

У меня есть корневой ScrollViewer и ScrollViewers вокруг содержимого в каждом столбце. Я включаю/выключаю корневую прокрутку на основе размера экрана, который работает, но вложенные ScrollViewers не работают.

Пожалуйста, дайте мне знать, если что-то мне не хватает или, возможно, есть лучший способ сделать этот макет.

<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

A ScrollViewer позволяет отображать контент в меньшей области, чем его фактический размер. В вашем коде размер содержимого вложенной сетки (Column1Grid) является автоматической настройкой, поэтому scrollviewer не может отображаться. Простым решением является динамическая установка высоты в соответствии с размером окна в коде, как показано ниже:

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; 

    }