不断增长的 ScrollView (Height="Auto" MaxHeight="Stretch")

Question

我想要什么： 我想在我的 Silverlight 4 应用程序中有一个 ScrollView，它与内容一起在高度上增长，但确实会显示一个滚动条，否则它会比它的容器高。

我找到的解决方案： 我发现很多问题的解决方案是拉伸 Scrollviewer，但这 不是 我想要的。 Scrollviewer 应始终尽可能小。

我的问题： 为了让它在滚动查看器的顶部更难一点，一个标题被定位，它是一个具有静态高度的堆栈面板。

解决方案方法 1： 我首先使用纯 XAML 进行了尝试，但我不知道它应该如何工作。

<Grid Height="Auto" x:Name="myGrid" >
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" Background="AliceBlue">
        <!-- Dummy Header-->
    </StackPanel>

    <ScrollViewer Grid.Row="1" Height="Auto">
        <Button Width="100"  Height="50" Click="Button_Click" />
        <!-- onClick the button will switch between height="600" and height="50" 
            Code:
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                if (sender is Button)
                {
                    Button btn = (Button)sender;
                    btn.Height = (btn.Height == 50) ? 600 : 50 ;
                }
            }
        -->
    </ScrollViewer>
</Grid>

如果您单击按钮，它会变得更高，并且 Scrollviewer 将被剪切，因为它太高了。有什么建议吗？

解决方法二： 然后我尝试将 ScrollViewer 的 *max*Height 设置为包含容器的实际高度，因此我在 ScrollViewer 周围插入了一个 StackPanel。这确实适用于 VS2010 XAML 设计器，但不适用于代码执行。我不知道为什么......

<Grid Height="Auto" x:Name="myGrid" >
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" Background="AliceBlue">
        <!-- Dummy Header-->
    </StackPanel>
    <StackPanel Grid.Row="1" x:Name="myStackPanel" Height="Auto" VerticalAlignment="Stretch">
        <ScrollViewer Height="Auto" MaxHeight="{Binding ElementName=myStackPanel, Path=ActualHeight}">
            <Button Width="100"  Height="50" Click="Button_Click" />
            <!-- onClick the button will switch between height="600" and height="50" 
                Code:
                private void Button_Click(object sender, RoutedEventArgs e)
                {
                    if (sender is Button)
                    {
                        Button btn = (Button)sender;
                        btn.Height = (btn.Height == 50) ? 600 : 50 ;
                    }
                }
            -->
        </ScrollViewer>
    </StackPanel>
</Grid>

提前致谢！

Answer 1

解决方案是在适当使用VerticalAlignment。您希望包含滚动视图的 Grid 行是剩余空间的大小。您不希望 Scrollviewer 最初占用所有空间，但需要将其限制在该空间内。 Stretch 的默认 VerticalAlignment 将占据所有可用大小。改用Top 将导致它仅达到所需的高度，直到网格将其大小限制为可用空间。

<Grid x:Name="myGrid" >
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Background="AliceBlue">
        <!-- Dummy Header-->
    </StackPanel>
    <ScrollViewer Grid.Row="1" VerticalAlignment="Top" VerticalScrollBarVisibility="Auto">
    </ScrollViewer>
</Grid>

但是请注意VerticalScrollBarVisibility，尽管您的文本中表明它应该包含在您自己的 xaml 中，但您并未将其包含在内。也许事实上这就是你一直以来的真实面目。就位后删除VerticalAlignment。根据您的场景的其余部分，您可能会发现实际上具有滚动查看器的完整范围的轮廓边框更有意义。