XAML Nested 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 正在扩展以占用其内容的所有空间，而主窗口中的ScrollView 是显示滚动条的那个。像这样：

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

我知道我可以给它一个固定的高度，但这不是我想要的，我尝试将ScrollView 包装在Grid 中并将ScrollView 的高度绑定到@987654337 @ 的Height 和ActualHeight 属性，以及父Grid 的RowDefinition 的相同属性

Answer 1

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

MyPage.xaml.cs

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

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

MyPage.xaml

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