ปุ่มลิงค์ใน wpf


90

จะทำปุ่มให้ดูเหมือน LinkButton ได้ยังไง แต่ไม่อยากใช้ Hyperlink ... !!

ข้อเสนอแนะใด ๆ


1
หากใครสนใจปัญหาของคำตอบทั้งหมดในที่นี้ก็คือลิงก์ในคำตอบนั้นไม่ได้ทำงานเหมือนลิงก์ พวกเขาไม่ทราบประวัติ URL ที่เข้าชมและสีไม่ใช่สีของ URL ของระบบ แต่ถ้าคุณไม่มีข้อกำหนดเหล่านั้นก็ไม่เป็นไร

ฉันกำลังพยายามหาวิธีใช้สี Windows ที่ถูกต้อง stackoverflow.com/questions/5094447
Zack Peterson

คำตอบ:


150

หากคุณไม่ต้องการรูปแบบปุ่มปกติใด ๆ และต้องการเพียงบางสิ่งที่ดูเหมือนไฮเปอร์ลิงก์คุณสามารถเริ่มต้นด้วยสิ่งนี้

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

นี่คือลักษณะเดียวกับ:

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

และคุณสามารถใช้งานได้ดังนี้:

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

โปรดทราบว่ามีการพิมพ์ผิดที่นี่ - LinkButon
GarethD

2
คำตอบนี้จะสร้างปุ่มที่มีช่องว่างระหว่างขีดเส้นใต้และข้อความ คำตอบ @ คริสเตียนช่วยแก้ปัญหานี้ได้
Greg Sansom

นอกจากนี้ยังไม่มีตัวชี้ "มือ" เมื่อวางเมาส์เหนือไฮเปอร์ลิงก์ ใช้คำตอบวิกิชุมชนสำหรับฟังก์ชันนี้
AlbatrossCafe

ฉันขอแนะนำให้เพิ่ม<Trigger Property="IsEnabled" Value="False"><Setter Property="Foreground" Value="Gray" /> </Trigger>เพื่อจัดการสถานะ IsEnabled
ไซมอน

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>

เวอร์ชันของ MichaC และ Anderson วางขีดเส้นใต้ผิดเล็กน้อยนี่คือเวอร์ชันอัปเดตที่จะเพิ่มขีดเส้นใต้ให้กับสิ่งTextBlockที่อยู่ภายในไฟล์ContentPresenter.


1
Christian: ทำไมฉันไม่เห็นขีดเส้นใต้ที่ใช้สไตล์ของคุณ? MichaC ทำงานได้ดีสำหรับฉัน
newman

สิ่งนี้ใช้ไม่ได้กับฉันเช่นกัน สไตล์ภายใน ContentPresenter ทรัพยากรไม่ได้ถูกนำไปใช้กับ TextBlock ใด ๆ ภายในปุ่ม
ไคลด์

ตกลงปัญหาน่าจะเป็นสไตล์ที่ใช้กับ TextBlock ที่สร้างขึ้นโดยปริยายเท่านั้น
ไคลด์

<Button Style = "{StaticResource LinkButton}"> ข้อความ </Button> ใช้ได้ผล
ไคลด์

<Button Style = "{StaticResource LinkButton}"> <TextBlock Text = "test" /> </Button> ไม่ทำงาน
ไคลด์

30

นี่คือคำแนะนำของ MichaC Styleที่คุณสามารถใช้ซ้ำได้บนปุ่มใดก็ได้:

<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
ทำให้นี่เป็นวิกิชุมชนโดยพิจารณาว่า 99% ของคำตอบนี้ถูกขโมยจาก MichaC :)
Anderson Imes

11

วิธีที่ง่ายที่สุด (ฉันทำสิ่งนี้ในแอปพลิเคชันของฉัน):

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

คุณสามารถควบคุม TextDecoration ได้อย่างเต็มที่เช่นเปลี่ยนรูปแบบปากกาหรือออฟเซ็ต ดูที่ลิงค์นี้เพื่อหาข้อมูลเพิ่มเติม: http://msdn.microsoft.com/en-us/library/system.windows.textdecorations.underline.aspx


4
วิธีปฏิบัติที่ไม่ดีการจัดรูปแบบปุ่ม Link ตามที่แนะนำนั้นดีกว่ามาก ... ถ้าคุณมี 50 LinkButtons แบบนั้นล่ะ? นอกจากนี้ถ้าคุณต้องการเพิ่มการดำเนินการวางเมาส์หรืออาจจะตกแต่งอื่น ๆ ล่ะ?
Tomer W

3
ฉันไม่เห็นด้วยกับ Tomer "การปฏิบัติที่ไม่ดี" หมายความว่าไม่จำเป็นต้องใช้แนวทางที่ง่ายกว่านี้ ตอนนี้ฉันมีกรณีที่นี่เป็นทางออกที่สมบูรณ์แบบเช่นการสร้างปุ่มในโค้ดด้านหลัง) ขอบคุณ Siavash
Gabe Halsmer

ใช่นี่ไม่ใช่การปฏิบัติที่ไม่ดี มันจะสมบูรณ์แบบสำหรับบางสถานการณ์
Richard Moore

9

ทางออกก็ใช้เป็นที่จะใส่ในภายในHyperlinkTextBlock

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

2

ทำไมคุณไม่ต้องการใช้ไฮเปอร์ลิงค์

<Button>
    <Hyperlink>
</Button>

Coz เมื่อใดก็ตามที่ฉันพยายามรับ parent ใน Visual tree มันจะแสดงข้อยกเว้นว่า Hyperlink ไม่ใช่ภาพหรือ Visual3d
Prashant

ฉันต้องการใช้สิ่งนี้ ฉันใช้งานได้ แต่ดูเหมือนว่าจะกำจัดเงาที่ขอบปุ่มไม่ได้ คุณทำได้อย่างไร?
Donny V.
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.