无法在WP7中滚动列表框

Question

我有一个列表框控件，其中的项是使用包含文本块和图像的用户控件添加的。

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="52" d:DesignWidth="480">

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="12,10,0,0" Name="Index_itemtext" Text="" VerticalAlignment="Top" Width="145" />
    <Image Height="34"  HorizontalAlignment="Right" Margin="0,6,55,0" Source="blue_triangle.png" Name="IndexList_itemImage" Stretch="Uniform" VerticalAlignment="Top" Width="66" />
    <Line Height="10" HorizontalAlignment="Left" Margin="0,38,0,0" Name="seperator_line" Stroke="White" StrokeThickness="2" VerticalAlignment="Top" Width="480" Stretch="Fill" Fill="#FFF5E9E9" />
</Grid>

下面是列表框的XAML代码：

  <Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="768"/>
        <RowDefinition Height="0*" />
    </Grid.RowDefinitions>

    <Grid  Opacity="5"  VerticalAlignment="Top" Grid.Row="0">
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF282828" Offset="0.366" />
                <GradientStop Color="#FE848484" Offset="1" />
            </LinearGradientBrush>
        </Grid.Background>

        <Button  Content="Top" Grid.Column="0" HorizontalAlignment="Left" Grid.Row="0" VerticalAlignment="Top" Height="72"  Name="Top_btn"  Width="114"  BorderBrush="{x:Null}" Click="topbutton_Click" Style="{StaticResource ButtonStyle1}" >             
            <Button.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF908585" Offset="0.11" />
                    <GradientStop Color="#FF342E2E" Offset="1" />
                </LinearGradientBrush>
            </Button.Background>
        </Button>

        <Button Content="Back" Height="72" Grid.Column="1"  Grid.Row="0" Name="Back_btn" Width="104" HorizontalAlignment="Right" HorizontalContentAlignment="Center" Margin="0"  BorderBrush="{x:Null}" Click="backbutton_Click" Style="{StaticResource ButtonStyle1}" >
            <Button.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF908585" Offset="0.11" />
                    <GradientStop Color="#FF342E2E" Offset="1" />
                </LinearGradientBrush>
            </Button.Background>
        </Button>
    </Grid>

            <ListBox Name="Index_list" ScrollViewer.VerticalScrollBarVisibility="Visible"  VerticalContentAlignment="Top" SelectionChanged="on_selection" Margin="0,78,0,0" Height="Auto">
        <ListBoxItem Style="{StaticResource ListBoxItemStyle}">


        </ListBoxItem>
    </ListBox>



</Grid>

现在当我将项目添加到列表中时，垂直滚动条无法滚动到最后一个项目/列表框底部不可达，即它返回到第一行，这会阻止选择最后一个项目。

 for (int i = 0; i < gridSize; i++)
            {
                listbox_item list_item = new listbox_item();
                list_item.Index_itemtext.FontSize = 25;
                list_item.Index_itemtext.Text = index[i];
                list_item.IndexList_itemImage.Source = new BitmapImage(new Uri("some.png", UriKind.Relative));
                list_item.seperator_line.StrokeThickness = 5;
                list_item.Margin = new Thickness(0, 0, 0, 5);
                Index_list.Items.Add(list_item);
            }

此外，在横向模式下，列表行不占用设备的宽度，而要求行项随着设备宽度的变化而变宽。有人能帮忙解决这些问题吗？

- Shaireen

Answer 1

根据您展示的代码，我将其放入一个示例项目中，没有出现您所描述的滚动问题，因此我认为页面上除了 ListBox 之外还有其他元素影响了布局和滚动。

如上所述，方向更改的问题与固定宽度元素有关，可以使用星号宽度列来解决，如 Windows Phone 开发者博客中 Windows Phone 的自动旋转支持或自动多方向布局支持 中所讨论的。

另一个值得注意的点是，除非您实际上与创建 listbox_item UserControl 相关的某些逻辑，否则您可以通过指定 ListBox 的 ItemTemplate 属性实现布局，然后只需创建数据对象列表并将其绑定到 ItemsSource 属性即可。例如：

<ListBox x:Name="Index_list"
         HorizontalContentAlignment="Stretch"
         Margin="0,78,0,0"
         SelectionChanged="on_selection"
         VerticalContentAlignment="Top">
  <ListBox.ItemTemplate>
    <DataTemplate>
        <Grid Background="{StaticResource PhoneChromeBrush}">
            <!-- Column definitions here. -->
            <TextBlock Height="30" HorizontalAlignment="Left" Text="{Binding Label}" VerticalAlignment="Top" />
            <Image Height="34" HorizontalAlignment="Right" Margin="0,6,55,0" Source="{Binding ImagePath}" Stretch="Uniform" VerticalAlignment="Top" Width="66" />
            <Line Height="10" HorizontalAlignment="Stretch" Margin="0,38,0,0" Stroke="White" StrokeThickness="2" VerticalAlignment="Top" Stretch="Fill" Fill="#FFF5E9E9" />
        </Grid>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

- Derek Lakin

Answer 2

ListBox.ScrollIntoView 方法允许您滚动 ListBox 以查看特定项。此外，使用 WP7 ListBox，如果选择一个项目，则会自动滚动到视图中。

关于您对行宽度的问题，您需要将 ListBoxItemsStyle 设置如下：

    <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
    </Style>

并且在你的模板中移除硬编码的宽度。

- ColinE

---

非常感谢您的回复...我按照您建议的做了，但是在滚动时仍然无法到达列表的最后一项。 - Shaireen

Answer 3

关于布局问题 - 您正在为所有UserControl元素设置Width属性 - 因此它们将不会自动缩放。

关于滚动问题，您能否重新表述问题 - 抱歉，但我不确定我是否理解了问题 - “垂直滚动条无法滚到最后一个项目，即回到第一行，这会阻止选择最后一个项目” 对我来说没有意义 - 抱歉。

- Stuart

---

抱歉 - 我还不清楚。 "not able to scroll" 是什么意思？你是指“用户无法滚动列表框”吗？还是说“我想通过编程选择当前显示的项目”？ - Stuart

我的意思是，当用户滚动列表以达到列表底部时，它并没有到达列表的底部项。 - Shaireen

你能发布整个页面的XAML吗？如果你看不到ListBox的底部，那么这个ListBox一定被定位在屏幕底部之外。 - Stuart

暂时先尝试从LayoutRoot中删除“行定义”-完成此操作后，我认为您的列表框将正常显示。如果是这种情况，则需要重写网格布局（可能需要了解如何使用“Auto”和“*”）。 - Stuart

非常感谢你的帮助，Stuart...我会尝试的。 - Shaireen