Botón de enlace en wpf

90

¿Cómo puedo hacer que Button se parezca a LinkButton, y no quiero usar un hipervínculo ...?

Alguna sugerencia

wpf wpf-controls

1

Si a alguien le importa, el problema con todas las respuestas aquí es que los enlaces en las respuestas en realidad no se comportan como enlaces. No conocen el historial de URL visitadas y los colores no son los colores de la URL del sistema. Pero, si no tiene esos requisitos, están bien.

Estoy tratando de averiguar cómo usar los colores correctos de Windows. stackoverflow.com/questions/5094447

— Zack Peterson

148

Si no desea nada del estilo de botón normal y solo desea algo que se parezca a un hipervínculo, puede comenzar con esto

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

Esto es lo mismo que un estilo:

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

y puedes usarlo así:

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

— MichaC
fuente

Tenga en cuenta que hay un error tipográfico aquí - LinkButon

— GarethD

2

Esta respuesta produce un botón que tiene un espacio entre el subrayado y el texto. La respuesta de @Christians resuelve esto.

— Greg Sansom

Esto tampoco tiene el puntero de "mano" cuando se desplaza sobre el hipervínculo. Utilice la respuesta de la wiki de la comunidad para esta funcionalidad.

— AlbatrossCafe

Sugiero agregar <Trigger Property="IsEnabled" Value="False"><Setter Property="Foreground" Value="Gray" /> </Trigger>para manejar el estado IsEnabled

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

La versión de MichaC y Anderson colocó el subrayado ligeramente incorrecto, aquí hay una versión actualizada que solo agregará un subrayado a cualquiera TextBlockque esté dentro del ContentPresenter.

— cristiano
fuente

1

Christian: ¿Cómo es que no veo ningún subrayado usando tu estilo? MichaC me ha funcionado bien.

— newman

Esto tampoco funciona para mí. El estilo dentro de ContentPresenter.Resources simplemente no se aplica a ningún TextBlock dentro del Botón

— Clyde

OK, el problema parece ser que el estilo solo se aplica a un TextBlock generado implícitamente

— Clyde

<Button Style = "{StaticResource LinkButton}"> Texto </Button> funciona

— Clyde

<Button Style = "{StaticResource LinkButton}"> <TextBlock Text = "test" /> </Button> no funciona

— Clyde

30

Aquí está la sugerencia de MichaC implementada como una Styleque puede reutilizar en cualquier botón:

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

8

Hizo de esto un wiki de la comunidad, considerando que el 99% de esta respuesta es robada de MichaC :)

— Anderson Imes

11

La forma más fácil (hago esto en mi aplicación):

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

tiene control total sobre TextDecoration, por ejemplo, cambiar el estilo del lápiz o el desplazamiento. eche un vistazo a este enlace para obtener más información: http://msdn.microsoft.com/en-us/library/system.windows.textdecorations.underline.aspx

— Siavash Mortazavi
fuente

4

Mala práctica, diseñar un botón de enlace como se sugiere es mucho mejor ... ¿y si tienes 50 botones de enlace como ese? Además, ¿qué pasa si necesita agregar una acción de desplazamiento o tal vez una decoración diferente?

— Tomer W

3

No estoy de acuerdo con Tomer. "mala práctica" implica que nunca hay necesidad de un enfoque más simple. Tengo un caso en este momento en el que esta era la solución perfecta, es decir, estaba creando un botón en el código subyacente). Gracias Siavash.

— Gabe Halsmer

Sí, esta no es una mala práctica. Será perfecto para algunos escenarios.

— Richard Moore

8

Otra solución que se usa Hyperlinkes poner adentro TextBlock.

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

— xmedeko
fuente

2

¿Por qué no desea utilizar el hipervínculo?

<Button>
    <Hyperlink>
</Button>

— Ana Betts
fuente

Porque, cada vez que trato de poner al padre en el árbol visual, arroja una excepción que dice que el hipervínculo no es visual o Visual3d

— Prashant Cholachagudda

Quiero usar esto. Lo hice funcionar, pero parece que no puedo deshacerme de la sombra en los bordes del botón. ¿Cómo haces eso?

— Donny V.