Link button in wpf

92
votes

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

Any suggestions

7
wpfwpf-controls
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
I'm trying to figure out how to use the correct Windows colors. stackoverflow.com/questions/5094447 - Zack Peterson

7 Answers

154
votes

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" />
35
votes
<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.

30
votes

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>
14
votes

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

9
votes

Another solution using Hyperlink is to put in inside TextBlock.

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

Why do you not want to use Hyperlink?

<Button>
    <Hyperlink>
</Button>
0
votes

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>