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)