Tombol tautan di wpf

90

Bagaimana saya bisa membuat Button terlihat seperti LinkButton, dan saya tidak ingin menggunakan Hyperlink ... !!

Ada saran

wpf wpf-controls

1

Jika ada yang peduli, masalah dengan semua jawaban di sini adalah bahwa tautan dalam jawaban tidak benar-benar berperilaku seperti tautan. Mereka tidak mengetahui riwayat url yang dikunjungi dan warnanya bukan warna url sistem. Tetapi, jika Anda tidak memiliki persyaratan tersebut, mereka baik-baik saja.

Saya mencoba mencari cara untuk menggunakan warna Windows yang benar. stackoverflow.com/questions/5094447

— Zack Peterson

150

Jika Anda tidak menginginkan gaya Tombol normal dan hanya menginginkan sesuatu yang terlihat seperti hyperlink, Anda dapat memulai dengan ini

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

Ini sama dengan gaya:

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

dan Anda bisa menggunakannya seperti ini:

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

— MichaC
sumber

Harap dicatat bahwa ada kesalahan ketik di sini - LinkButon

— GarethD

2

Jawaban ini menghasilkan tombol yang memiliki spasi antara garis bawah dan teks. @ Jawaban Kristen menyelesaikan ini.

— Greg Sansom

Ini juga tidak memiliki penunjuk "tangan" saat mengarahkan kursor ke hyperlink. Gunakan jawaban wiki komunitas untuk fungsionalitas ini.

— AlbatrossCafe

Saya menyarankan untuk menambahkan <Trigger Property="IsEnabled" Value="False"><Setter Property="Foreground" Value="Gray" /> </Trigger>untuk menangani status 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>

Versi MichaC dan Anderson menempatkan garis bawah sedikit salah, berikut adalah versi terbaru yang hanya akan menambahkan garis bawah ke semua TextBlockyang ada di dalam ContentPresenter.

— Kristen
sumber

1

Christian: Kenapa saya tidak bisa melihat garis bawah menggunakan gaya Anda? MichaC bekerja dengan baik untuk saya.

— Newman

Ini juga tidak berhasil untukku. Gaya dalam ContentPresenter.Resources tidak diterapkan ke TextBlock mana pun di dalam Tombol

— Clyde

Oke, masalahnya tampaknya gaya hanya berlaku untuk TextBlock yang dibuat secara implisit

— Clyde

<Button Style = "{StaticResource LinkButton}"> Teks </Button> berfungsi

— Clyde

<Button Style = "{StaticResource LinkButton}"> <TextBlock Text = "test" /> </Button> tidak berfungsi

— Clyde

30

Berikut saran MichaC yang diimplementasikan sebagai Styleyang dapat Anda gunakan kembali pada tombol apa pun:

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

— Anderson Imes
sumber

8

Menjadikan ini wiki komunitas, mengingat 99% jawaban ini dicuri dari MichaC :)

— Anderson Imes

11

Cara termudah (saya melakukan ini di aplikasi saya):

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

Anda memiliki kendali penuh pada TextDecoration, misalnya mengubah gaya pena atau offset. lihat tautan ini untuk mengetahui lebih lanjut: http://msdn.microsoft.com/en-us/library/system.windows.textdecorations.underline.aspx

— Siavash Mortazavi
sumber

4

Praktik Buruk, Menggayai tombol Tautan seperti yang disarankan Jauh lebih baik ... bagaimana jika Anda memiliki 50 Tombol Tautan seperti itu? Selain itu, bagaimana jika Anda perlu menambahkan tindakan Hover atau mungkin dekorasi yang berbeda?

— Tomer W

3

Saya tidak setuju dengan Tomer. "Praktik buruk" menyiratkan bahwa pendekatan yang lebih sederhana ini tidak diperlukan. Saya punya kasus sekarang di mana ini adalah solusi sempurna yaitu membuat tombol di belakang kode). Terima kasih Siavash.

— Gabe Halsmer

Ya, ini bukan praktik yang buruk. Ini akan sempurna untuk beberapa skenario.

— Richard Moore

9

Solusi lain yang digunakan Hyperlinkadalah dengan memasukkan ke dalam TextBlock.

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

— xmedeko.dll
sumber

2

Mengapa Anda tidak ingin menggunakan Hyperlink?

<Button>
    <Hyperlink>
</Button>

— Ana Betts
sumber

Coz, Setiap kali saya mencoba untuk mendapatkan orang tua di pohon Visual, itu melempar Pengecualian yang mengatakan Hyperlink tidak visual atau Visual3d

— Prashant Cholachagudda

Saya ingin menggunakan ini. Saya sudah berhasil tetapi sepertinya saya tidak bisa menghilangkan bayangan di tepi tombol. Bagaimana kamu melakukannya?

— Donny V.