Using the HyperlinkButton control in Silverlight


Introduction

 

The HyperlinkButton control in Silverlight is a combination of a hyperlink and a button. It enables the user to navigate to a particular link at runtime. The link can be internal, within the Web application or an external one, such as, http://www.microsoft.com.

 

By specifying the TargetName property of the control, you can decide whether to link to an external link or internal one.

 

The HyperlinkButton class is defined in the System.Windows.Controls namespace.

 

The advantage of this control is that you do not need to handle the Click event at all. Upon mouse click, the control will automatically navigate to the relevant link which is specified in the NavigateUri property.

 

Let us now see how to use this control. Create a new Silverlight project named HpyerlinkDemo.

 

Next, in the Design view of Page.xaml, drag and drop a HyperlinkButton control from the Toolbox between the <Grid></Grid> tags.  Configure the properties of the HyperlinkButton control as shown below:

 

Page.xaml 

 

<UserControl x:Class="NewDemo.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="300" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

        <Canvas Height="300" Width="300">

<HyperlinkButton Content="Click this!" NavigateUri="http://www.microsoft.com" ClickMode="Press" Canvas.Top="10" Canvas.Left="15"  ></HyperlinkButton>

    </Canvas>

        </Grid>

</UserControl>

 

The Content property represents the text for the button and NavigateUri value represents the link to which to navigate.

 

The ClickMode property determines which the mouse action will cause the hyperlink to be activated. Here, it is specified as Press. You can also give Release or Hover instead of Press in which case the mouse button release or mouse button hover would have activated the link.

 

The TargetName property (not shown here) if specified as _blank will open the link in a new window. 

 

The following table shows the possible values for TargetName that you can give:

 

Target

Description

_blank, _media, or _search Will load the linked document into a new blank window
_parent, _self, _top, or "" Will load the page into the window in which the link was clicked (the current active window)

 

It is important to note that NavigateUri and TargetName are also defined as fields in the HyperlinkButton class in addition to being properties. As fields, their names are NavigateUriProperty and TargetNameProperty respectively. 

 

Conclusion:

 

Thus, in this article, you learnt how to work with the HyperlinkButton control of Silverlight 2.