[原譯]自定義WPF LinkLabel 控件

WPF里是沒有LinkLabel控件的。因此我自己寫一個。首先。我們看一下WPF中什么類似的組件可以實現這個鏈接功能

如果你想要模擬一個LinkLabel控件。你可以在TextBlock里使用內聯的Hyperlink。像下面這樣

<TextBlock>
    <Hyperlink>
        <Run Text="Test link"/>
    </Hyperlink>
</TextBlock>

 

你可以使用Label控件。加一個內聯的HyperLink，但是我認為TextBlock更好。因為你可以在Expression Blend 中通過InlineCollection  編輯所有子元素的屬性

圖1

雖然這種方法也行，但是我還是不太喜歡。因為我覺得我還是寫一個類似windows窗體程序中的LinkLabel控件。然后我就做了。首先看一下控件的樣子

圖2

第一個是默認的LinkLabel控件。第二個是LinkLabelBehavior 屬性被設置為HoverUnderline ，第三個的Foreground和 HoverForeground 屬性都使用了自定的顏色。

 

LinkLabel控件支持的屬性

1.Foreground和 HoverForeground屬性

允許自定義這兩個屬性的值

2.LinkLabelBehavior 屬性

允許設置下划線的顯示與否

3.自定義HyperlinkStyle 屬性

你可以使用這個屬性給超鏈接設置自定義的樣式。如果你已經自定了Foreground和 HoverForeground。則會被覆蓋。

Url 超鏈接的目標

所有這些屬性都繼承自標准的System.Windows.Controls.Label 控件

通過Blend/Xaml設置這些屬性很簡單

<ThemedControlLibrary:LinkLabel Content="Link Label" FontSize="22"/>
<ThemedControlLibrary:LinkLabel Content="Link Label" LinkLabelBehavour="HoverUnderline" />
<ThemedControlLibrary:LinkLabel Foreground="#FF847901" HoverForeground="#FF06C8F2" Content="Link Label" LinkLabelBehavour="NeverUnderline"/>

圖三

然后是控件的使用方法。僅僅添加命名空間到xaml中。然后使用就行了。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="DemoApplication.Window1"
    Title="DemoApplication" Height="300" Width="300"
    xmlns:ThemedControlsLibrary="clr-namespace:ThemedControlsLibrary;assembly=ThemedControlsLibrary"
    >
    <Grid>
        <ThemedControlsLibrary:LinkLabel HorizontalAlignment="Left" VerticalAlignment="Top" Content="LinkLabel"/>
    </Grid>
</Window>

 

 

控件的完整代碼很簡單。就定義一下需要的屬性，和控制這些屬性應該顯示在Blend中的（category）目錄位置就行了。

public class LinkLabel : Label
{
    private const string _linkLabel = "LinkLabel";

    public static readonly DependencyProperty UrlProperty = DependencyProperty.Register("Url", typeof(Uri), typeof(LinkLabel));

    [Category("Common Properties"), Bindable(true)]
    public Uri Url
    {
        get { return GetValue(UrlProperty) as Uri; }
        set { SetValue(UrlProperty, value); }
    }

    public static readonly DependencyProperty HyperlinkStyleProperty = DependencyProperty.Register("HyperlinkStyle", typeof(Style),
            typeof(LinkLabel));

    public Style HyperlinkStyle
    {
        get { return GetValue(HyperlinkStyleProperty) as Style; }
        set { SetValue(HyperlinkStyleProperty, value); }
    }

    public static readonly DependencyProperty HoverForegroundProperty = DependencyProperty.Register("HoverForeground", typeof(Brush),
            typeof(LinkLabel));

    [Category("Brushes"), Bindable(true)]
    public Brush HoverForeground
    {
        get { return GetValue(HoverForegroundProperty) as Brush; }
        set { SetValue(HoverForegroundProperty, value); }
    }

    public static readonly DependencyProperty LinkLabelBehavourProperty = DependencyProperty.Register("LinkLabelBehavour",            typeof(LinkLabelBehaviour),     typeof(LinkLabel));

    [Category("Common Properties"), Bindable(true)]
    public LinkLabelBehaviour LinkLabelBehavour
    {
        get { return (LinkLabelBehaviour)GetValue(LinkLabelBehavourProperty); }
        set { SetValue(LinkLabelBehavourProperty, value); }
    }

    static LinkLabel()
    {
        FrameworkElement.DefaultStyleKeyProperty.OverrideMetadata(
            typeof(LinkLabel),
            new FrameworkPropertyMetadata(typeof(LinkLabel)));
    }

}

為了使得內容可以綁定。我使用了Filipe Fortes 實現的BindableRun 我添加BindableRun  到控件模板中

<local:BindableRun BoundText="{Binding RelativeSource= {RelativeSource TemplatedParent}, Path=Content}"/>

 

為了支持不同的主題顯示。應該在工程里有個Themes文件夾。包含控件的樣式。LinkLabel只有一個樣式文件Generic.xaml，因為超鏈接樣式不管當前主題是什么。都是一樣的。我不會包含LinkLabel 的模板。

 

多看源代碼。下載並且開始使用吧。

示例和源碼下載

原文地址：building-a-wpf-linklabel-control

著作權聲明：本文由http://leaver.me 翻譯，歡迎轉載分享。請尊重作者勞動，轉載時保留該聲明和作者博客鏈接，謝謝！