Link-Schaltfläche in wpf

90

Wie kann ich Button so gestalten, dass es wie LinkButton aussieht, und ich möchte keinen Hyperlink verwenden ... !!

Irgendwelche Vorschläge

wpf wpf-controls Prashant Cholachagudda
quelle
1
Wenn es jemanden interessiert, ist das Problem mit allen Antworten hier, dass sich die Links in den Antworten nicht wirklich wie Links verhalten. Sie kennen den besuchten URL-Verlauf nicht und die Farben sind nicht die System-URL-Farben. Aber wenn Sie diese Anforderungen nicht haben, sind sie in Ordnung.
Ich versuche herauszufinden, wie man die richtigen Windows-Farben verwendet. stackoverflow.com/questions/5094447
Zack Peterson

Antworten:

147

Wenn Sie keinen normalen Button-Stil möchten und nur etwas möchten, das wie ein Hyperlink aussieht, können Sie damit beginnen

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

Hier ist das Gleiche wie ein Stil:

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

und Sie können es so verwenden:

<Button Style="{StaticResource LinkButton}" Content="Clicky" />
MichaC
quelle
Bitte beachten Sie, dass es hier einen Tippfehler gibt - LinkButon
GarethD
2
Diese Antwort erzeugt eine Schaltfläche, die zwischen der Unterstreichung und dem Text ein Leerzeichen enthält. @Christians Antwort löst dies.
Greg Sansom
Dies hat auch nicht den "Hand" -Zeiger, wenn Sie mit der Maus über den Hyperlink fahren. Verwenden Sie die Community-Wiki-Antwort für diese Funktionalität.
AlbatrossCafe
Ich schlage vor, hinzuzufügen <Trigger Property="IsEnabled" Value="False"><Setter Property="Foreground" Value="Gray" /> </Trigger>, um IsEnabled-Status zu behandeln
Simon
33 
<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>

In der Version von MichaC und Anderson wurde die Unterstreichung etwas falsch platziert. Hier ist eine aktualisierte Version, die nur eine Unterstreichung zu allen TextBlockinnerhalb der Version hinzufügt ContentPresenter.

Christian
quelle
1
Christian: Wieso kann ich mit deinem Stil keine Unterstreichung sehen? MichaC hat einfach gut für mich funktioniert.
Newman
Das funktioniert auch bei mir nicht. Der Stil in ContentPresenter.Resources wird einfach nicht auf einen TextBlock innerhalb der Schaltfläche angewendet
Clyde
OK, das Problem scheint zu sein, dass der Stil nur für einen implizit generierten TextBlock
Clyde
<Button Style = "{StaticResource LinkButton}"> Text </ Button> funktioniert
Clyde
<Button Style = "{StaticResource LinkButton}"> <TextBlock Text = "test" /> </ Button> funktioniert nicht
Clyde
30

Hier ist der Vorschlag von MichaC, der Styleauf jeder Schaltfläche wiederverwendet werden kann:

<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
quelle
8
Hat dies zu einem Community-Wiki gemacht, da 99% dieser Antwort von MichaC gestohlen wurden :)
Anderson Imes
11

Der einfachste Weg (ich mache das in meiner Bewerbung):

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

Sie haben die volle Kontrolle über TextDecoration, z. B. ändern Sie den Stiftstil oder den Versatz. Weitere Informationen finden Sie unter diesem Link: http://msdn.microsoft.com/en-us/library/system.windows.textdecorations.underline.aspx

Siavash Mortazavi
quelle
4
Schlechte Praxis, das Stylen einer Link-Schaltfläche wie vorgeschlagen ist weitaus besser ... was ist, wenn Sie 50 solche LinkButtons haben? Was ist außerdem, wenn Sie eine Hover-Aktion oder eine andere Dekoration hinzufügen müssen?
Tomer W
3
Ich bin nicht einverstanden mit Tomer. "schlechte Praxis" impliziert, dass dieser einfachere Ansatz niemals erforderlich ist. Ich habe gerade einen Fall, in dem dies die perfekte Lösung war (z. B. das Erstellen einer Schaltfläche in CodeBehind). Danke Siavash.
Gabe Halsmer
Ja, das ist keine schlechte Praxis. Es wird für einige Szenarien perfekt sein.
Richard Moore
8

Eine andere Lösung Hyperlinkist das Einsetzen TextBlock.

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

Warum möchten Sie Hyperlink nicht verwenden?

<Button>
    <Hyperlink>
</Button>
Ana Betts
quelle
Coz, Immer wenn ich versuche, Eltern in Visual Tree zu bekommen, wird eine Ausnahme ausgelöst, die besagt, dass Hyperlink nicht visuell oder Visual3d ist
Prashant Cholachagudda
Ich möchte das nutzen. Ich habe es zum Laufen gebracht, aber ich kann den Schatten an den Rändern des Knopfes nicht loswerden. Wie machst du das?
Donny V.