如何使 WPF 按钮看起来像一个链接？

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

提问by Zack Peterson

I want to use buttons in WPFthat are styled like links. Microsoft does this (seemingly inconsistently) in its Windows dialog boxes.

我想在WPF中使用样式类似于链接的按钮。Microsoft 在其 Windows 对话框中执行此操作（似乎不一致）。

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 TextBlockinside my button.

我让它工作了。（感谢Christian、Anderson Imes和MichaC） 但是，我不得不TextBlock在我的按钮内放一个。

How can I improve my style—to make it work without requiring the TextBlock inside my Button?

我怎样才能改进我的风格——让它在不需要我的 Button 中的 TextBlock 的情况下工作？

Usage XAML

用法 XAML

<Button Style="{StaticResource HyperlinkLikeButton}">
    <TextBlock>Edit</TextBlock>
</Button>

Style XAML

样式 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>

回答by Matěj Zábsky

Do you know there is a Hyperlinkclass/tag? It looks like a hyperlink and can work also as button (can use URI and/or command and/or click event).

你知道有一个超链接类/标签吗？它看起来像一个超链接，也可以用作按钮（可以使用 URI 和/或命令和/或单击事件）。

EDIT:

编辑：

Example of usage:

用法示例：

<TextBlock>                                
    <Hyperlink Command="{Binding SomeCommand, ElementName=window}" CommandParameter="{Binding}">Link
    </Hyperlink>
</TextBlock>

回答by Aybe

I'm a little late for the party but ...

我参加派对有点晚了但是......

The simplest and cleanest approach IMO :

最简单和最干净的方法 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 Hyperlinkitself
• Respectful: the focus, which is an important aspect, is preserved

• 忠实，没有模拟：我们只是使用超链接本身
• 尊重：重点，这是一个重要的方面，被保留

回答by Yves Tkaczyk

Using the following style or template does not require you to use the TextBlock element:

使用以下样式或模板不需要您使用 TextBlock 元素：

  <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

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

回答by Felice Pollano

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: subclassthe button and declare a dependency property of type string and use that property to bind the text in the ControlTemplate.

我认为问题在于按钮是一个内容控件，但链接样式仅适用于文本作为内容。这就是您拥有的代码是这样设计的原因。我认为我们可以通过指定文本块而不是内容展示器来在控件模板中工作，但是绑定到它的属性是什么？所以我的建议是：子类化按钮并声明一个字符串类型的依赖属性，并使用该属性绑定 ControlTemplate 中的文本。

回答by Grant Thomas

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:

除非我遗漏了一些东西，否则TextBlock如果您要应用内联样式而不是全局样式，您就不能对 . 例如：

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

要启用点击，只需使用该MouseUp事件。