Silverlight：使用 ScrollViewer 的困难答案

【问题标题】：Silverlight: Difficulty with ScrollViewerSilverlight：使用 ScrollViewer 的困难
【发布时间】：2012-12-04 03:31:01
【问题描述】：

我正在制作一个 wp7 Silverlight 应用程序。我有一个ScrollViewer，其中包含一个包含十个元素的ListBox。但是，它只能让我向下滚动一点。我可能做错了什么？

<ScrollViewer>
        <ListBox x:Name="StoryListBox"/>
    </ScrollViewer>

ListBox 填充了以下类型的项目：

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Image x:Name="Thumbnail" Grid.Column="0" Width="89" HorizontalAlignment="Left" VerticalAlignment="Top" />
    <TextBlock x:Name="Headline" Grid.Column="1" Grid.Row="0" Style="{StaticResource PhoneTextAccentStyle}" TextWrapping="Wrap" HorizontalAlignment="Left" Width="299" FontSize="23.333" VerticalAlignment="Top" />
    <TextBlock x:Name="Teaser" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" HorizontalAlignment="Left" Style="{StaticResource PhoneTextSubtleStyle}"  TextWrapping="Wrap" VerticalAlignment="Top" Width="384"/>
</Grid>

我在这里做错了什么？

【问题讨论】：

标签： silverlight windows-phone-7

【解决方案1】：

我看不出您需要将 ListBox 嵌入到 ScrollViewer 中的原因。如果您的 ListBox 的项目多于它在可视区域中显示的项目，则 ListBox 项目应自行滚动。如果您使用 Expression Blend 编辑 ListBox 的样式，样式将如下所示 -

<Style x:Key="ListBoxListStyle" TargetType="ListBox">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>     
            <ControlTemplate TargetType="ListBox">
                <ScrollViewer 
                    x:Name="ScrollViewer" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    Background="{TemplateBinding Background}" 
                    Foreground="{TemplateBinding Foreground}" 
                    Padding="{TemplateBinding Padding}" >
                <ItemsPresenter/>
                </ScrollViewer>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

你可以看到 ScrollViewer 嵌入在 ListBox 的 ControlTemplate 中，它负责 ListBoxItems 的滚动。

【讨论】：

【解决方案2】：

设置列表框的高度后，它（滚动）工作正常。

【讨论】：

【解决方案3】：

ScrollViewer 只能在它小于它所包含的值（宽度或高度）时才能工作。如果不指定 ScrollViewer 的宽度或高度，它将被拉伸以适应其内容，因此效果不会很完美。

所以你需要做的是为你的 ScrollViewer 设置一个固定的大小。

顺便说一句，正如 indyfromoz 所说，ListBox 已经有一个 ScrollViewer，因此您可以移除外部 ScrollViewer，然后设置 ListBox 的大小。

【讨论】：