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>

Answer 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>

Answer 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

Answer 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" />

Answer 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.

Answer 5

Unless I'm missing something, couldn't you get away with styling the TextBlock, if you're applying the styles inline as opposed to globally, anyway? For instance:

<Style x:Key="LinkButton" TargetType="TextBlock">            
    <Setter Property="Cursor" Value="Hand" />
    <Setter Property="Margin" Value="0,0,10,0" />
    <Setter Property="TextDecorations" Value="Underline" />
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />                 
        </Trigger>
    </Style.Triggers>
</Style>

And so:

<TextBlock Style="{StaticResource LinkButton}">Edit</TextBlock>

To enable clicking, simply use the MouseUp event.