Windows Phone 7 ListBox 经典问题详解，带你更深入了解listbox

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

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

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

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

　　“ 的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));
    }
}

 

源码下载

 

　　本文来自yewenpeng的博客，原文地址：http://www.cnblogs.com/sonyye/archive/2012/03/06/2382765.html