How to bind a combobox with Foreign Key in WPF MVVM

Question

I know that there are many questions regarding DataBinding a combobox and also there are many tutorials but I feel those tutorials hard. So, I am asking this question.

Suppose I have two tables in my database:

Customer

CustomerID
Name
GenderID

GenderTypes

GenderTypeID
GenderType

I have created my models using ADO.Net Entity Data Model. So, I am using Entity Framework.

Now I have a ViewModel in which I declare a property called Customers as below:

private List<Customer> _customers;
public List<Customer> Customers
{
    get
    {
        return _customers;
    }
    set
    {
        _customers = value;
        OnPropertyChanged("Customers");
    }
}

Now I have a View Like this:

<Window ......>

    <Window.DataContext>
        <vm:MainWindowViewModel />
    </Window.DataContext>

    <Grid>
        <Grid.RowDefinitions>
            ..
            ..
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            ..
            ..
        </Grid.ColumnDefinitions>

        <TextBlock Text="Name" ....../>
        <TextBox Text="{Binding Name}"...../>

        <TextBlock Text="Gender" ....../>
        <TextBox ItemsSource="????"
                 SelectedValue="????"
                 SelectedValuePath="????"...../>

    </Grid>
</Window>

I dont know how to bind the combobox, so that I can see Male and Female as the items of combobox and when I select I should get corresponding GenderID instead of GenderType.

I know this is a very simple and straight forward question but I am very much new to WPF and trying to learn it.

Answer 1

Try this:

<ComboBox 
    <!--ItemsSource bound to property of type collection of GenderTypes, containing all gender types you have -->
    ItemsSource="{Binding MyGenderTypes}" 
    <!--Tell comboBox to display GenderType property of selected GenderTypes-->
    DisplayMemberPath="GenderType" 
    <!--Tell comboBox that the SelectedValue should be GenderID property of selected GenderTypes-->
    SelectedValuePath="GenderID" 
    <!--SelectedValue bound to property of type int (the same type of GenderID)-->
    SelectedValue="{Binding SelectedGenderID, Mode=TwoWay}" />

You will get the combobox displaying GenderType, but the selected value will be the corresponding GenderID. Just as you wish...

Answer 2

Add Genders in ViewModel class

public List<GenderTypes> Genders
        {
            get
            {
                return _genders;
            }
            set
            {
                _genders = value;
                OnPropertyChanged("Genders");
            }
        }

After use like this.

<ListBox ItemsSource="{Binding Customers}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="Name" />
                        <TextBox Text="{Binding Name}" />
                        <TextBlock Text="Gender" />
                        <ComboBox ItemsSource="{Binding Genders,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Window}}}" DisplayMemberPath="GenderType" SelectedValue="{Binding GenderID}" SelectedValuePath="GenderTypeID"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>