XAML 嵌套的 ScrollView 离开滚动到父级

Question

我有一个结构如下的应用程序（其中 Frame 的内容设置为 Page 例如 MyPage:

MainWindow.xaml

<Window ... Height="450" Width="800">
    <Grid>
        <ScrollViewer VerticalScrollBarVisibility="Auto">
            <Frame NavigationUIVisibility="Hidden" Source="Page1.xaml"/>
        </ScrollViewer>
    </Grid>
</Window>

MyPage.xaml

<Page ...>
    <Grid Background="GhostWhite">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid Background="Pink">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0">Title</TextBlock>
            <ScrollViewer Grid.Row="1" Background="Yellow" VerticalScrollBarVisibility="Auto">
                <StackPanel>
                    <Rectangle Margin="10" Fill="Red" Width="250" Height="100"/>
                    <Rectangle Margin="10" Fill="Red" Width="250" Height="100"/>
                    <Rectangle Margin="10" Fill="Red" Width="250" Height="100"/>
                    <Rectangle Margin="10" Fill="Red" Width="250" Height="100"/>
                </StackPanel>
            </ScrollViewer>
        </Grid>
    </Grid>
</Page>

在 visual studio 中，页面呈现如下，左侧面板内有滚动条，这就是我想要的样子：

然而，当我编译时实际发生的是页面的 ScrollView 正在扩展以占据其所有 space 的内容，而 ScrollView 来自主页面window 是显示滚动条的那个。像这样：

如何让内部 ScrollView 不超出其父网格？

我知道我可以给它一个固定的高度，但这不是我想要的，我试过将 ScrollView 包裹在 Grid 中并绑定 [= 的高度16=]到 Grid 的 Height 和 ActualHeight 属性，以及父 Grid[=] 的 RowDefinition 的相同属性29=]

Answer 1

看来我找到了解决办法。我意识到，为了限制侧面板的高度并使其始终可见，我必须确保页面永远不会比框架大。为此，我必须将根 Grid 的高度绑定到 ScrollView 的 ViewportHeight 属性。我已经在 MyPage class 中有一个 属性 ，它是这样的框架（用于导航目的）：

MyPage.xaml.cs

public partial class MyPage : Page {
    public Frame Frame { get; }
    // ...
}

所以在 XAML 我可以像这样绑定高度：

MyPage.xaml

<Page ...>
    <Grid Height="{Binding Frame.Parent.ViewportHeight}">
        <!-- ... -->
    </Grid>
</Page>