A detailed explanation of the classic ListBox questions in Windows Phone 7 will give you a more in-depth understanding of ListBox.

Today I have received several questions about how to use ListBox in WP7. In this tutorial, I will give you the following answers:

Note: You can view the official msdn document for your reference.

Question 1: Is there a simple way to fill ListBox on WP7?

A: ListBox is one of itemscontrol. It can be filled with data in various ways. Basically, you can directly use listboxitems to fill in the ListBox control, or use the itemssource attribute to bind it to a project set. Note that if you want ListBox to automatically update its project set (Add/delete/insert) observablecollection is a good choice:

"The observablecollection represents a dynamic dataset, which is added, deleted, or refreshed during the project."

Question 2: How to define itemspanel? What is itemspanel?

A: itemspanel is a panel in itemscontrol used to deploy items. It can be derived from any panel class, or even a custom panel you write yourself. (If so, does it mean that you can write any complicated ListBox, for example, you can put 2 elements in each line? Haha)

The default template of ListBox is virtualizingstackpanel.

"To affect the items layout in ListBox, you can specify the itemspaneltemplate attribute"

The following code is provided for your reference.

Here, I have to thank the author who has always supported me for writing such an article with interest. I would like to thank the author again for a very good WP7 Development Forum, I will also post several high-quality articles to you later. Please contact me on the noodles.

Enter the subject:

Question 3: Can you give us an example of how to bind images to ListBox?

A: The following code is provided for your reference.

Question 4: Can I use an external image URI for an image?

A: You can use an external Uri, but remember to set urikind. Absolute as follows:

This. logo. Source = new bitmapimage (New uri (@ "http://www.codewp7.com/test.png", urikind. Absolute ));

Question 5: How do I use wrappanel layout in ListBox?

A: You can use wrappanel in the Silverlight for windowsphone7 toolkit. In my post, I will write an in-depth analysis of wrappanel. Please look forward to it. (add me to the meager pull directly, www.weibo.com/codewp7,w.the latest message)

The following is the sample code.

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

 

Source code download

 

This article from yewenpeng's blog, original address: http://www.cnblogs.com/sonyye/archive/2012/03/06/2382765.html