Lubo Blagoev's Blog

Currently there is no LinkLabel control for WPF and that's why I decided to build one. First I will show what is currently available in WPF.

If you want to simulate LinkLabel you can use inline Hyperlink in a TextBlock.

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

While this approach have benefits I don't like it much so I though why not write a better LinkLabel control similar to the one in Windows Forms. And so I did. First let me show you what the control looks like.

The first one is a default LinkLabel control, the second one have its  LinkLabelBehavior set to HoverUnderline and the third is using custom colors for Foreground and HoverForeground properties.

The LinkLabel control supports

• Foreground and HoverForeground properties
  • Allows setting custom properties of both foreground and hoverforeground properties
• LinkLabelBehavior property
  • Allows setting the underline behavior when cursor hovers or not the LinkLabel
• Custom HyperlinkStyle property
  • You can use this property to set specific custom defined style for the internal hyperlink of the LinkLabel. If set override custom  foreground and hoverforeground colors
• Url - the navigation target property.
• All other properties are inherited from the standard System.Windows.Controls.Label control

Settings these properties is easy using Blend or xaml code.  

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

 

Here is how this control can be used in a window. Just add namespace to the xaml and use the control.

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

The whole code of the control as simple as it can be. It just defines the desired properties and the appropriate category attributes that control where these properties are shown in Blend Designer.

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)));
    }
}

In order for the Content to be bindable I used the BindableRun implemented by Filipe Fortes here. I added this BindableRun object to the control template like so:

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

Download the source code Themed Controls Library.zip or just the compiled assembly ThemedControlsLibrary.dll