ScrollViewer 内容溢出页面时自动滚动的高度答案

【问题标题】：ScrollViewer Height to automatically scroll when content overflows the pageScrollViewer 内容溢出页面时自动滚动的高度
【发布时间】：2010-12-12 06:58:50
【问题描述】：

好的，这听起来很傻，但我无法让 ScrollViewer 正常工作。我需要做的是

让 silverlight 页面使用 HTML 页面的 100% 宽度/高度
在 Sliverlight 页面的顶部有一个 Height=160px 控件，然后让其余部分 (100% - 160px) 成为一个具有动态变化内容的 ScrollViewer。

所以在我的 HTML 页面中：

 <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

然后在 XAML 中：

 <Grid x:Name="LayoutRoot" Height="Auto">
        <StackPanel Orientation="Vertical" Height="Auto">        
            <App:ASilverlightControl  x:Name="Header" Height="160"/>
            <ScrollViewer Name="svw"  HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible"  Height="Auto" >
                <StackPanel Orientation="Vertical" x:Name="DynamicContentHere">
              </StackPanel>                                                
            </ScrollViewer>
       </StackPanel>    
   </Grid>

现在，无论我尝试什么，ScrollViewer 将始终展开/收缩以包含 StackPanel 中的所有元素，即使这意味着在屏幕下方溢出但没有垂直滚动条。

我可以让它工作的唯一方法是将 Height=800 设置为 ScrollViewer。

【问题讨论】：

标签： silverlight xaml

【解决方案1】：

如果您将 ScrollViewer 放在 StackPanel 中，它将永远无法工作。 StackPanel 将始终允许 ScrollViewer 的内容所需的所有空间。

您应该改用两行网格：

<Grid x:Name="LayoutRoot" Height="Auto">
  <Grid.RowDefinitions>
    <RowDefinition Height="160"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <App:ASilverlightControl x:Name="Header" Grid.Row="0"/>
  <ScrollViewer Name="svw" Grid.Row="1"
    HorizontalScrollBarVisibility="Disabled"
    VerticalScrollBarVisibility="Visible">
    <StackPanel Orientation="Vertical" x:Name="DynamicContentHere">
      ...
    </StackPanel>                                                
   </ScrollViewer>
</Grid>

第二个 RowDefinition 中的 * 将自动使 ScrollViewer 尽可能地填充，但仍将其保留在您的可视区域内，从而使您的 ScrollViewer 正常工作。

【讨论】：