Przycisk łącza w wpf


90

Jak mogę sprawić, by Button wyglądał jak LinkButton i nie chcę używać hiperłącza ... !!

Jakieś sugestie


1
Jeśli kogoś to obchodzi, problem ze wszystkimi odpowiedziami tutaj polega na tym, że linki w odpowiedziach w rzeczywistości nie zachowują się jak linki. Nie znają historii odwiedzanych adresów URL, a kolory nie są kolorami systemowych adresów URL. Ale jeśli nie masz tych wymagań, są w porządku.

Próbuję dowiedzieć się, jak użyć właściwych kolorów systemu Windows. stackoverflow.com/questions/5094447
Zack Peterson

Odpowiedzi:


150

Jeśli nie chcesz żadnego z normalnego stylu przycisku i po prostu chcesz czegoś, co wygląda jak hiperłącze, możesz zacząć od tego

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

Oto to samo, co styl:

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

i możesz go używać w ten sposób:

<Button Style="{StaticResource LinkButton}" Content="Clicky" />

Zwróć uwagę, że jest tu literówka - LinkButon
GarethD

2
Ta odpowiedź tworzy przycisk, który ma spację między podkreśleniem a tekstem. @Christians odpowiedz rozwiązuje ten problem.
Greg Sansom,

To również nie ma wskaźnika „dłoni” po najechaniu kursorem na hiperłącze. Użyj odpowiedzi wiki społeczności, aby skorzystać z tej funkcji.
AlbatrossCafe

Proponuję dodać <Trigger Property="IsEnabled" Value="False"><Setter Property="Foreground" Value="Gray" /> </Trigger>do obsługi stan IsEnabled
simon

34
<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>

Wersje MichaCa i Andersona umieściły podkreślenie nieco nieprawidłowo, tutaj jest zaktualizowana wersja, która po prostu doda podkreślenie do wszystkich elementów TextBlockznajdujących się w ContentPresenter.


1
Christian: Dlaczego nie widzę żadnego podkreślenia w twoim stylu? MichaC po prostu działał dobrze dla mnie.
newman

Dla mnie to też nie działa. Styl ContentPresenter.Resources po prostu nie jest stosowany do żadnego TextBlocka w przycisku
Clyde

OK, wydaje się, że problem polega na tym, że styl ma zastosowanie tylko do niejawnie wygenerowanego TextBlock
Clyde

<Button Style = "{StaticResource LinkButton}"> Tekst </Button> działa
Clyde

<Button Style = "{StaticResource LinkButton}"> <TextBlock Text = "test" /> </Button> nie działa
Clyde

30

Oto sugestia MichaC zaimplementowana jako Style, której możesz użyć ponownie na dowolnym przycisku:

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

8
Utworzono z tego wiki społeczności, biorąc pod uwagę, że 99% tej odpowiedzi zostało skradzione z MichaC :)
Anderson Imes

11

Najprościej (robię to w mojej aplikacji):

<TextBlock Name="..."
   Text="..."
   Cursor="Hand"
   Foreground="Blue"
   TextDecorations="Underline"
   MouseLeftButtonUp=..."
/>

masz pełną kontrolę nad TextDecoration, np. zmienić styl pisaka lub przesunięcie. spójrz na ten link, aby dowiedzieć się więcej: http://msdn.microsoft.com/en-us/library/system.windows.textdecorations.underline.aspx


4
Zła praktyka, stylizowanie przycisku łącza zgodnie z sugestią jest o wiele lepsze ... a co jeśli masz 50 takich przycisków LinkButtons? Co więcej, jeśli musisz dodać akcję najechania, a może inną dekorację?
Tomer W,

3
Nie zgadzam się z Tomerem. „zła praktyka” oznacza, że ​​nigdy nie ma potrzeby stosowania prostszego podejścia. Mam teraz przypadek, w którym było to idealne rozwiązanie, tj. Tworzenie przycisku w kodzie). Dzięki Siavash.
Gabe Halsmer

Tak, to nie jest zła praktyka. Świetnie sprawdzi się w niektórych scenariuszach.
Richard Moore,

9

Innym rozwiązaniem Hyperlinkjest włożenie do środka TextBlock.

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

2

Dlaczego nie chcesz używać hiperłącza?

<Button>
    <Hyperlink>
</Button>

Coz, za każdym razem, gdy próbuję uzyskać rodzica w drzewie Visual, generuje wyjątek mówiący, że hiperłącze nie jest wizualne lub Visual3d
Prashant Cholachagudda

Chcę tego użyć. Mam to działające, ale nie mogę pozbyć się cienia na krawędziach przycisku. Jak to robisz?
Donny V.
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.