UWP根据屏幕大小改变ScrollViewer答案

【问题标题】：UWP change ScrollViewers based on screensizeUWP根据屏幕大小改变ScrollViewer
【发布时间】：2016-12-26 22:39:04
【问题描述】：

我有一个布局，其中有两列屏幕尺寸更宽，当应用程序缩小到更小的尺寸时，右列位于左列下方。这是使用 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>

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

【问题讨论】：

标签： xaml uwp uwp-xaml

【解决方案1】：

ScrollViewer 使内容可以显示在比其实际大小更小的区域中。在您的代码中，嵌套 Grid(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;

   }

【讨论】：