如何让滚动视图只影响内部框架，而不影响整个应用程序
How to have the scrollview affect the inner frame only, not whole app
在编写 XAML/UWP/C# 应用程序时，我有 MainPage.xaml，其中包含一个 header 菜单（主页|后退|前进导航和用户显示按钮）和页面导航菜单（左侧）拆分面板，拆分的另一边是显示页面的框架。
以下是代码的简化版本（请注意，此代码中没有任何地方是 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="Assets\Home.png" Width="64" />
</Button>
<Button x:Name ="BackButton"
Foreground="#FFC0FFC0"
Padding="0,0,0,0"
Background="#33016B3B">
<Image Source="Assets\Back.png" Width="64" />
</Button>
<Button x:Name ="ForwardButton"
Foreground="#FFC0FFC0"
Padding="0,0,0,0"
Background="#33016B3B">
<Image Source="Assets\Forward.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="Assets\trackers.png"
Width="64"/>
</Button>
<Button Name="btnTasks"
Width="80">
<Image Source="Assets\tasksIcon.png"
Width="64"/>
</Button>
<Button Name="btnRFP"
Width="80">
<Image Source="Assets\proposals.png"
Width="64"/>
</Button>
<Button Name="btnFM"
Width="80">
<Image Source="Assets\folderMachine.png" Width="64"/>
</Button>
<Button Name="btnClients"
Width="80" >
<Image Source="Assets\clients.png"
Width="64"/>
</Button>
<Button Name="btnMaint"
Width="80"
Padding="0,0,0,0">
<Image Source="Assets\maintenance.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>
（已删除点击事件以使其仅 copy/paste。）
无论如何，第一个打开的页面是提案页面（因为这是我一直在处理的页面），它是一个包含许多控件的长页面。我希望滚动视图在不移动 header 菜单或 left-side 导航菜单的情况下 移动提案（或之后的任何页面）页面。现在，如果我滚动整个应用程序，那么 header 和导航菜单会随着页面滚动而向上滚动。
我尝试过的：
将 ScrollView 放在 <Frame x:Name...> 面板上 - 不起作用。
将 ScrollView 放置在顶级 StackPanel 的提案页面上
<StackPanel Margin="0,0,10,27"
VerticalAlignment="Top"
ScrollViewer.VerticalScrollBarVisibility="Visible">
无效。
我尝试按照这些网站上的示例进行操作：
https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.scrollviewer?view=winrt-18362
https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/scroll-controls
提前致谢。
我的猜测是这样做：
<ScrollViewer Padding="10,10,10,15"
HorizontalAlignment="Stretch"
Width="Auto"
Height="Auto"
VerticalAlignment="Stretch">
<Frame x:Name="content" />
</ScrollViewer>
要记住的重要一点是 ScrollViewer 大小需要限制 - ScrollViewer 本身不能随着内容的增长而增长，因为那样它将无法正确生成滚动条
GridView通常与ItemTemplate和ItemsSource一起使用。该控件是根据数据集快速生成一批布局相同的item（如Windows设置首页），而不是作为布局容器使用。这是相关的 document
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 内的内容会滚动。
谢谢。
在编写 XAML/UWP/C# 应用程序时，我有 MainPage.xaml，其中包含一个 header 菜单（主页|后退|前进导航和用户显示按钮）和页面导航菜单（左侧）拆分面板，拆分的另一边是显示页面的框架。
以下是代码的简化版本（请注意，此代码中没有任何地方是 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="Assets\Home.png" Width="64" />
</Button>
<Button x:Name ="BackButton"
Foreground="#FFC0FFC0"
Padding="0,0,0,0"
Background="#33016B3B">
<Image Source="Assets\Back.png" Width="64" />
</Button>
<Button x:Name ="ForwardButton"
Foreground="#FFC0FFC0"
Padding="0,0,0,0"
Background="#33016B3B">
<Image Source="Assets\Forward.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="Assets\trackers.png"
Width="64"/>
</Button>
<Button Name="btnTasks"
Width="80">
<Image Source="Assets\tasksIcon.png"
Width="64"/>
</Button>
<Button Name="btnRFP"
Width="80">
<Image Source="Assets\proposals.png"
Width="64"/>
</Button>
<Button Name="btnFM"
Width="80">
<Image Source="Assets\folderMachine.png" Width="64"/>
</Button>
<Button Name="btnClients"
Width="80" >
<Image Source="Assets\clients.png"
Width="64"/>
</Button>
<Button Name="btnMaint"
Width="80"
Padding="0,0,0,0">
<Image Source="Assets\maintenance.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>
（已删除点击事件以使其仅 copy/paste。）
无论如何，第一个打开的页面是提案页面（因为这是我一直在处理的页面），它是一个包含许多控件的长页面。我希望滚动视图在不移动 header 菜单或 left-side 导航菜单的情况下 移动提案（或之后的任何页面）页面。现在，如果我滚动整个应用程序，那么 header 和导航菜单会随着页面滚动而向上滚动。
我尝试过的：
将 ScrollView 放在 <Frame x:Name...> 面板上 - 不起作用。
将 ScrollView 放置在顶级 StackPanel 的提案页面上
<StackPanel Margin="0,0,10,27"
VerticalAlignment="Top"
ScrollViewer.VerticalScrollBarVisibility="Visible">
无效。
我尝试按照这些网站上的示例进行操作：
https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.scrollviewer?view=winrt-18362 https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/scroll-controls
提前致谢。
我的猜测是这样做：
<ScrollViewer Padding="10,10,10,15"
HorizontalAlignment="Stretch"
Width="Auto"
Height="Auto"
VerticalAlignment="Stretch">
<Frame x:Name="content" />
</ScrollViewer>
要记住的重要一点是 ScrollViewer 大小需要限制 - ScrollViewer 本身不能随着内容的增长而增长，因为那样它将无法正确生成滚动条
GridView通常与ItemTemplate和ItemsSource一起使用。该控件是根据数据集快速生成一批布局相同的item（如Windows设置首页），而不是作为布局容器使用。这是相关的 document
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 内的内容会滚动。
谢谢。