WP7 列表框滚动不起作用答案

【问题标题】：WP7 ListBox Scrolling Not WorkingWP7 列表框滚动不起作用
【发布时间】：2011-06-07 08:12:34
【问题描述】：

我在 WP7 用户控件中有以下 XAML 标记。我的问题是，当我的 ListBox 的项目多于页面容纳不下时，它将无法正确滚动。我可以通过用手指向上平移来滚动列表，但只要我移开手指，它就会跳回到列表顶部（如果列表很长，那么滚动甚至不会在这个有限的范围内起作用）。

我尝试了许多不同的布局，但没有成功，例如在 ScrollViewer 中包装 ListBox，利用 StackPanel 代替 Grid，移除 WrapPanel 并用网格替换它。

其他类似的问题建议删除 StackPanel（我做了但没有任何区别）或使用 ScrollViewer（不起作用）。

承载 UserControl 的页面使用 GestureListener - 我删除了它，它仍然没有任何区别。

<Grid x:Name="LayoutRoot"
      Background="SteelBlue">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <!--<TextBlock Grid.Row="0"
               Text="Search"
               Style="{StaticResource PhoneTextTitle2Style}" />-->

    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TextBlock Text="Search Type"
                   Grid.Column="0"
                   VerticalAlignment="Center" />

        <RadioButton Content="RMB/RSD"
                     Grid.Column="1"
                     IsChecked="{Binding Path=SearchType, Converter={StaticResource enumBooleanConverter}, ConverterParameter=RMB, Mode=TwoWay}" />

        <RadioButton Content="Name"
                     Grid.Column="2"
                     IsChecked="{Binding Path=SearchType, Converter={StaticResource enumBooleanConverter}, ConverterParameter=Name, Mode=TwoWay}" />
    </Grid>

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TextBlock Text="Search Term"
                   Grid.Column="0"
                   VerticalAlignment="Center" />

        <TextBox Grid.Column="1"
                 Text="{Binding SearchTerm, Mode=TwoWay}"
                 InputScope="{Binding SearchTermInputScope}">
            <i:Interaction.Behaviors>
                <b:SelectAllOnFocusBehavior />
            </i:Interaction.Behaviors>
        </TextBox>

    </Grid>

    <Button Grid.Row="2"
            Content="Find"
            cmd:ButtonBaseExtensions.Command="{Binding FindDeliveryPointsCommand}" />

    <ListBox Grid.Row="3"
             ItemsSource="{Binding SearchResults}"
             ScrollViewer.VerticalScrollBarVisibility="Auto">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <toolkit:WrapPanel Orientation="Horizontal"
                                   Width="480"
                                   Background="{Binding RMB, Converter={StaticResource alternateColorConverter}}">
                    <TextBlock Text="{Binding RMB}"
                               FontSize="26"
                               Foreground="Navy"
                               Padding="5"
                               Width="60" />
                    <TextBlock Text="{Binding HouseholdName}"
                               FontSize="26"
                               Foreground="Navy"
                               Padding="5"
                               Width="420" />
                    <TextBlock Text="{Binding StreetWithRRN}"
                               FontSize="26"
                               Foreground="Navy"
                               Padding="5" />
                    <TextBlock Text="{Binding Street.Locality.Name}"
                               FontSize="26"
                               Foreground="Navy"
                               Padding="5" />
                </toolkit:WrapPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

【问题讨论】：

你的问题有点太复杂了。我建议创建一个新页面，其中包含一个充满字符串的 LIstBox，验证它是否正确滚动。然后慢慢添加回上面的代码。当它停止工作时，您已经找到了原因！注意 ScrollViewer.VerticalScrollBarVisibility 不是必需的。

标签： windows-phone-7 listbox scroll

【解决方案1】：

指定 ListBox.Height - 类似于 Height="200"。就像现在一样，ListBox 会自动扩展以容纳所有加载的项目，并且它会超出屏幕。结果，您会得到没有滚动条的大页面。

添加 ListBox.Height 时，ListBox 区域不会增长。而是会激活 ListBox ScrollViewer，你会得到你需要的效果。

【讨论】：

谢谢您-您的解决方案完美运行。我猜这很明显 - 但我错过了。
但是如果列表动态变化，又无法设置高度怎么办？
这里我选择放置 height="550"，这个显示在 windows phone 模拟器的所有屏幕中。
旧线程，但刚刚卡在这个上面。我发现此解决方案有效，即使对于嵌套绑定列表也是如此，除非出于某种原因，如果高度超过屏幕高度。如果您的列表框最终比屏幕长也没关系 - 将高度设置为例如 Height="550" 将起作用。

【解决方案2】：

当 ListBox 的高度根据页面上的其他控件而改变时，我使用数据绑定。

<StackPanel x:Name="ContentPanel" Grid.Row="1">            
        <ListBox x:Name="LstSample" Height="{Binding ElementName=ContentPanel, Path=ActualHeight}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding ImagePath}" Stretch="None"/>
                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="{Binding Name}" FontSize="45"/>
                            <TextBlock Text="{Binding Group}" FontSize="25"/>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>

【讨论】：