自定义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 的模板。

 

多看源代码。下载并且开始使用吧。

示例和源码下载

http://www.blagoev.com/blog/post/building-a-wpf-linklabel-control.aspx

comments powered by Disqus