How do I make my WPF User Control's dependency properties update my view model?

Question

Hi all,

I'm trying to create a user control with dependency properties to bind to. Internally I have a ComboBox that is bound to these same properties, but the binding only works one way. The ComboBox fills from the ItemsSource, but SelectedItem doesn't get updated back to the viewmodel I'm binding to.

A simplified example:

This is the view model to bind with the user control:

public class PeopleViewModel : INotifyPropertyChanged
{
    public PeopleViewModel()
    {
        People = new List<string>( new [] {"John", "Alfred","Dave"});
        SelectedPerson = People.FirstOrDefault();
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private IEnumerable<string> _people;
    public IEnumerable<string> People 
    { 
        get { return _people; } 
        set
        {
            _people = value;
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs("People"));
            }
        }
    }

    private string _selectedPerson;
    public string SelectedPerson 
    {
        get { return _selectedPerson; }
        set 
        { 
            _selectedPerson = value;
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs("SelectedPerson"));
            }
        } 
    }
}

This is the User control:

<UserControl x:Class="PeopleControlTest.PeopleControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" d:DesignHeight="56" d:DesignWidth="637">
<StackPanel >
    <ComboBox Margin="11"
              ItemsSource="{Binding BoundPeople, RelativeSource={RelativeSource AncestorType=UserControl}}"
              SelectedItem="{Binding BoundSelectedPerson, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
</StackPanel>

with code behind

public partial class PeopleControl : UserControl
{
    public PeopleControl()
    {
        InitializeComponent();
    }

    public static readonly DependencyProperty BoundPeopleProperty =
        DependencyProperty.Register("BoundPeople", typeof(IEnumerable<string>), typeof(PeopleControl), new UIPropertyMetadata(null));

    public static readonly DependencyProperty BoundSelectedPersonProperty =
        DependencyProperty.Register("BoundSelectedPerson", typeof(string), typeof(PeopleControl), new UIPropertyMetadata(""));

    public IEnumerable<string> BoundPeople
    {
        get { return (IEnumerable<string>)GetValue(BoundPeopleProperty); }
        set { SetValue(BoundPeopleProperty, value); }
    }

    public string BoundSelectedPerson
    {
        get { return (string)GetValue(BoundSelectedPersonProperty); }
        set { SetValue(BoundSelectedPersonProperty, value); }
    }
}

And this is how I bind the user control in the main window (with the windows data context set to an instance of the viewmodel)

<Window x:Class="PeopleControlTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:controls="clr-namespace:PeopleControlTest"
    Title="MainWindow" Height="350" Width="525">
    <Grid>
        <controls:PeopleControl 
            BoundPeople="{Binding People}" 
            BoundSelectedPerson="{Binding SelectedPerson}"/>
    </Grid>
</Window>

The combobox in the user control fills with the names, but when I select a different name this doesn't get updated back to the view model. Any idea what I'm missing here?

Thanks!

Answer 1

Some properties bind two-way by default (Including SelectedItem) but your BoundSelectedPerson does not. You can set the Mode of the binding:

   <controls:PeopleControl 
            BoundPeople="{Binding People}" 
            BoundSelectedPerson="{Binding SelectedPerson, Mode=TwoWay}"/>

Or you can make it TwoWay by default by setting a flag on the DependencyProperty:

    public static readonly DependencyProperty BoundSelectedPersonProperty =
        DependencyProperty.Register("BoundSelectedPerson", typeof(string), typeof(PeopleControl), new FrameworkPropertyMetadata("",FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));