Question

我正在使用Windows Universal Platform应用。我有关于屏幕高度的查询。我使用可视状态管理屏幕宽度，因此应用程序响应，但当屏幕的高度减少时，页面的内容被剪切，并没有正确显示。所以我只是检查了Windows应用程序和了解滚动查看器，但我不知道我在哪里放置滚动查看器，以便应用程序正常工作。我使用了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）中垂直滚动整页？

2 个答案: