Hyperlink in Silverlight

Silverlight Hyperlink Button Control

This article demonstrates how to create and use a HyperlinkButton control in Silverlight using XAML and C#.

Creating a HyperlinkButton

The HyperlinkButton element represents a Silverlight HyperlinkButton control in XAML.

 

<HyperlinkButton/>

 

The Width and Height attributes of the HyperlinkButton element represent the width and the height of a HyperlinkButton. The Content attribute represents the text of a HyperlinkButton.  The x:Name attribute represents the name of the control, which is a unique identifier of a control.

 

The code snippet in Listing 1 creates a HyperlinkButton control and sets the name, height, width, and content of a HyperlinkButton control.

 

<HyperlinkButton Width="200" Height="30"

                 Content="C# Corner Link"

                 Background="Black" Foreground="Orange"

                 FontWeight="Bold">           

</HyperlinkButton>

Listing 1

The output looks like Figure 1.

 

Figure 1

 

The NavigateUri property of the HyperlinkButton represents the URI to navigate when the HyperlinkButton is clicked. The TargetName property represents the target window or frame to navigate within the page specified by the NavigateUri.

The code in Listing 2 sets the NavigateUri and TargetName properties of the HyperlinkButton control.

<HyperlinkButton Width="200" Height="30"

                 Content="C# Corner Link"

                 Background="Black" Foreground="Orange"

                 FontWeight="Bold"

                 x:Name="CCSLink"

                 NavigateUri="http://www.c-sharpcorner.com"

                 TargetName="_blank">           

</HyperlinkButton>

Listing 2

Formatting a HyperlinkButton

The Background and Foreground properties of the HyperlinkButton set the background and foreground colors of a HyperlinkButton. You may use any brush to fill the border. The following code snippet uses linear gradient brushes to draw the background and foreground of a HyperlinkButton.

<HyperlinkButton.Background>

    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >

        <GradientStop Color="Blue" Offset="0.1" />

        <GradientStop Color="Orange" Offset="0.25" />                   

        <GradientStop Color="Green" Offset="0.75" />

        <GradientStop Color="Red" Offset="1.0" />

    </LinearGradientBrush>

</HyperlinkButton.Background>

<HyperlinkButton.Foreground>

    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >                   

        <GradientStop Color="Orange" Offset="0.25" />

        <GradientStop Color="Green" Offset="1.0" />                   

    </LinearGradientBrush>

</HyperlinkButton.Foreground>

The new HyperlinkButton looks like Figure 2.

 

Figure 2

Setting Image as Background of a HyperlinkButton

To set an image as background of a HyperlinkButton, we can set an image as the Background of the HyperlinkButton. The following code snippet sets the background of a HyperlinkButton to an image. 

<HyperlinkButton.Background>

    <ImageBrush ImageSource="dock.jpg" />

</HyperlinkButton.Background>

The new output looks like Figure 3.

 

Figure 3

Accessing and Setting HyperlinkButton Properties Dynamically

There are two ways to access a HyperlinkButton control dynamically from code. First, you can set a name of the control and use it like any other control.  The following code snippet creates a Hyperlink button and sets its name to HomeLink.

<HyperlinkButton Width="50.5" Height="18" x:Name="HomeLink"

      Content="HOME" Foreground="#FF383836"

      FontWeight="Bold" HorizontalAlignment="Left" Margin="125.5,102,0,0"

      VerticalAlignment="Top" GotFocus="HyperlinkButton_GotFocus"

                 MouseEnter="HyperlinkButton_MouseEnter"

                 MouseLeave="HyperlinkButton_MouseLeave"/> 

Second way to access a control by using the event handler.

Let's set foreground property of a Hyperlink button dynamically on mouse over and mouse leave. I am going to change the foreground property to green on mouse over and back to gray again when mouse is not over.

The following code snippet shows how to set the foreground color in both ways.

private void HyperlinkButton_MouseEnter(object sender, MouseEventArgs e)

{

    HomeLink.Foreground = new System.Windows.Media.SolidColorBrush(Colors.Green);

    //HyperlinkButton btn = (HyperlinkButton)sender;

    //btn.Foreground = new System.Windows.Media.SolidColorBrush(Colors.Green);

}

 

private void HyperlinkButton_MouseLeave(object sender, MouseEventArgs e)

{

    HomeLink.Foreground = new System.Windows.Media.SolidColorBrush(Colors.Gray);

    //HyperlinkButton btn = (HyperlinkButton)sender;

    //btn.Foreground = new System.Windows.Media.SolidColorBrush(Colors.Gray);

}

Summary

In this article, I discussed how we can create a HyperlinkButton control in Silverlight and C#.  We also saw how we can format a HyperlinkButton by setting its background, and foreground properties. After that, we saw you to set an image as the background of a HyperlinkButton.