Bind collection to combobox

Question

I have this combobox

<ComboBox  Height="30" SelectedIndex="0" Margin="5 3 5 3" Width="170" ItemsSource="{Binding WonderList}" SelectedValuePath="selectedWonder">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <WrapPanel>
                <Image Source="{Binding Path}" Height="20"></Image>
                <Label Content="{Binding Name}" Style="{StaticResource LabelComboItem}"></Label>
            </WrapPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

where I want to show items as an image plus a text.

This is the business class for the objects in the item list

public class Wonder: INotifyPropertyChanged
{
    private string name;
    private string path;
    public event PropertyChangedEventHandler PropertyChanged;

    #region properties, getters and setters
    public String Name { get; set; }
    public String Path { get; set; }
    #endregion

    public Wonder(string name, string path)
    {
        this.name = name;
        this.path = path;
    }

    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
}

and the code behind of the window

public class Window1 {
    public List<Wonder> WonderList;

    public Window1()
    {
        InitializeComponent();
        WonderList = new List<Wonder>();
        WonderList.Add(new Wonder("Alexandria", "Resources/Images/Scans/Wonders/Alexandria.jpg"));
        WonderList.Add(new Wonder("Babylon", "Resources/Images/Scans/Wonders/Babylon.jpg"));
    }
}

I´m pretty new to this xaml "magic" and guess I dont understand correctly how the data binding works, I think that with ItemsSource="{Binding WonderList}" it should take the collection with that name (from the code behind) and show their Name and Path, but it shows an empty list.

If I do Combo1.ItemsSource = WonderList; in the code behind (I prefer to use the xaml and avoid the code behind), it shows two blank slots but still don´t know how to show the items.

Can you point me in the right direction?

Thanks

score 3 · Accepted Answer · answered Jun 23 '13 at 22:28

If you want to bind like this ItemsSource="{Binding WonderList}" you have to set the DataContext first.

public Window1()
{
    ...
    this.DataContext = this;
}

Then Binding will find the WonderList in Window1 but only if it is a property too.

public List<Wonder> WonderList { get; private set; }

Next: It is useless to bind to property Name if you assign your value to private field name. Replace your constructor with

public Wonder(string name, string path)
{
    this.Name = name;
    this.Path = path;
}

Next: Your auto properties ({ get; set; }) will not notify for changes. For this you have to call OnPropertyChanged in setter. e.g.

public String Name
{
    get { return name; }
    set
    {
        if (name == value) return;
        name = value;
        OnPropertyChanged("Name");
    }
}

Same thing for WonderList. If you create the List to late in constructor it could be all bindings are already resolved and you see nothing.

And finally use ObservableCollection if you want to notify not for a new list but a new added item in your list.

score 0 · Answer 2 · answered Jun 23 '13 at 21:34

0

You are not doing the correct way. Simply saying, you should have a Wonders class holding an ObservableCollection property, which is bound to ComboBox's ItemsSource. You should read MSDN:

http://msdn.microsoft.com/en-us/library/ms752347.aspx

answered Jun 23 '13 at 21:34

Bill Zhang

1,909
13
10

Bind collection to combobox

2 Answers2

Linked