Как сделать так, чтобы кнопка WPF выглядела как ссылка? - PullRequest
Новая
       41

Как сделать так, чтобы кнопка WPF выглядела как ссылка?

30 голосов
/ 25 февраля 2011

Я хочу использовать кнопки в WPF , стилизованные под ссылки. Microsoft делает это (казалось бы, непоследовательно) в своих диалоговых окнах Windows.

Они выглядят как синий текст. И измените цвет и подчеркните, когда курсор мыши находится над.

Пример:

LinkButton in Windows 7

Я получил это работает. (спасибо Кристиану , Андерсону Имесу и MichaC ) Но мне пришлось вставить TextBlock в мою кнопку.

Как я могу улучшить свой стиль & mdash; чтобы он работал без использования текстового блока внутри кнопки?

Использование 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 ]

35 голосов
/ 25 февраля 2011

Знаете ли вы, что Гиперссылка класс / тег? Он выглядит как гиперссылка и может работать также как кнопка (может использовать URI и / или команду и / или событие нажатия).

EDIT:

Пример использования: 

<TextBlock>                                
    <Hyperlink Command="{Binding SomeCommand, ElementName=window}" CommandParameter="{Binding}">Link
    </Hyperlink>
</TextBlock>
14 голосов
/ 07 сентября 2014

Я немного опаздываю на вечеринку, но ...

Самый простой и чистый подход ИМО: 

<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>
  • Верный, без эмуляции : мы просто используем Гиперссылку
  • Почтительный : фокус, который является важным аспектом, сохраняется
7 голосов
/ 08 ноября 2011

Использование следующего стиля или шаблона не требует использования элемента 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" />
1 голос
/ 25 февраля 2011

Если я что-то упустил, разве вы не можете избежать стилизации 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.

1 голос
/ 25 февраля 2011

Мне кажется, проблема в том, что кнопка является элементом управления контентом, но стиль ссылки работает только с текстом как контентом. Это причина того, что ваш код разработан таким образом. Я думаю, что мы можем работать в шаблоне элемента управления, указав текстовый блок вместо предъявителя контента, но какое свойство привязать к нему? Поэтому я предлагаю: подкласс кнопку и объявить свойство зависимости типа string и использовать это свойство для привязки текста в ControlTemplate.

...