Toggle between combo-boxes and persist label in combo-box in WPF(XAML)

Question

I am new to WPF and unable to implement the below scenario : Three drop down boxes side by side. I have tried using Combo Box. I have tried to explain the problems with the help of an image Example : (refer image)

• I want to select any one - name/school/email. Say I select Name1 , then I should not be able to choose any of the other two dropdowns - School/Email.However, in my implementation I am still able to select values from the other dropdowns as well.
• If I change my mind and move to the School dropdown and leave the Name dropdown, the Name dropdown should change the value from Name1(which was selected in Step 1) to Name(which is the title of that button), However, in my implementation both the selections - Name1 and School1 are persisting.

I tried implementing this with the help of these two posts and the nearest I could get was as I mentioned in the example above : How to display default text "--Select Team --" in combo box on pageload in WPF? and Name on combobox in WPF

PS : Name/School/ Email are NOT watermarks. They are the title of the button which is there by default as you land on that page/window. Any help/resources is appreciated.

Answer 1

You can use the selection changed event of the comboboxes to set the text of each if you are going to code in code-behind:

<StackPanel Grid.Row="1" Orientation="Horizontal">
        <ComboBox x:Name="cmbName" ItemsSource="{Binding NameList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Text="Name"
                  SelectionChanged="cmbName_SelectionChanged" MinWidth="80" Margin="10" IsEditable="True" IsReadOnly="True"/>
        <ComboBox x:Name="cmbSchool" ItemsSource="{Binding SchoolList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Text="School"
                  SelectionChanged="cmbSchool_SelectionChanged" MinWidth="80" Margin="10" IsEditable="True" IsReadOnly="True"/>
        <ComboBox x:Name="cmbEmail" ItemsSource="{Binding EmailList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Text="Email"
                  SelectionChanged="cmbEmail_SelectionChanged" MinWidth="80" Margin="10" IsEditable="True" IsReadOnly="True"/>
</StackPanel>

In the selection changed of the Name combobox do the following:

private void cmbName_SelectionChanged(object sender, SelectionChangedEventArgs e)
{      
        if(cmbName.SelectedItem != null)
        {
            cmbSchool.SelectedItem = null;
            cmbSchool.Text = "School";
            cmbEmail.SelectedItem = null;
            cmbEmail.Text = "Email";
        }
}

Do the same for each of the other comboboxes; just change the combobox names respectively.

If you are using MVVM, then bind the SelectedItem and the Text property of each of the combobox and write a common method which sets the selected items to null and also the text property inside the setter of each of the bound SelectedItems respectively.