How to use a different template for selected and drop-down states in a combo box in Silverlight?

Question

I can not install ContentTemplate for ComboBoxItem. There is a reason why I am trying to do this - I want to have two entries for my data in the combo box. When the combo box is open (the menu is omitted), I want a text box (with the image name) and an image control under it. When I select an item, I want the combo box to display only the text box with the image name.

I thought I could achieve this by changing the ItemTemplate and ItemContainerStyle from ComboBox. ItemContainerStyle contains the following ContentPresenter:

<ContentPresenter HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> 

So, I assumed that I could just install the ContentTemplate here, and that would work. But I can not get it to work:

 <DataTemplate x:Key="ComboBoxDataTemplate"> <Grid> <TextBlock Text="{Binding Path='Name'}"/> </Grid> </DataTemplate> <DataTemplate x:Key="ComboBoxItemTemplate"> <StackPanel> <TextBlock Text="{Binding Path='Name'}"/> <Image Source="{Binding Path='Source'}" Width="64" Height="64"/> </StackPanel> </DataTemplate> <Style x:Key="ComboBoxItemStyle1" TargetType="ComboBoxItem"> ... <Setter Property="ContentTemplate" Value="{StaticResource ComboBoxItemTemplate}"/> ... 

Here is my combo box:

 <ComboBox Width="70" Margin="3,0,0,0" ItemsSource="{StaticResource Source}" ItemTemplate="{StaticResource ComboBoxDataTemplate}" ItemContainerStyle="{StaticResource ComboBoxItemStyle1}" /> 

The only way to get this to work is to remove the ContentPresenter from the ItemContainerStyle and replace it with the contents of my custom template (ComboBoxItemTemplate). But I didn’t think I should use this approach, as this means that ContentPresenter no longer exists (and the code in ComboBox can rely on it to exist).

Any help on showing the combined block with another drop down and selected templates is welcome!

Answer 1

ComboBox.ItemTemplate is just a convenient way to install ComboBoxItem.ContentTemplate. So your code above is basically trying to install ComboBoxItem.ContentTemplate twice.

As Joby pointed out, you can only try using your own style. You can safely exclude ContentPresenter if you always know the type of Content. ContentPresenter simply allows you to use the DataTemplate to display some random data. But you can just replace it with TextBlock and Image. You just lose the ability to specify a DataTemplate.

The problem with Jobi's approach is that the select element will not display it, even if it is in a drop-down list. In fact, the selected item is displayed in two places (the drop-down list and the main part of the ComboBox). In one place you need one DataTemplate and you need another DataTemplate in another.

Restore your ComboBox best. You can get the default style from here . There is a ContentPresenter named "ContentPresenter". You will need:

• Remove / change the name of the ContentPresenter, so the ComboBox will not automatically set the Content / ContentTemplate properties
• Bind the ContentPresenter.Content property as follows: "{TemplateBinding SelectedObject}"
• Set the ContentPresenter.ContentTemplate property to your DataTemplate without image
• Set the ComboBox.ItemTemplate property to a DataTemplate using Image and TextBlock, as you were
• Give the ComboBox Style an explicit key, for example x: Key = "MyComboBoxStyle"
• Use a style in your ComboBox, for example Style = "{StaticResource MyComboBoxStyle}"

This effectively ignores ComboBoxItem.ContentTemplate when displaying the selected item in the body of the ComboBox, but uses it when displaying ComboBoxItem in the drop-down list.

Answer 2

You can only achieve this with the ItemContainerStyle. Add TextBlock and Image instead of ContentPresenter. Add a VisualStateManager and switch image visibility control based on the selected VSM state.

Answer 3

DataTemplate is primarily intended for data visualization. It is better to give all the dynamics associated with the user interface inside the ControlTemplate (control behavior). There is no potential problem if you do not have ContentPresenter. The only problem is if you want to reuse this ControlTemplate from some other ComboBox. You can then declare another clean management template with ContentPresenter.