概述

今天我收到了有关如何在WP7使用ListBox的几个问题。在这个小教程，我将给予我们的答案：注意：你可以查看官方的MSDN文档，以供参考。问题1：WP7上，有没有填充ListBox的简单方法？答：ListBox是ItemsControl中的一种，可以以各种方式的数据填充它。基本上你可以直接使用ListBoxItems填充ListBox控件，或使用Itemssource属性将其绑定到一个项目集

@H_404_1@

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

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

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

@H_197_18@答@H_197_18@：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开发论坛,后面我也将再次向大家发布几篇高质量文章，请大家到卤面上找我吧，呵呵

进入正题：

@H_197_18@问题3@H_197_18@：@H_197_18@您能否给我们一个如何在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,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));
    }
}