不断增长的ScrollView(高度="自动"MaxHeight ="拉伸")

Question

我想要的是: 我希望在我的Silverlight 4应用程序中有一个ScrollView,它与内容一起在Height中增长,但如果它会比它的容器更高,它会显示一个滚动条.

我发现的解决方案: 我发现很多问题,其中解决方案是拉伸Scrollviewer,但这不是我想要的.Scrollviewer应该尽可能小.

我的问题: 为了使滚动查看器顶部更加困难,可以找到一个标题,它是一个具有静态高度的堆栈面板.

解决方案Approch 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将会被切断,因为它很高.任何sugestions？

解决方案方法2: 然后我尝试使用包含容器的actualHeight设置ScrollViewer 的*max*高度,因此我在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.您希望包含scrollview的Grid行是剩余空间的大小.您不希望Scrollviewer最初占用所有空间,但需要将其限制在该空间内.默认VerticalAlignment的Stretch将有占据所有可用的大小.Top相反,使用它会使它只有它需要的高度,直到Grid将其大小限制为可用空间.

<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.根据您的场景的其余部分,您可能会发现实际上滚动查看器的完整范围的轮廓边框更有意义.