如何根据我的第一个组合框的选择绑定以下列表框

Question

I have 2 combo boxes. (combo1 and combo2)
The first contains 2 options. car model and car wheels.
The second contains 4 options. BMW, Mercedes, 4 wheels, 5 wheels.

I want the information for the second combo box to only show BMW and mercedes if combo box 1 is chosen as car model and only show 4 wheels and 5 wheels if combo box 1 is chosen as car wheels.

I am looking for a way to call the collection accordingly but unable to. Please advice how I can do this. Thanks.

<ComboBox Name="combo1" Width="120">
                <ListBoxItem Name="box1" Content="Car Model"/> 
                <ListBoxItem Name="box2" Content="Car Wheels"/>
            </ComboBox>

<ComboBox Name="combo2" Width="120">
                <ListBoxItem Name="box3" Content="BMW"/> 
                <ListBoxItem Name="box4" Content="Mercedes"/>
                <ListBoxItem Name="box5" Content="4 Wheels"/> 
                <ListBoxItem Name="box6" Content="5 Wheels"/>
            </ComboBox>


private void Button_Click(object sender, RoutedEventArgs e)
{
    if (comboBox1.Text == "Car Model")
            {
                comboBox2.Items.Clear();
                comboBox2.Items.Add(box3);
                comboBox2.Items.Add(box4);
            }
            else
            {
                comboBox2.Items.Clear();
                comboBox2.Items.Add(box5);
                comboBox2.Items.Add(box6);
            }
}

This doesn't work as I would need to click the button for this to happen. I want it to occur as long as the first combobox(combo1) has a selected option.

Also these listboxitems are automatically in a collection when I create thus I believe they are already stored in a form of array. I am looking to know how I can access this array so I can loop through that instead of adding one by one.

Please advice how I can do these. Thanks.

Answer 1

First of all you should add ComboBoxItem and not ListBoxItem .

Second , you can do all that in XAML, no need to use code behind. Create array under resource section and set ItemsSource based on SelectedItem in first comboBox. This is how you do it XAML way:

<StackPanel>
    <StackPanel.Resources>
        <x:Array Type="ComboBoxItem" x:Key="ModelsArray">
            <ComboBoxItem Name="box3" Content="BMW"/>
            <ComboBoxItem Name="box4" Content="Mercedes"/>
        </x:Array>
        <x:Array Type="ComboBoxItem" x:Key="WheelsArray">
            <ComboBoxItem Name="box5" Content="4 Wheels"/>
            <ComboBoxItem Name="box6" Content="5 Wheels"/>
        </x:Array>
    </StackPanel.Resources>
    <ComboBox Name="combo1" Width="120">
        <ComboBoxItem Name="box1" Content="Car Model"/>
        <ComboBoxItem Name="box2" Content="Car Wheels"/>
    </ComboBox>

    <ComboBox Name="combo2" Width="120">
        <ComboBox.Style>
            <Style TargetType="ComboBox">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding SelectedItem.Content, 
                                        ElementName=combo1}" Value="Car Model">
                        <Setter Property="ItemsSource"
                                Value="{StaticResource ModelsArray}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding SelectedItem.Content, 
                                       ElementName=combo1}" Value="Car Wheels">
                        <Setter Property="ItemsSource"
                                Value="{StaticResource WheelsArray}"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ComboBox.Style>
    </ComboBox>
</StackPanel>

OR

If you still want to do it in code behind, hook SelectionChanged event.

<ComboBox Name="combo1" Width="120" SelectionChanged="ComboBox_SelectionChanged">
    <ComboBoxItem Name="box1" Content="Car Model"/> 
    <ComboBoxItem Name="box2" Content="Car Wheels"/>
</ComboBox>
<ComboBox Name="combo2" Width="120"/>

Code behind :

private void ComboBox_SelectionChanged(object sender,
                                       SelectionChangedEventArgs e)
{
   if (((ComboBoxItem)combo1.SelectedItem).Content.ToString() == "Car Model")
   {
      combo2.Items.Clear();
      combo2.Items.Add("BMW");
      combo2.Items.Add("Mercedes");
   }
   else
   {
      combo2.Items.Clear();
      combo2.Items.Add("4 Wheels");
      combo2.Items.Add("5 Wheels");
   }
}