如何让滚动视图只影响内部框架，而不是整个应用程序

Question

在编写XAML/UWP/C#应用程序时，我有MainPage.XAML，它包含一个标题菜单(主页|后退|前进导航和用户显示按钮(和页面导航菜单(左侧(拆分面板，拆分的另一侧是显示页面的框架。

以下是该代码的简化版本(请注意，该代码中没有ScrollView(：

<Page
x:Class="PowderTracks.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PowderTracks"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Width="1200"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<GridView Height="Auto">
<StackPanel
Width="Auto">
<StackPanel x:Name="headerMenu" 
Orientation="Horizontal" 
Background="#FF016B3B"
Width="Auto"
Padding="0,0,0,0" >
<Button x:Name ="HomeButton" 
Foreground="#FFC0FFC0" 
Margin="10,0,0,0" 
Background="#33016B3B">
<Image Source="AssetsHome.png" Width="64" />
</Button>
<Button x:Name ="BackButton" 
Foreground="#FFC0FFC0" 
Padding="0,0,0,0" 
Background="#33016B3B">
<Image Source="AssetsBack.png" Width="64" />
</Button>
<Button x:Name ="ForwardButton" 
Foreground="#FFC0FFC0" 
Padding="0,0,0,0" 
Background="#33016B3B">
<Image Source="AssetsForward.png" Width="64" />
</Button>
<Button x:Name="btnFace" Background="#33016B3B">
<Image x:Name="userPic" Width="32" Height="32"/>
<Button.Flyout>
<Flyout>
<StackPanel>
<Image x:Name="foPic" Width="96" Height="96"/>
<TextBlock Name="foDisplayName" />
<TextBlock Name="foEmail" />
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
<TextBlock Name="lblUsername" 
x:FieldModifier="public"
Text="" 
Margin="10,0,0,0" 
Height="25" 
FontSize="18"
VerticalAlignment="Center" 
Foreground="#FFC0FFC0"
/>
<ToggleSwitch x:Name="btnDatabase" 
Margin="50,0,0,0"
OffContent="TestDB" 
OnContent="LiveDB"
HorizontalAlignment="Right"
Visibility="Visible"
/>
</StackPanel>
<SplitView  x:Name="svFrame"
IsPaneOpen="True"
DisplayMode="Inline"
OpenPaneLength="80" Height="Auto" Width="1024">
<UIElement.RenderTransform>
<MatrixTransform/>
</UIElement.RenderTransform>
<SplitView.Pane>
<StackPanel>
<Button Name="btnTracker" 
Width="80" 
Height="65" 
Padding="0,0,0,0">
<Image Source="Assetstrackers.png" 
Width="64"/>
</Button>
<Button Name="btnTasks"  
Width="80">
<Image Source="AssetstasksIcon.png" 
Width="64"/>
</Button>
<Button Name="btnRFP"  
Width="80">
<Image Source="Assetsproposals.png" 
Width="64"/>
</Button>
<Button Name="btnFM" 
Width="80">
<Image Source="AssetsfolderMachine.png" Width="64"/>
</Button>
<Button Name="btnClients"  
Width="80" >
<Image Source="Assetsclients.png" 
Width="64"/>
</Button>
<Button Name="btnMaint" 
Width="80" 
Padding="0,0,0,0">
<Image Source="Assetsmaintenance.png" 
Width="64" 
Margin="0,0,0,0"/>
</Button>
</StackPanel>
</SplitView.Pane>
<Frame x:Name="content" 
Padding="10,10,10,15" 
HorizontalAlignment="Left" 
Width="Auto" 
Height="Auto" 
VerticalAlignment="Top"/>
</SplitView>
</StackPanel>
</GridView>
</Page>

(点击事件被删除，使其只是复制/粘贴。(

不管怎样，第一个打开的页面是Proposals页面(因为这是我一直在做的页面(，它是一个有很多控件的长页面。我希望滚动视图移动建议书(或后面的任何页面(页面，而不移动标题菜单或左侧导航菜单。现在，如果我滚动整个应用程序，那么标题和导航菜单会随着页面滚动而向上滚动。

我尝试过的：将ScrollView放置在<Frame x:Name...>面板上-不起作用。在顶层StackPanel 的提案页面上放置滚动视图

<StackPanel Margin="0,0,10,27" 
VerticalAlignment="Top" 
ScrollViewer.VerticalScrollBarVisibility="Visible">

不起作用。

我试着在这些网站上效仿：

https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.scrollviewer?view=winrt-18362https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/scroll-controls

提前谢谢。

Answer 1

GridView通常与ItemTemplate和ItemsSource一起使用。此控件用于根据数据集快速生成具有相同布局的一批项目(如Windows设置主页(，而不是用作布局容器。这是的相关文件

GridView是多个控件的组合。应用程序滚动的原因是GridView包含一个ScrollViewer。

根据您提供的代码，您可以尝试以下布局：

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<StackPanel>
<!-- Header Buttons -->
</StackPanel>
<SplitView Grid.Row="1">
<SplitView.Pane>
<!-- Pane List -->
</SplitView.Pane>
<SplitView.Content>
<ScrollViewer>
<Frame x:Name="content"/>
</ScrollViewer>
</SplitView.Content>
</SplitView>
</Grid>

这样可以确保只有Frame内部的内容才会滚动。

谢谢。

Answer 2

我的猜测是这样做：

<ScrollViewer Padding="10,10,10,15" 
HorizontalAlignment="Stretch" 
Width="Auto" 
Height="Auto" 
VerticalAlignment="Stretch">
<Frame x:Name="content" />
</ScrollViewer>

需要记住的重要一点是，ScrollViewer的大小需要受到限制——当内容增长时，ScrollViewer本身无法增长，因为那样它将无法正确生成滚动条