UWP Änderung ScrollViewers basierend auf Bildschirmgröße

Question

Ich habe ein Layout, wo es zwei Spalten bei einer größeren Bildschirmgröße gibt und wenn die App auf kleinere Größen verkleinert wird, fällt die rechte Spalte unter die linke Spalte. Dies geschieht mithilfe von StateTriggers, um ColumnSpan und Row zu ändern, wie Sie im folgenden Code sehen können.

Das funktioniert gut, außer ich möchte die Spalten einzeln scrollbar, wenn Seite-an-Seite, aber wenn nach oben/unten geschaltet, möchte ich das ganze zusammen scrollen können.

Ich habe eine root ScrollViewer und ScrollViewers um den Inhalt in jeder Spalte. Ich aktiviere/deaktiviere den root scroll basierend auf der Bildschirmgröße, was funktioniert, aber die verschachtelten ScrollViewer funktionieren nicht.

Bitte lassen Sie mich wissen, wenn etwas fehlt, oder vielleicht gibt es eine bessere Möglichkeit, dieses Layout zu machen.

<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: Ich bin noch nicht in der Lage eine Lösung für diese zu finden. Es wäre großartig, wenn jemand etwas zu diesem Ansatz beitragen würde oder einen anderen empfehlen könnte.

Answer 1

Ein ScrollViewer ermöglicht die Anzeige von Inhalten in einem kleineren Bereich als der tatsächlichen Größe. In Ihrem Code wird die Inhaltsgröße des verschachtelten Grids (Column1Grid) automatisch festgelegt, sodass der Scrollviewer nicht angezeigt werden kann. Eine einfache Lösung besteht darin, die Höhe dynamisch entsprechend der Größe des Fensters im Code wie folgt einzustellen:

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; 

    }