CODEWITHSUNDEEP
c#wpfxaml
GFocus
GFocus

Reputation: 109

Binding ObservableCollection within ObservableCollection

I just learned how to bind a ComboBox to an ObservableCollection. Woo hoo! Is there a way to bind a second ComboBox to the first ComboBox's selected collection? So each Item has an ObservableCollection of Peices. When you select an Item, I want the second ComboBox to show the selected Item's Peices!

public class Section
{
    public ObservableCollection<Item> Items { get; set; }

    public Section()
    {
        Items = new ObservableCollection<Item>();
    }

    public void AddItem()
    {
        string id = Items.Count.ToString();
        Items.Add(new Item("Item " + id));
    }
}

public class Item
{
    private string _name;

    public ObservableCollection<Peice> Peices { get; set; }

    public string Name
    {
        get { return _name; }
        set { _name = value; }
    }

    public Item(string name)
    {
        _name = name;
        Peices = new ObservableCollection<Peice>();
    }

    public void AddPeice()
    {
        string id = Peices.Count.ToString();
        Peices.Add(new Peices("Peice " + id));
    }
}

public class Peice
{
    private string _name;

    public string Name
    {
        get { return _name; }
        set { _name = value; }
    }

    public Peices(string name)
    {
        _name = name;
    }
}

<Grid>
    <ComboBox x:Name="cbItems" ItemsSource="{Binding Items}" DisplayMemberPath="Name" HorizontalAlignment="Left" Height="23" Margin="10,10,0,0" VerticalAlignment="Top" Width="120"/>
    <Button x:Name="button" Content="Add" HorizontalAlignment="Left" Margin="55,33,0,0" VerticalAlignment="Top" Width="75" Click="AddItem"/>

    <ComboBox x:Name="cbPeices" ItemsSource="{Binding Item.Peices}" DisplayMemberPath="Name" HorizontalAlignment="Left" Margin="10,72,0,0" VerticalAlignment="Top" Width="120"/>
    <Button x:Name="button1" Content="Add" HorizontalAlignment="Left" Margin="55,94,0,0" VerticalAlignment="Top" Width="75"/>
</Grid>

Update: Ok, so Items is a list of 'Item'. Item has a list of 'Peice'. I want combobox 2 to display the contents of the selected Item's Peices collection.

Upvotes: 2

Views: 575

Answers (3)

MisterXero
MisterXero

Reputation: 1128

Bind to the selected item of the first combobox like so:

<ComboBox x:Name="comboBox1" ItemsSource="{Binding Items}" Width="150" Height="30" DisplayMemberPath="Name"></ComboBox>
<ComboBox ItemsSource="{Binding SelectedItem.Peices, ElementName=comboBox1}" Width="150" Height="30" DisplayMemberPath="Name"></ComboBox>

Upvotes: 2

Abin
Abin

Reputation: 2956

Try This,

<ComboBox x:Name="cbItems" ItemsSource="{Binding Items, Mode=TwoWay, 
            UpdateSourceTrigger=PropertyChanged}" DisplayMemberPath="Name" 
            HorizontalAlignment="Left" Height="23" Margin="10,10,0,0" 
            VerticalAlignment="Top" Width="120"/>


<ComboBox x:Name="cbPeices" ItemsSource="{Binding Items, Mode=TwoWay,
                UpdateSourceTrigger=PropertyChanged}" 
          DisplayMemberPath="Name" SelectedItem="{Binding ElementName=cbItems, Path=SelectedItem}"
            HorizontalAlignment="Left" Margin="10,72,0,0" VerticalAlignment="Top" 
            Width="120"/>

Upvotes: 0

Maxime Tremblay-Savard
Maxime Tremblay-Savard

Reputation: 967

Simply bind both to the same thing but add the 2 way binding mode. So:

<Grid>
    <ComboBox x:Name="cbItems" ItemsSource="{Binding Items, Mode=TwoWay, 
                UpdateSourceTrigger=PropertyChanged}" DisplayMemberPath="Name" 
                HorizontalAlignment="Left" Height="23" Margin="10,10,0,0" 
                VerticalAlignment="Top" Width="120"/>
    <Button x:Name="button" Content="Add" HorizontalAlignment="Left" Margin="55,33,0,0" 
                VerticalAlignment="Top" Width="75" Click="AddItem"/>

    <ComboBox x:Name="cbPeices" ItemsSource="{Binding Items, Mode=TwoWay,
                    UpdateSourceTrigger=PropertyChanged}" DisplayMemberPath="Name" 
                HorizontalAlignment="Left" Margin="10,72,0,0" VerticalAlignment="Top" 
                Width="120"/>
    <Button x:Name="button1" Content="Add" HorizontalAlignment="Left" Margin="55,94,0,0" 
                VerticalAlignment="Top" Width="75"/>
</Grid>

Upvotes: 0

Related Questions