How do I make a WPF button look like a link?

Question

I want to use buttons in WPF that are styled like links. Microsoft does this (seemingly inconsistently) in its Windows dialog boxes.

They look like blue text. And change color and underline when the mouse cursor hovers over.

Example:

I got it working. (thanks to Christian, Anderson Imes, and MichaC) But, I had to put a TextBlock inside my button.

How can I improve my style—to make it work without requiring the TextBlock inside my Button?

Usage XAML

<Button Style="{StaticResource HyperlinkLikeButton}">
    <TextBlock>Edit</TextBlock>
</Button>

Style XAML

<Style x:Key="HyperlinkLikeButton" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <ContentPresenter />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}" />
    <Setter Property="Cursor" Value="Hand" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <ControlTemplate.Resources>
                            <Style TargetType="{x:Type TextBlock}">
                                <Setter Property="TextDecorations" Value="Underline" />
                            </Style>
                        </ControlTemplate.Resources>
                        <ContentPresenter />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

Solution 1

Do you know there is a Hyperlink class/tag? It looks like a hyperlink and can work also as button (can use URI and/or command and/or click event).

EDIT:

Example of usage:

<TextBlock>                                
    <Hyperlink Command="{Binding SomeCommand, ElementName=window}" CommandParameter="{Binding}">Link
    </Hyperlink>
</TextBlock>

Solution 2

I'm a little late for the party but ...

The simplest and cleanest approach IMO :

<Style x:Key="HyperLinkButtonStyle" TargetType="Button">
    <Setter Property="Focusable" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <TextBlock>
                    <Hyperlink>
                        <Run Text="{TemplateBinding Content}" />
                    </Hyperlink>
                </TextBlock>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

• Faithful, no emulation : we just use the Hyperlink itself
• Respectful : the focus, which is an important aspect, is preserved

Solution 3

Using the following style or template does not require you to use the TextBlock element:

  <ControlTemplate x:Key="HyperlinkLikeButtonTemplate" TargetType="{x:Type Button}">
      <TextBlock x:Name="innerText" Foreground="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}" Cursor="Hand" >
        <ContentPresenter />
      </TextBlock>
    <ControlTemplate.Triggers>
      <Trigger Property="Button.IsMouseOver" Value="true">
        <Setter TargetName="innerText" Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
        <Setter TargetName="innerText" Property="TextDecorations" Value="Underline" />
      </Trigger>
    </ControlTemplate.Triggers>
  </ControlTemplate>

  <Style x:Key="HyperlinkLikeButton" TargetType="{x:Type Button}">
    <Setter Property="Template" Value="{StaticResource HyperlinkLikeButtonTemplate}" />
  </Style> 

Usage XAML

<Button Style="{StaticResource HyperlinkLikeButton}" Content="Edit" />

or

<Button Style="{StaticResource HyperlinkLikeButton}">
    Edit
</Button>

or you can use the template directly

<Button Template="{StaticResource HyperlinkLikeButtonTemplate}" Content="Edit" />

Solution 4

I think the trouble is that button is a content control, but the link style works only with text as a content. This is the reason the code you have is designed that way. I think we can work in the control template by specifying a textblock instead of content presenter, but what property bind to it ? So my proposal is: subclass the button and declare a dependency property of type string and use that property to bind the text in the ControlTemplate.

View more solutions

Comments

[Grant Thomas]

What is your button actually doing when clicked? Just navigating?

[aroon65]

Hyperlink is a FrameworkContentElement, not a FrameworkElement. Silverlight has a HyperlinkButton which would fit the bill, but alas WPF does not have one. sigh

[Grant Thomas]

+1: That's what I was thinking - that a page URI could be specified, wasn't sure about the click event.

[Matěj Zábský]

@Kent Boogaart: And? Just wrap the link in a TextBlock and you are done. I happily use hyperlinks like this all over the place. It is certainly easier (and more meaningful) than twisting button to look like a hyperlink.

[aroon65]

how does that solve the problem of the OP? Now he needs to specify both a TextBlock and a Hyperlink within it.

[Robert Rossney]

Just implement a custom control. That seems like a somewhat over the top answer, but it's certainly not more over the top than restyling the button's control template.

[Gobe]

Your solution is great, my only modification was to put the whole ControlTemplate block inside the Style "Template" property - then it is not required to name a key for the ControlTemplate and it is easier to read.

[Wouter]

For this to really work the Command and CommandParameter of the HyperLink needs to bind to the original properties on the button.