WPF Multicolumn Combobox - Binding value is whole POCO instead of a single POCO property

Question

I built a multicolumn combobox in WPF following this SO post: WPF ComboBox Multiple Columns

(Please excuse the mass of code samples ;))

The Combobox XAML

<ComboBox Name="cmbProductTypeMulti" IsEditable="False" Margin="0,2,10,2" MaxDropDownHeight="250"
          Text="{Binding Path=AcctData.ProductType}" ItemsSource="{Binding Path=ProductTypeSelection}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Margin="2" Text="{Binding Path=ProductType}"/>
        </DataTemplate>
    </ComboBox.ItemTemplate>
    <ComboBox.ItemContainerStyle>
        <Style TargetType="ComboBoxItem" BasedOn="{StaticResource ComboBoxItemStyle}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border Name="ComboBoxItemBorder" BorderThickness="1">
                            <Grid Name="ComboBoxItemGrid" TextElement.Foreground="Black">                                        
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="60"/>
                                <ColumnDefinition Width="150"/>                                            
                            </Grid.ColumnDefinitions>
                            <TextBlock Margin="5,3" Grid.Column="0" Text="{Binding ProductType}"/>
                            <TextBlock Margin="5,3" Grid.Column="1" Text="{Binding Description}" FontSize="10"/>                                        
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <!--- snip --->
                        </ControlTemplate.Triggers>                                        
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ComboBox.ItemContainerStyle>
</ComboBox>

ViewModel snippet

Public Class AccountsViewModel
    Inherits ViewModelBase

    //The view model's main Poco
    Dim _AcctData As Models.Account
    
    //The multicolumn combobox's Poco
    Dim _ProductTypeSelection As IEnumerable(Of Models.ProductType)

Public Property AcctData As Account
    Get
        Return _AcctData
    End Get
    Set(value As Account)
        MyBase.Set(Of Account)(Function() AcctData, _AcctData, value)
    End Set
End Property

Public Property ProductTypeSelection As IEnumerable(Of ProductType)
    Get
        Return _ProductTypeSelection
    End Get
    Set(value As IEnumerable(Of ProductType))
        MyBase.Set(Of IEnumerable(Of ProductType))(Function() ProductTypeSelection, _ProductTypeSelection, value)
    End Set
End Property

    ... 

End Class

View's Poco snippet

Public Class Account
    Inherits ObservableObject
    
    Private _ProductType As String  
    Public Property ProductType As String
        Get
            Return _ProductType
        End Get
        Set(value As String)
            MyBase.Set(Of String)(Function() ProductType, _ProductType, value)
        End Set
    End Property
    
    ...
    
End Class

Combobox's Poco

Public Class ProductType
    Inherits ObservableObject

    Private _ProductType As String
    Private _Description As String  
    
    Public Property ProductType As String
        ...
    End Property

    Public Property Description As String
        ...
    End Property

    ...
    
End Class

The Problem

First off, the when I load an account into the view model's AcctData.ProductType, the value is not displayed in the multicolumn combobox. I have a regular combobox bound to the same value which displays AcctData.ProductType initial value properly.

Secondly, when I select an item from the multicolumn combobox, the regular combobox loses its selected item and goes blank. When I go into debug and look at the vm's AcctData.ProductType, I find that it has been assigned the ToString value of the ProductType poco.

So it looks like the multicolumn combobox is trying to use the whole Poco to bind with. How can I get it use a property from a Poco as its binding value?

Thanks

Do you have any binding errors? Usually these would look like "BindingExpression path error:...". — piofusco, Dec 08 '14 at 20:08

grabthefish · Answer 1 · 2014-12-11T13:22:35.703

1

The first problem would probably be solved if you would call the ProductTypeSelection setter from the viewmodel's constructor to initialize the data, because currently it doesn't get set en thus won't raise the propertychanged event, currently your binding only knows about the initial data which is the default null

the second problem is probably caused because the xaml is taken the datatemplate over the controltemplate you have defined and would probably be solved if you put the xaml thats inside the controltemplate inside of the datatemplate

edited Dec 11 '14 at 13:22

answered Dec 11 '14 at 13:13

grabthefish

962
14
30

Thanks for the suggestion. Unfortunately, I'm not much of a XAML expert yet and my workaround seems to do the job. – voon Dec 15 '14 at 23:08

score 1 · Accepted Answer · answered Dec 15 '14 at 23:08

I managed to find a hacky work around.

Since the multicolumn combobox is binding using the Poco's ToString() value, I simply modified ToString() to return the ProductType property, which is the property that I want to be bound! Now the multicolumn combobox behaves as it should - even though its technically binding to the wrong property.

WPF Multicolumn Combobox - Binding value is whole POCO instead of a single POCO property

The Problem

2 Answers2