[WPF] ComboBox Style problems with DisplayMemberPath

Question

I have a ComboBox and I have set the combo.ItemsSource property to a List object. The Book class contains two properties: "Abbreviation" and "Name".

I have set the ComboBox's DisplayMemberPath to "Abbreviation" but the following style that is set on the ComboBox does not display the Abbreviation property, but instead shows "Words.Book" which is the name of the class. The ComboBox drop-down displays a list correctly (Using the specified Abbreviation property). The problem is in the selected ComboBox item, the one displayed when the ComboBox' drop-down is closed.

I guess the problem is in ContentPresenter in DataTemplate but I was unable to find a successful solution. Currently the ContentPresenter's Content property is set to Content="{TemplateBinding Content} but I don't know if that's how it should be.

Any ideas how to show the property specified in DisplayMemberPath on the selected item?

Thank you

the code:

<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
 <Grid>
  <Grid.ColumnDefinitions>
   <ColumnDefinition />
   <ColumnDefinition Width="20" />
  </Grid.ColumnDefinitions>
  <Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="2" BorderThickness="1" Background="{DynamicResource ribbonTitleFade}" />
  <Border Grid.Column="0" CornerRadius="2,0,0,2" Margin="1,6,1,6" BorderBrush="{DynamicResource boSecE}" BorderThickness="0,0,1,0" />
  <Path x:Name="Arrow" Grid.Column="1" Fill="White" 
     HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"
     />
 </Grid>
 <ControlTemplate.Triggers>
  <Trigger Property="ToggleButton.IsMouseOver" Value="true">
   <Setter TargetName="Border" Property="Background" Value="{DynamicResource ribbonTitleFade}" />
  </Trigger>
  <Trigger Property="ToggleButton.IsChecked" Value="true">
   <Setter TargetName="Border" Property="Background" Value="{DynamicResource ribbonTitleFade}" />
  </Trigger>
  <Trigger Property="IsEnabled" Value="False">
   <Setter TargetName="Border" Property="Background" Value="Black" />
   <Setter TargetName="Border" Property="BorderBrush" Value="Black" />
   <Setter Property="Foreground" Value="Gray"/>
   <Setter TargetName="Arrow" Property="Fill" Value="Gray" />
  </Trigger>
 </ControlTemplate.Triggers>
</ControlTemplate>

<Style x:Key="comboBoxBorderTransparent" TargetType="Control">
 <Setter Property="BorderBrush" Value="{DynamicResource boPrimC}" />
</Style>


<Style x:Key="comboItemStyle" TargetType="ComboBoxItem">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="{x:Type ComboBoxItem}">
    <Border x:Name="backBorder" >
     <StackPanel Orientation="Horizontal">
      <Rectangle x:Name="rectA" Stroke="White" Width="4" Height="4" Fill="#80FFFFFF" Margin="5,0,0,0" HorizontalAlignment="Left" />
      <TextBlock x:Name="text" Foreground="White" FontSize="10px">
       <ContentPresenter Margin="8,1,0,1"
             SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
             />
      </TextBlock>
     </StackPanel>
    </Border>
    <ControlTemplate.Triggers>
     <Trigger Property="ComboBoxItem.IsMouseOver" Value="true">
      <Setter TargetName="rectA" Property="Stroke" Value="Black" />
      <Setter TargetName="rectA" Property="Fill" Value="#80000000" />
      <Setter TargetName="backBorder" Property="Background" Value="White"/>
      <Setter TargetName="text" Property="Foreground" Value="{DynamicResource boPrimC}"/>
     </Trigger>
    </ControlTemplate.Triggers>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

<DataTemplate x:Key="comboSelectedItemTemplate">
 <TextBlock Foreground="White" FontSize="10px">
  <ContentPresenter Content="{TemplateBinding Content}" />
 </TextBlock>
</DataTemplate>

<Style TargetType="ComboBox">
 <Setter Property="SnapsToDevicePixels" Value="true"/>
 <Setter Property="OverridesDefaultStyle" Value="true"/>
 <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
 <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
 <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
 <Setter Property="MinWidth" Value="60"/>
 <Setter Property="MinHeight" Value="20"/>
 <Setter Property="ItemContainerStyle" Value="{DynamicResource comboItemStyle}"/>
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="ComboBox">
    <Grid>
     <ToggleButton 
      Name="ToggleButton" Grid.Column="2" 
      Template="{StaticResource ComboBoxToggleButton}" 
      Focusable="false"
      IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
      ClickMode="Press">
     </ToggleButton>

     <ContentPresenter HorizontalAlignment="Center"
           VerticalAlignment="Center"
           Name="ContentSite"
           IsHitTestVisible="False" 
           Content="{TemplateBinding SelectionBoxItem}"
           ContentTemplate="{DynamicResource comboSelectedItemTemplate}"
           ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
           Margin="3,3,23,3"
           />

     <Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}"
         AllowsTransparency="False" Focusable="False" PopupAnimation="Slide">
      <Grid Name="DropDown" SnapsToDevicePixels="True" 
         MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
       <Border x:Name="DropDownBorder" Background="{DynamicResource ribbonTitleFade}"
         BorderThickness="1" BorderBrush="{DynamicResource boPrimC}" />
       <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
       </ScrollViewer>
      </Grid>
     </Popup>
    </Grid>
    <ControlTemplate.Triggers>
     <Trigger Property="HasItems" Value="false">
      <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
     </Trigger>
     <Trigger Property="IsEnabled" Value="false">
      <Setter Property="Foreground" Value="Black"/>
     </Trigger>
     <Trigger Property="IsGrouping" Value="true">
      <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
     </Trigger>
     <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
      <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="2"/>
      <Setter TargetName="DropDownBorder" Property="Margin" Value="0"/>
     </Trigger>
     <Trigger Property="IsEditable" Value="true">
      <Setter Property="IsTabStop" Value="false"/>
      <!--<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>-->
     </Trigger>
    </ControlTemplate.Triggers>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
 <Style.Triggers>
 </Style.Triggers>
</Style>

Answer 1

If your template doesn't explicitly handles the value of DisplayMemberPath, then the template won't use it to change the ComboBoxItem. You'll have to bind to the member directly in the ControlTemplate, or use a separate DataTemplate.

Answer 2

I think you want something more like this in your ComboBox template:

<ContentPresenter Content="{TemplateBinding ComboBox.SelectionBoxItem}"
 ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
 ContentStringFormat="{TemplateBinding ComboBox.SelectionBoxItemStringFormat}"
 Margin="{TemplateBinding Control.Padding}"
 HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
 VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
 SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />

HTH, Kent