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>

更新：我仍然无法找到解决方法。如果有人对这种方法有一些意见或者可以推荐不同的方法，那就太好了。

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;

   }

UWP根据屏幕尺寸更改ScrollViewers

1 个答案: