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