当屏幕高度减小时，如何在 XAML (UWP) 中垂直滚动整个页面？

Question

我正在开发 Windows 通用平台应用程序。我有关于屏幕的查询 height.I 使用视觉状态来管理屏幕宽度，因此应用程序可以响应，但是当屏幕高度降低时页面内容被剪切并且不正确 display.So 我只是检查了 windows 应用程序并了解了滚动查看器，但我不知道我在哪里放置滚动查看器，因此该应用程序将正确地 work.I 使用 MasterDetail 布局。

我附上了我的应用程序的屏幕截图，以便您正确理解问题，我还附上了代码。

代码：是示例代码，不是完整代码。

<Grid Background="White" x:Name="maingrid">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="PageSizeStatesGroup"
                          CurrentStateChanged="OnCurrentStateChanged">
            <VisualState x:Name="MediumState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720"  />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MasterColumn.Width" Value="350" />
                    <Setter Target="DetailColumn.Width" Value="*"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="WideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1024"  />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MasterColumn.Width" Value="600" />
                    <Setter Target="DetailColumn.Width" Value="*"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="MobileState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="320"  />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MasterColumn.Width" Value="0"/>
                    <Setter Target="DetailColumn.Width" Value="*"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="MasterColumn" Width="600" />
            <ColumnDefinition x:Name="DetailColumn"  Width="*" />
        </Grid.ColumnDefinitions>

        <StackPanel x:Name="titlePanel" Grid.Row="0" Grid.Column="0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Image x:Name="img_head" Grid.Column="0"  Stretch="Fill" Height="47" Margin="0,0,10,0"/>

                <StackPanel x:Name="Logo_txt_pnl" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left">
                    <TextBlock x:Name="Customer_title" .... VerticalAlignment="Center"  HorizontalAlignment="Center"/>
                </StackPanel>

                <Image Grid.Row="0"  x:Name="line_dashboard" Grid.ColumnSpan="2"   VerticalAlignment="Bottom" Height="8" />
            </Grid>
        </StackPanel>

        <StackPanel Name="life_time_pnl" Grid.Row="1" Grid.Column="0">
            <!--Code for the grid and all-->
        </StackPanel>

        <StackPanel x:Name="sales_report_pnl" Grid.Row="0" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <!--coding here-->
        </StackPanel>

        <StackPanel x:Name="stackReport"  Grid.Row="1" Grid.Column="1" VerticalAlignment="Top" >
            <!--Report Coding here-->
        </StackPanel>

        <StackPanel x:Name="stackLineChart" Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" Margin="50,0,20,50"  HorizontalAlignment="Stretch">
            <!--Chart coding-->
        </StackPanel>

        <StackPanel x:Name="chartReportpnl" Orientation="Vertical" Grid.Row="1" Grid.Column="1"  VerticalAlignment="Bottom" Margin="0,0,0,2">
            <!--Report as all-->
        </StackPanel>

    </Grid>
</Grid>

所以建议我如何定义滚动查看器，以便应用程序根据高度进行响应。

Answer 1

只要把你所有的元素放到ScrollView控件中，它会自动改变，所以当你的页面足够大时，侧面没有滚动条，当它变小时，它会自动打开。

示例：

<ScrollView Grid.Row="1" Grid.Column="0" >
   <StackPanel Name="life_time_pnl">
      <!--Code for the grid and all-->
   </StackPanel>
</ScrollView>

<ScrollView Grid.Row="0" Grid.Column="1">
   <StackPanel x:Name="sales_report_pnl" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
      <!--coding here-->
   </StackPanel>
</ScrollView>

Answer 2

将整个网格放在一个相关面板中，并将相关面板放在滚动视图中，这样您就可以滚动整个页面。

<ScrollViewer>
    <RelativePanel>
        <Grid>

           //Your Page Code

        </Grid>
    </RelativePanel>
</ScrollViewer>

此外，如果您想要一个始终位于顶部的命令栏，那么您可以执行以下操作：

<Grid>
        <CommandBar>
           
         //Your Command Bar Code
  
        </CommandBar>
        <ScrollViewer>
            <RelativePanel>
                <Grid>
                     
                 //Scrollable Page Code

                </Grid>
            </RelativePanel>
        </ScrollViewer>
</Grid>

当屏幕高度减小时，如何在 XAML (UWP) 中垂直滚动整个页面？

How to Scroll whole page vertically in XAML (UWP) when screen height getting decrease?

xaml

windows-10

uwp

scrollviewer