Nút liên kết trong wpf


90

Làm thế nào tôi có thể làm cho Nút trông giống như LinkButton và tôi không muốn sử dụng Siêu liên kết ... !!

Bất kỳ đề xuất


1
Nếu ai đó quan tâm, vấn đề với tất cả các câu trả lời ở đây là các liên kết trong các câu trả lời không thực sự hoạt động như các liên kết. Họ không biết về lịch sử url đã truy cập và màu sắc không phải là màu url hệ thống. Nhưng, nếu bạn không có những yêu cầu đó, chúng vẫn ổn.

Tôi đang cố gắng tìm ra cách sử dụng màu Windows chính xác. stackoverflow.com/questions/5094447
Zack Peterson

Câu trả lời:


148

Nếu bạn không muốn bất kỳ kiểu Nút thông thường nào và chỉ muốn một cái gì đó giống như một siêu liên kết, bạn có thể bắt đầu với

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

Đây giống như một kiểu:

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

và bạn có thể sử dụng nó như thế này:

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

Xin lưu ý rằng có một typo ở đây - LinkButon
GarethD

2
Câu trả lời này tạo ra một nút có khoảng cách giữa gạch dưới và văn bản. @Christians trả lời giải quyết điều này.
Greg Sansom

Điều này cũng không có con trỏ "bàn tay" khi di chuột qua siêu liên kết. Sử dụng câu trả lời wiki cộng đồng cho chức năng này.
AlbatrossCafe

Tôi đề nghị thêm <Trigger Property="IsEnabled" Value="False"><Setter Property="Foreground" Value="Gray" /> </Trigger>để xử lý trạng thái 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>

Phiên bản của MichaC và Anderson đã đặt gạch dưới hơi sai, đây là phiên bản cập nhật sẽ chỉ thêm một gạch dưới vào bất kỳ phần nào TextBlockbên trong ContentPresenter.


1
Christian: Sao tôi không thấy gạch dưới nào sử dụng phong cách của bạn? MichaC chỉ làm việc tốt cho tôi.
newman

Điều này cũng không hiệu quả với tôi. Phong cách trong ContentPresenter.Resources không được áp dụng cho bất kỳ TextBlock nào trong Nút
Clyde

OK, vấn đề dường như là kiểu chỉ áp dụng cho TextBlock được tạo ngầm
Clyde

<Button Style = "{StaticResource LinkButton}"> Văn bản </Button> hoạt động
Clyde

<Button Style = "{StaticResource LinkButton}"> <TextBlock Text = "test" /> </Button> không hoạt động
Clyde vào

30

Đây là đề xuất của MichaC được triển khai như một gợi ý Stylemà bạn có thể sử dụng lại trên bất kỳ nút nào:

<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
Đã thực hiện một wiki này cộng đồng, xem xét 99% câu trả lời này là bị đánh cắp từ MichaC :)
Anderson IME

11

Cách dễ nhất (tôi làm điều này trong ứng dụng của mình):

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

bạn có toàn quyền kiểm soát TextDecoration, ví dụ như thay đổi kiểu bút hoặc bù đắp. hãy xem liên kết này để tìm hiểu thêm: http://msdn.microsoft.com/en-us/library/system.windows.textdecaries.underline.aspx


4
Thực hành không tốt, tạo kiểu một nút Liên kết như được đề xuất là tốt hơn nhiều ... điều gì sẽ xảy ra nếu bạn có 50 Nút liên kết như vậy? Ngoài ra, nếu bạn cần thêm hành động Di chuột hoặc có thể là một trang trí khác thì sao?
Tomer W

3
Tôi không đồng ý với Tomer. "bad practice" ngụ ý rằng không bao giờ cần đến cách tiếp cận đơn giản này. Tôi có một trường hợp ngay bây giờ mà đây là giải pháp hoàn hảo, tức là tạo nút trong mã phía sau). Cảm ơn Siavash.
Gabe Halsmer

Yeah, đây không phải là một thực hành xấu. Nó sẽ là hoàn hảo cho một số tình huống.
Richard Moore

8

Một giải pháp khác được sử dụng Hyperlinklà đưa vào bên trong TextBlock.

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

2

Tại sao bạn không muốn sử dụng Hyperlink?

<Button>
    <Hyperlink>
</Button>

Coz, Bất cứ khi nào tôi cố gắng để có được cha mẹ trong Visual cây nó ném một ngoại lệ nói Hyperlink không phải là hình ảnh hay Visual3d
Prashant Cholachagudda

Tôi muốn sử dụng cái này. Tôi đã làm cho nó hoạt động nhưng tôi dường như không thể loại bỏ bóng trên các cạnh của nút. Làm thế nào để bạn làm điều đó?
Donny V.
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.