#1,010 – ComboBox Data Binding Basics, Part II

When using data binding, you specify the collection of items to fill the ComboBox by setting the ItemsSource property.

You can also bind the currently selected item in the ComboBox to an instance of an object in code.  You do this by binding the SelectedItem property to a property in your code that represents an instance of the appropriate type.  When the user selects an item in the ComboBox, the corresponding object is updated to refer to the selected object.

Assume that we have the following in our code behind:

  • Actor class, representing an actor
  • ActorList property, which is an ObservableCollection<Actor>
  • SelectedActor property, of type Actor

In the example below, we bind the ComboBox to the list of actors and the currently selected actor to the SelectedActor property.  As we select an actor, the Label updates, since it also binds to SelectedActor.

        <ComboBox ItemsSource="{Binding ActorList}" Margin="20"
                  DisplayMemberPath="FullName"
                  SelectedItem="{Binding SelectedActor}"/>
        <Label Content="{Binding SelectedActor.NameAndDates}"/>

1010-001
1010-002

Advertisement

#976 – SelectedItem Binding on an ItemsControl is Two-Way

When you use data binding to associate a property in your data context to the currently selected item in an ItemsControl (e.g. a ListBox), the data binding is by default two-way.  That is:

  • When the user selects a new item in the list, the value of the bound property changes
  • If the value of the bound property changes, the selection in the list changes

Suppose that we bind the ItemsSource of a ListBox to a collection of Actor objects and that we bind the SelectedItem property of the ListBox to a SelectedActor property in our data context (of type Actor).

When the user selects an item, the value of the SelectedActor property changes.  (Below, the labels are bound to sub-properties of SelectedActor).

976-003

If we instead change the value of SelectedActor (e.g. in code-behind after clicking a button), the currently selected item in the ListBox will change.

976-004

#964 – ListBox Data Binding Basics, Part I

You can use data binding to load and manage the items displayed in a ListBox control.

You bind the ItemsSource property of the ListBox to a collection that implements the IEnumerable interface.  The collection bound to can contain any type of object.

If the ListBox is displaying simple strings, you can set the DisplayMemberPath property to the string-typed property of a bound object  that should be used to get the display string for each item.

You can also use binding to bind the SelectedItem property of the ListBox to a property whose type matches the types in the collection that ItemsSource binds to.  When the user selects an item in the ListBox, the corresponding property is updated to refer to the correct item.  And if the property bound to is changed from code-behind, the selected item in the ListBox changes.

Next time: Code sample for all of this.

#906 – Programmatically Changing the Current Tab on a TabControl

You can change the currently selected tab on a TabControl in one of several ways:

  • Change the TabControl’s SelectedIndex property (0..n-1)
  • Change the TabControl’s SelectedItem property (if you have a reference to the TabItem for the tab that you want to switch to)
  • Use data binding and change the object that the SelectedItem is bound to

Below is an example of changing the SelectedIndex property when the user clicks on a Button.

        <TabControl Name="tabMeals">
            <TabItem Header="Breakfast">
                <StackPanel>
                    <RadioButton Content="Eggs"/>
                    <RadioButton Content="Cereal"/>
                    <RadioButton Content="Spam"/>
                </StackPanel>
            </TabItem>
            <TabItem Header="Lunch">
                <StackPanel>
                    <RadioButton Content="Ham Sandwich"/>
                    <RadioButton Content="Soup"/>
                    <RadioButton Content="Wimpy Burger"/>
                </StackPanel>
            </TabItem>
            <TabItem Header="Dinner">
                <StackPanel>
                    <RadioButton Content="Spam Sandwich"/>
                    <RadioButton Content="Spam Casserole"/>
                    <RadioButton Content="Spam Jello Surprise"/>
                </StackPanel>
            </TabItem>
        </TabControl>
        <Button Grid.Row="1" Content="Change Tabs" HorizontalAlignment="Center" Padding="10,5"
                Click="Button_Click"/>

 

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (tabMeals.SelectedIndex == (tabMeals.Items.Count - 1))
                tabMeals.SelectedIndex = 0;
            else
                tabMeals.SelectedIndex++;
        }

906-001