Link button in wpf

Question

How can I make Button to look like LinkButton, and I don't want to use Hyperlink...!!

Any suggestions

If anyone cares, the issue with all the answers in here is that the links in the answers don't actually behave like links. They are not aware of the visited url history and the colors aren't the system url colors. But, if you don't have those requirements, they're okay. — , Oct 20 '10 at 18:31
I'm trying to figure out how to use the correct Windows colors. http://stackoverflow.com/questions/5094447 — Zack Peterson, Feb 23 '11 at 22:42

MichaC · Accepted Answer · 2012-02-06T21:11:24.230

If you don't want any of the normal Button style and just want something that looks like a hyperlink you could start with this

<Button Margin="5" Content="Test" Cursor="Hand">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <TextBlock TextDecorations="Underline">
                <ContentPresenter />
            </TextBlock>
        </ControlTemplate>
    </Button.Template>
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Foreground" Value="Blue" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Foreground" Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

Here's the same as a style:

<Style
    x:Key="LinkButton"
    TargetType="Button">
    <Setter
        Property="Template">
        <Setter.Value>
            <ControlTemplate
                TargetType="Button">
                <TextBlock
                    TextDecorations="Underline">
                <ContentPresenter /></TextBlock>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter
        Property="Foreground"
        Value="Blue" />
    <Style.Triggers>
        <Trigger
            Property="IsMouseOver"
            Value="true">
            <Setter
                Property="Foreground"
                Value="Red" />
        </Trigger>
    </Style.Triggers>
</Style>

and you can use it like this:

<Button Style="{StaticResource LinkButton}" Content="Clicky" />

This answer produces a button which has a space between the underline and the text. @Christians answer resolves this. — Greg Sansom, Feb 22 '12 at 04:52
This also does not have the "hand" pointer when hovering over the hyperlink. Use the community wiki answer for this functionality. — AlbatrossCafe, Jul 21 '17 at 21:13

score 36 · Answer 2 · edited Oct 31 '13 at 11:53

36

<Style x:Key="LinkButton" 
       TargetType="Button"
       BasedOn="{StaticResource ResourceKey={x:Type Button}}"
       >

    <Setter Property="Width" Value="Auto"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <ContentPresenter Content="{TemplateBinding Content}" 
                                  ContentTemplate="{TemplateBinding  ContentTemplate}"
                                  VerticalAlignment="Center"
                                  >
                    <ContentPresenter.Resources>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="TextDecorations" Value="Underline" />
                        </Style>
                    </ContentPresenter.Resources>
                </ContentPresenter>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Foreground" Value="Blue" />
    <Setter Property="Cursor" Value="Hand" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Foreground" Value="Red" />
        </Trigger>
    </Style.Triggers>
</Style>

MichaC's and Anderson's version placed the underline slightly wrong, here is an updated version that will just add an underline to any TextBlock that are inside the ContentPresenter.

edited Oct 31 '13 at 11:53

STiLeTT

1,023
10
23

answered Aug 25 '10 at 10:02

Christian

93
4
7

1

Christian: How comes I can't see any underline using your style? MichaC's just worked fine for me. – newman May 18 '11 at 00:53
This isn't working for me either. The style within ContentPresenter.Resources just isn't getting applied to any TextBlock within the Button – Clyde Nov 29 '12 at 14:17
OK, the issue seems to be that the style only applies to an implicitly generated TextBlock – Clyde Nov 29 '12 at 14:20
Text works – Clyde Nov 29 '12 at 14:21
does not work – Clyde Nov 29 '12 at 14:21
Asking this as a separate question here: http://stackoverflow.com/questions/13628101/how-do-i-correctly-apply-a-style-to-content-presenter – Clyde Nov 29 '12 at 14:37
Perfect. I'd make one tiny addition to the style triggers to show a gray textblock if the button is disabled. ` ` – Rubio Mar 07 '13 at 08:37
Is there someone who knows if it is possible to inject/add a ContextMenu to a button styled with Christian's solution? – norgie Jul 06 '22 at 14:52

score 30 · Answer 3 · edited Oct 31 '13 at 11:53

Here's MichaC's suggestion implemented as a Style that you can reuse on any button:

<Style x:Key="LinkButton" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <TextBlock TextDecorations="Underline">
                    <ContentPresenter />
                </TextBlock>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Foreground" Value="Blue" />
    <Setter Property="Cursor" Value="Hand" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Foreground" Value="Red" />
        </Trigger>
    </Style.Triggers>
</Style>

Made this a community wiki, considering 99% of this answer is stolen from MichaC :) — Anderson Imes, May 27 '10 at 03:46

score 14 · Answer 4 · answered Jan 05 '11 at 09:06

14

The easiest way (I do this in my application):

<TextBlock Name="..."
   Text="..."
   Cursor="Hand"
   Foreground="Blue"
   TextDecorations="Underline"
   MouseLeftButtonUp=..."
/>

you have full control on TextDecoration, e.g. change pen style or offset. take a look at this link to find out more: http://msdn.microsoft.com/en-us/library/system.windows.textdecorations.underline.aspx

answered Jan 05 '11 at 09:06

Siavash Mortazavi

149
1
2

4

Bad Practice, Styling a Link button as suggested is Far better... what if you have 50 LinkButtons like that? Additionally, what about if you need to add a Hover action or maybe a different decoration? – Tomer W Jul 12 '12 at 08:07
3

I disagree with Tomer. "bad practise" implies there's never a need for this simpler approach. I have a case right now where this was the perfect solution i.e. was creating button in code-behind). Thanks Siavash. – Gabe Halsmer Jan 30 '14 at 21:42
Yeah, this is not a bad practice. It will be perfect for some scenarios. – Richard Moore Mar 05 '19 at 17:30

score 9 · Answer 5 · answered Jun 02 '15 at 15:20

9

Another solution using Hyperlink is to put in inside TextBlock.

<TextBlock>
    <Hyperlink Click="...">
        <TextBlock Text="Link text" />
    </Hyperlink>
</TextBlock>

answered Jun 02 '15 at 15:20

xmedeko

7,336
6
55
85

score 2 · Answer 6 · answered Apr 23 '09 at 05:43

2

Why do you not want to use Hyperlink?

<Button>
    <Hyperlink>
</Button>

answered Apr 23 '09 at 05:43

Ana Betts

73,868
16
141
209

Coz, Whenever I try to get parent in Visual tree it throws an Exception saying Hyperlink is not visual or Visual3d – Prashant Cholachagudda Apr 23 '09 at 05:55
I want to use this. I got it working but I can't seem to get rid of the shadow on the edges of the button. How do you do that? – Donny V. Jan 18 '10 at 22:01

Konstantin S. · Answer 7 · 2022-01-22T01:59:40.673

Combination of all proposed solutions:
Completed style, as in the accepted version, but without hardcoded values.

<Style
    x:Key="HyperlinkButton"
    TargetType="{x:Type Button}"
    BasedOn="{StaticResource {x:Type Button}}"
    >
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <TextBlock>
                    <Hyperlink
                        Command="{TemplateBinding Command}"
                        CommandTarget="{TemplateBinding CommandTarget}"
                        CommandParameter="{TemplateBinding CommandParameter}"
                        >
                        <ContentPresenter />
                    </Hyperlink>
                </TextBlock>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Link button in wpf

7 Answers7

Linked