How to change the style of a combobox to a label or hyperlink in WPF?

Question

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

When user clicks on the hyperlink ( combo box) it show options in the combobox to select.

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

If anybody created this type of sytle please let me know.

Answer 1

You could edit the ComboBox template and replace the ContentPresenter with a Hyperlink-style button. This should work pretty well, and it is just a bit of XAML coding. You can find the original ComboBox template here, or using Expression Blend.

EDIT:
OK, well, you have a ComboBox template which 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, it is a bit more complicated because the ToggleButton must occupy the whole width (since the drop down should open whereever you click on the ComboBox), but it should display only on 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 only want to display the content as a hyperlink and no button besides it, you no longer need a distinction between ContentPresenter and ToggleButton. Therefore, instead of using a separate ContentPresenter, you could use the ToggleButton to present the content since it also has a 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 to move from the ContentPresenter to the ToggleButton.

Now, all you have to do is define another template for the ToggleButton which looks like a Hyperlink (and then assign this template to the ToggleButton above). Actually, this should not be difficult assuming 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 it. There are certainly other ways, and it still involves some work for you as the example was simplified. However, I cannot offer you the complete code.