Create a hyperlink in a Silverlight application

Creating a hyperlink in a Microsoft Silverlight 1.0 application differs slightly from creating a hyperlink in a Windows Presentation Foundation (WPF) application. As with all interactivity in a Silverlight 1.0 application, an event handler method is created to respond to a user action, and then sets the location property of the window object to a new URL.

To create a hyperlink in a Silverlight 1 application

1. In the main XAML document for the Silverlight 1.0 project, select the Canvas  control in the Toolbox, and draw a canvas object on the artboard.

2. Right-click the canvas object under Objects and Timeline, and then select Rename. Enter a new name for the canvas object, such as MyHyperlink.

3. With the MyHyperlink object still selected, open the Properties panel. Under Common Properties, set the Cursor property to Hand. When users move their pointer over your MyHyperlink canvas object, their pointer changes to a hand.

4. Double-click the MyHyperlink object to make it the activated object. A yellow bounding box appears around the canvas object to identify it as the activated object. New objects are added as child objects of the activated object.

5. Select the TextBlock  control from the Toolbox, and then draw a text block object inside the MyHyperlink object.

6. Make sure that you are in text-editing mode by pressing F2. Change the content in the text block to Link. Exit text-editing mode by pressing ESC.

7. Under Files in the Project panel, double-click the code-behind file for your XAML document. For example, if the XAML document you are editing is named Page.xaml, double-click the Page.xaml.js file. The code-behind file opens inside Expression Blend 2 in a JavaScript editor.

8. An example line of code to hook up an event handler already exists and resembles the following:

   rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   

   Add the following code under that line of code:

   if (null != this.control.content.findName("MyHyperlink"))
   this.control.content.findName("MyHyperlink").addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleHyperlink));
   

   This code tests for an object named MyHyperlink and, if it exists, adds an event handler method named handleHyperlink that responds to the MouseLeftButtonDown event.

9. Your code-behind file already contains a sample event handler method named handleMouseDown. At the end of the handleLoad method, notice that a comma (,) appears after its last brace (}), but that no comma appears after the last brace for the handleMouseDown method. This is because the handleMouseDown is the last method that is declared. When you add new methods, make sure that a comma appears after the last brace for each method except the last.

10. Add the following event hander method, preferably before the handleMouseDown event:

    handleHyperlink: function(sender, eventArgs)
    {
        window.location = "Http://www.microsoft.com";
    },
    

    This method responds to a user clicking the left mouse button inside your MyHyperlink canvas object, and redirects the browser to the Http://www.microsoft.com website.

11. Press F5 to test your application. Click the Link text to see whether you are redirected.

See also

Concepts

Try it: Create a hyperlink that opens a browser window

Create a hyperlink in a Page document