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

时间:2011-02-25 20:37:12

标签: wpf windows xaml wpf-controls styles

我想在 WPF 中使用类似链接的按钮。 Microsoft在其Windows对话框中执行此操作(看似不一致)。

它们看起来像蓝色文字。并在鼠标光标悬停时更改颜色和下划线。

示例:

LinkButton in Windows 7

我得到了它的工作。 (感谢ChristianAnderson ImesMichaC)但是,我必须在我的按钮内加TextBlock

如何在不需要按钮内的TextBlock的情况下改善我的风格?

用法XAML

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

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

5 个答案:

答案 0 :(得分:35)

你知道有一个Hyperlink类/标签吗?它看起来像一个超链接,也可以作为按钮(可以使用URI和/或命令和/或点击事件)。

编辑:

使用示例:

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

答案 1 :(得分:14)

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

最简单,最干净的方法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>
  • 忠实,没有模仿:我们只使用Hyperlink本身
  • 尊重:保留焦点,这是一个重要方面,

答案 2 :(得分:6)

使用以下样式或模板不需要使用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> 

用法XAML

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

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

或者您可以直接使用模板

<Button Template="{StaticResource HyperlinkLikeButtonTemplate}" Content="Edit" />

答案 3 :(得分:1)

我认为问题在于按钮是内容控件,但链接样式仅适用于文本作为内容。这就是你拥有的代码就是这样设计的原因。我认为我们可以通过指定文本块而不是内容展示器来控制模板,但是哪个属性绑定到它?所以我的建议是:子类按钮并声明类型为string的依赖项属性,并使用该属性绑定ControlTemplate中的文本。

答案 4 :(得分:1)

除非我遗漏了某些东西,否则你无法摆脱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>

所以:

<TextBlock Style="{StaticResource LinkButton}">Edit</TextBlock>

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