数据绑定和样式问题[WP7]

Question

I have been trying to bind listbox with an observableConnection in Xaml on WP7 with no luck. All I want to do is to make listbox to show an instance of my class that inherits from ObservableConnection and apply some style on listbox. I can do this from code like

public Storage.Categories tmp;
...
tmp = new Storage.Categories();
listBox1.ItemsSource = tmp;

but how to apply style on that? Here is code:

<ListBox Height="497"
         HorizontalAlignment="Left"
         Margin="0,104,0,0"
         Name="listBox1"
         VerticalAlignment="Top"
         Width="450">


namespace Genesa.Storage
{
    public class Categories : ObservableCollection<Category>
    {
        public void LoadCategories()
        {
            // deserialize obiect
        }

        public void SaveCategories()
        {
            // serialize obiect
        }

        public Categories() : base()
        {
            LoadCategories();
        }
    }

    public class Category
    {
        public Category() { }
        public String name { get; set; }
        public String description { get; set; }

        public Category(String _name, String _description)
        {
            name = _name;
            description = _description;
        }

        public override string ToString()
        {
            return String.Format("{0} - {1}", name, description);
        }
    }
}

Answer 1

You're going to want to use a DataTemplate. A data template let's you structure the items in your ListBox. For example:

<ListBox>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding name}" />
            <TextBlock Text="{Binding description}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Also, you might want to reconsider inheriting from ObservableCollection. If what you're doing is as simple as it looks above, you probably want to stick to creating a class which contains an ObservableCollection and which implements the INotifiyPropertyChanged interface. This is assuming you're using the MVVM design pattern. If you're not, feel free to disregard this suggestion. If you are implementing MVVM, you also want to make the Category class implement the INotifyPropertyChanged interface.

Answer 2

As Jared suggests, the most appropriate approach to your solution is to provide an ItemTemplate for the ListBox that defines the structure of each item in the ListBox , which enables you to bind directly to properties on your class, instead of having to override the ToString method. However, there is a small mistake in Jared's DataTemplate because it can only contain a single item, so you need to wrap the elements in some kind of container, as shown below:

<ListBox>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding name}" />
                <TextBlock Text="{Binding description}" />
            </StackPanel>
        </DataTemplate>    
    </ListBox.ItemTemplate>
</ListBox>

You only need to implement the INotifyPropertyChanged on your Category class if the properties can change during the lifetime of that object. If the values are constant throughout it's lifetime, then there's no need.

Answer 3

usually the ObservableCollection is member of the ViewModel to which the View binds to. You don't have to inherit from ObservableCollection and the logic from Categories class can be placed inside ViewModel.

Then you need to set DataContext of Page or other object in hierarchy to be the ViewModel and then you can bind for example ListBox.ItemsSource to ViewModel.ObservableCollection.

After that DataTemplate will work in scope of Category (single item in ObservableCollection).

Regarding the logic of loading etc, there is usually one more layer responsible for these operations, which is injected to ViewModel, but if you don't want it, it's just fine.