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:

LinkButton in Windows 7

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>

What is your button actually doing when clicked? Just navigating? — Grant Thomas, Feb 25 '11 at 20:43

Matěj Zábský · Answer 1 · 2016-01-21T14:20:13.633

45

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>

edited Jan 21 '16 at 14:20

answered Feb 25 '11 at 20:42

Matěj Zábský

16,909
15
69
114

2

`Hyperlink` is a `FrameworkContentElement`, not a `FrameworkElement`. Silverlight has a `HyperlinkButton` which would fit the bill, but alas WPF does not have one. *sigh* – Kent Boogaart Feb 25 '11 at 20:43
+1: That's what I was thinking - that a page URI could be specified, wasn't sure about the click event. – Grant Thomas Feb 25 '11 at 20:44
2

@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. – Matěj Zábský Feb 25 '11 at 20:48
how does that solve the problem of the OP? Now he needs to specify both a `TextBlock` and a `Hyperlink` within it. – Kent Boogaart Feb 25 '11 at 20:49
1

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. – Robert Rossney Feb 26 '11 at 09:12

score 18 · Answer 2 · answered Sep 07 '14 at 18:24

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

For this to really work the Command and CommandParameter of the HyperLink needs to bind to the original properties on the button. — Wouter, Oct 31 '18 at 10:25

score 14 · Answer 3 · answered Nov 07 '11 at 23:39

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

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. — Gobe, Jan 26 '16 at 16:03

Felice Pollano · Answer 4 · 2011-02-25T20:54:25.650

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.

score 0 · Answer 5 · answered Feb 25 '11 at 20:59

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.

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

Example:

Usage XAML

Style XAML

5 Answers5

Usage XAML

Linked