WP7 ListBox经典问题详解，带你深入了解ListBox

今天我收到了有关如何在WP7使用ListBox的几个问题。在这个小教程，我将给予我们的答案：

注意：你可以查看官方的MSDN文档，以供参考。

问题1：WP7上，有没有填充ListBox的简单方法？

答：ListBox是ItemsControl中的一种，可以以各种方式的数据填充它。基本上你可以直接使用ListBoxItems填充ListBox控件，或使用ItemsSource属性将其绑定到一个项目集。请注意，如果您希望Listbox能自动更新其项目集合（添加/删除/插入等）ObservableCollection <T>是一个很好的选择：

“ <T>的ObservableCollection代表一个动态的数据集，在项目时被添加，删除，或整个列表被刷新时会发出相应通知“。

问题2：如何定义的ItemsPanel？什么是ItemsPanel？

答：ItemsPanel是一个ItemsControl中的用于排布items的 panel，并可以从任何panel类派生，甚至是你自己写的自定义panel。（如果是这样，是不是意味着，你可以写任意复杂的listbox,比如每行能放2个元素的？呵呵）

默认ListBox的template是VirtualizingStackPanel。

“要影响ListBox中的items的布局，您可以指定ItemsPanelTemplate属性“

下面有代码，以供参考。

在这里我不得不感谢一直支持我的卤面网版主，是他让我提起兴趣写了这么一篇文章，再次感谢卤面网，一个非常不错的wp7开发论坛,后面我也将再次向大家发布几篇高质量文章，请大家到卤面上找我吧，呵呵

进入正题：

问题3：您能否给我们一个如何在ListBox中绑定图像的例子吗？

答：下面有代码，以供参考。

问题4：我可以对Image,使用外部的 image Uri吗？

答：您可以使用外部URI，但要记住设置UriKind.Absolute，如下

this.logo.Source =new BitmapImage(new Uri(@"http://www.codewp7.com/test.png",UriKind.Absolute));

问题5：我如何使用在ListBox中使用WrapPanel布局？

答：您可以使用从Silverlight for WindowsPhone7 toolkit 中的WrapPanel。在我后面的文章中我会写一篇深入分析WrapPanel 的文章，静请期待哦（直接加我微薄拉，www.weibo.com/codewp7,关注最新消息)

下面是例子代码

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Image x:Name="logo" Stretch="None"/>
    <TextBlock Text="DataBound ListBox"/>
    <ListBox x:Name="list">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <toolkit:WrapPanel/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Margin="5">
                    <Image Source="{Binding ImageUri}" Stretch="None"/>
                    <TextBlock Text="{Binding Text}"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</StackPanel>

复制代码

public class SampleData
{
    public string Text
    {
        get;
        set;
    }
 
    public string ImageUri
    {
        get;
        set;
    }
}
 
public partial class MainPage : PhoneApplicationPage
{    
    public MainPage()
    {
        InitializeComponent();
        ObservableCollection<SampleData> dataSource = new ObservableCollection<SampleData>();
         
        dataSource.Add(new SampleData() { ImageUri = "Images/appbar.close.rest.png", Text = "CLose" });
        dataSource.Add(new SampleData() { ImageUri = "Images/appbar.delete.rest.png", Text = "Delete" });
        dataSource.Add(new SampleData() { ImageUri = "Images/appbar.download.rest.png", Text = "Download" });
        dataSource.Add(new SampleData() { ImageUri = @"http://www.codewp7.com/upload/appwall/wallimage.png", Text = "Logo" });
        dataSource.Add(new SampleData() { ImageUri = @"http://www.codewp7.com/upload/appwall/wallimage.png", Text = "Logo" });
 
        this.list.ItemsSource = dataSource;
 
        this.logo.Source = new BitmapImage(new Uri(@"http://www.codewp7.com/test.png",UriKind.Absolute));
    }
}

复制代码

我希望你能喜欢我的文章！如果你有更多想法，请到卤面网wp7开发论坛(codewp7.com)问答区联系我，我会很高兴知道你在想什么。同时wp7交流QQ群172765887中，也能找到我的身影，感谢大家，也欢迎大家关注我的微薄（www.weibo.com/codewp7)