Wpf – Caliburn Micro Bindable collection – binding to combobox item source displays wrong text

bindingcaliburn.microcomboboxwpf

I have this stupid problem. I bind from view model class property type of BindableCollection to the ItemSource property of ComboBox control.

Code from view model class:

public class SpiritUser
{
    public string Nick { get; set; }

    public string Password { get; set; }
}


    public BindableCollection<SpiritUser> SpiritUsers
    {
        get { return _spiritUsers; }
        set
        {
            _spiritUsers = value;
            NotifyOfPropertyChange(() => SpiritUsers);
        }
    }


//constructor of view model class
        public LogOnViewModel()
        {
            SpiritUsers = new BindableCollection<SpiritUser>
                        {
                            new SpiritUser
                                {
                                    Nick = "Spirit_1",
                                    Password = "slniecko1"
                                },
                            new SpiritUser
                                {
                                    Nick = "Spirit_2",
                                    Password = "slniecko1"
                                }
                        };
        }

In view I have this:

  Style on comboBox:

    <Style x:Key="LogOnView_NickComboBox" TargetType="{x:Type ComboBox}">
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Label Content="{Binding Path=Nick}" Grid.Column="0" Grid.Row="0"/>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Height" Value="25"/>
        <Setter Property="FontSize" Value="13"/>
        <Setter Property="Margin" Value="10,4,10,4"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>

ComboBox control:

<ComboBox ItemsSource="{Binding Path=SpiritUsers, Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"
          Style="{StaticResource LogOnView_NickComboBox}"
          SelectedValuePath="Nick"
          Text="{Binding Path=Nick, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged}"
          SelectedValue="{Binding Path=Nick, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
          IsEditable="True"/>

If I select some comboBox item I see Spirit.Models.SpiritUser instead of item text.

Problem cause if comboBox property IsEditable is set on true.

How can I solve this problem, I need bind property from view model on comboBox but also I need have comboBox editable and bind user input to property in view model.

Best Answer

In case of editable combobox use DisplayMemberPath property instead of ItemTemplate to specify what property of bound object you want to be displayed:

<ComboBox ItemsSource="{Binding Path=SpiritUsers, Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"
          Style="{StaticResource LogOnView_NickComboBox}"
          DisplayMemberPath="Nick"
          SelectedValuePath="Nick"
          Text="{Binding Path=CurrentUserNick, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged}"
          IsEditable="True"/>

In case if you still want to use ItemTemplate then you can specify what property of you object should be displayed in the text box via TextSearch.TextPath attached property:

<ComboBox ItemsSource="{Binding Path=SpiritUsers, Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"
          Style="{StaticResource LogOnView_NickComboBox}"
          SelectedValuePath="Nick"
          TextSearch.TextPath="Nick"
          Text="{Binding Path=CurrentUserNick, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged}"
          IsEditable="True"/>

Related Solutions

C# – Binding a WPF ComboBox to a custom list

You set the DisplayMemberPath and the SelectedValuePath to "Name", so I assume that you have a class PhoneBookEntry with a public property Name.

Have you set the DataContext to your ConnectionViewModel object?

I copied you code and made some minor modifications, and it seems to work fine. I can set the viewmodels PhoneBookEnty property and the selected item in the combobox changes, and I can change the selected item in the combobox and the view models PhoneBookEntry property is set correctly.

Here is my XAML content:

<Window x:Class="WpfApplication6.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
<Grid>
    <StackPanel>
        <Button Click="Button_Click">asdf</Button>
        <ComboBox ItemsSource="{Binding Path=PhonebookEntries}"
                  DisplayMemberPath="Name"
                  SelectedValuePath="Name"
                  SelectedValue="{Binding Path=PhonebookEntry}" />
    </StackPanel>
</Grid>
</Window>

And here is my code-behind:

namespace WpfApplication6
{

    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            ConnectionViewModel vm = new ConnectionViewModel();
            DataContext = vm;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            ((ConnectionViewModel)DataContext).PhonebookEntry = "test";
        }
    }

    public class PhoneBookEntry
    {
        public string Name { get; set; }

        public PhoneBookEntry(string name)
        {
            Name = name;
        }

        public override string ToString()
        {
            return Name;
        }
    }

    public class ConnectionViewModel : INotifyPropertyChanged
    {
        public ConnectionViewModel()
        {
            IList<PhoneBookEntry> list = new List<PhoneBookEntry>();
            list.Add(new PhoneBookEntry("test"));
            list.Add(new PhoneBookEntry("test2"));
            _phonebookEntries = new CollectionView(list);
        }

        private readonly CollectionView _phonebookEntries;
        private string _phonebookEntry;

        public CollectionView PhonebookEntries
        {
            get { return _phonebookEntries; }
        }

        public string PhonebookEntry
        {
            get { return _phonebookEntry; }
            set
            {
                if (_phonebookEntry == value) return;
                _phonebookEntry = value;
                OnPropertyChanged("PhonebookEntry");
            }
        }

        private void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }
}

Edit: Geoffs second example does not seem to work, which seems a bit odd to me. If I change the PhonebookEntries property on the ConnectionViewModel to be of type ReadOnlyCollection, the TwoWay binding of the SelectedValue property on the combobox works fine.

Maybe there is an issue with the CollectionView? I noticed a warning in the output console:

System.Windows.Data Warning: 50 : Using CollectionView directly is not fully supported. The basic features work, although with some inefficiencies, but advanced features may encounter known bugs. Consider using a derived class to avoid these problems.

Edit2 (.NET 4.5): The content of the DropDownList can be based on ToString() and not of DisplayMemberPath, while DisplayMemberPath specifies the member for the selected and displayed item only.

Wpf combobox text property binding problem

Thanks for your replies. But I could never get it to work instead, I made my own UserControl which comprises a textbox overlayed over a combobox, and manipulate those two controls to meet my needs. A long way to go to solve a simple problem, but it works in the end.

Best Answer

Related Solutions

C# – Binding a WPF ComboBox to a custom list

Wpf combobox text property binding problem

Related Topic