How to change combobox style to shortcut or hyperlink in WPF?

Question

I want to change the style of the list control to look like a hyperlink.

When a user clicks on a hyperlink (combo box), it displays the options in the combo box.

The idea is that I want the list control to display as plain text (a more readable form).

If anyone created this type of sieve, please let me know.

Answer 1

You can edit the ComboBox template and replace the ContentPresenter with a button like Hyperlink. This should work very well, and this is just a bit of XAML coding. You can find the original ComboBox template here or use Expression Blend.

EDIT:
Ok, well, you have a ComboBox template that looks something like this (extremely simplified!):

<ControlTemplate TargetType="{x:Type ComboBox}"> <Grid> <!-- The popup that is displayed after you clicked on the ComboBox. --> <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom"/> <!-- The button that is used to open the drop down. --> <ToggleButton x:Name="btnOpenDropDown" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/> <!-- The control which displays the currently selected item. --> <ContentPresenter x:Name="contentPres" Content="{TemplateBinding SelectionBoxItem}"/> </Grid> </ControlTemplate> 

Actually, this is a little more complicated because ToggleButton should take up the entire width (since the drop-down list should open when you click on the ComboBox), but it should only be displayed to the right of the content. However, for your scenario, we can neglect this, since you will not have a drop-down button.

Now, since you want to display content only as a hyperlink and without a button, you no longer need to distinguish between ContentPresenter and ToggleButton. Therefore, instead of using a separate ContentPresenter, you can use ToggleButton to represent the content, since it also has the Content property. Something like that:

 <ControlTemplate TargetType="{x:Type ComboBox}"> <Grid> <!-- The popup that is displayed after you clicked on the ComboBox. --> <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom"/> <!-- The button that is used to open the drop down AND to display the content (now). --> <ToggleButton x:Name="btnOpenDropDown" Content="{TemplateBinding SelectionBoxItem}" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/> </Grid> </ControlTemplate> 

Of course, there are some additional properties for moving from ContentPresenter to ToggleButton.

Now all you have to do is define another template for ToggleButton that looks like a hyperlink (and then assign that ToggleButton template above). In fact, it should not be difficult to assume that your content is always a string (again, simplified!):

 <Style x:Key="hyperlinkButtonStyle" TargetType="{x:Type ButtonBase}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ToggleButton}"> <TextBlock Text="{TemplateBinding Content}" TextDecorations="Underline"/> </ControlTemplate> </Setter.Value> </Setter> </Style> 

This simplified code shows how you could do this. There are, of course, other ways, and this still needs some work, as the example has been simplified. However, I can not offer you the full code.