93

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

Any suggestions

2
  • 1
    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.
    – user1228
    Oct 20, 2010 at 18:31
  • I'm trying to figure out how to use the correct Windows colors. stackoverflow.com/questions/5094447 Feb 23, 2011 at 22:42

7 Answers 7

157

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" />
4
  • Please note that there's a typo here - LinkButon
    – GarethD
    Feb 3, 2012 at 12:17
  • 2
    This answer produces a button which has a space between the underline and the text. @Christians answer resolves this. Feb 22, 2012 at 4:52
  • This also does not have the "hand" pointer when hovering over the hyperlink. Use the community wiki answer for this functionality. Jul 21, 2017 at 21:13
  • I suggest to add <Trigger Property="IsEnabled" Value="False"><Setter Property="Foreground" Value="Gray" /> </Trigger> to handle IsEnabled state
    – simon
    May 15, 2020 at 17:46
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.

8
  • 1
    Christian: How comes I can't see any underline using your style? MichaC's just worked fine for me.
    – newman
    May 18, 2011 at 0: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, 2012 at 14:17
  • OK, the issue seems to be that the style only applies to an implicitly generated TextBlock
    – Clyde
    Nov 29, 2012 at 14:20
  • <Button Style="{StaticResource LinkButton}">Text</Button> works
    – Clyde
    Nov 29, 2012 at 14:21
  • <Button Style="{StaticResource LinkButton}"> <TextBlock Text="test"/></Button> does not work
    – Clyde
    Nov 29, 2012 at 14:21
30

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>
1
  • 8
    Made this a community wiki, considering 99% of this answer is stolen from MichaC :) May 27, 2010 at 3:46
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

3
  • 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, 2012 at 8: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. Jan 30, 2014 at 21:42
  • Yeah, this is not a bad practice. It will be perfect for some scenarios. Mar 5, 2019 at 17:30
10

Another solution using Hyperlink is to put in inside TextBlock.

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

Why do you not want to use Hyperlink?

<Button>
    <Hyperlink>
</Button>
2
  • Coz, Whenever I try to get parent in Visual tree it throws an Exception saying Hyperlink is not visual or Visual3d Apr 23, 2009 at 5: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, 2010 at 22:01
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.