Continuing on the subject, and project, from my last post I will look at using an Image, as well as other WPF Elements, instead of plain boring Text as the visual for a Hyperlink on a WPF Page.

The page in question will be viewed by the user in the web browser, in the instance of my application the browser will be IE6, which will link to external sites on the Internet.  We wanted to use the logo from the sites, sometimes with a caption under the logo, rather than just a textual link.

It did take me a while to figure this one out mostly because that I forgot one of the really great things about Windows Presentation Foundation (WPF) which is that just about all WPF Controls, if not all, can hold any WPF object themselves which made setting up the Image links very easy.

I started out with the Hyperlink itself.  Due to the fact a Hyperlink is not a UIElement I had to place the link itself in a TextBlock.

The image below shows the link on the page.

To get the image to be the Hyperlink, the XAML for the Image needs to be added between the opening and closing tags of the Hyperlink as well as removing the text of the link.

 So I ended up with what I originally wanted an Image as a Hyperlink as the screenshot below shows.

There was one other small nit-picky detail to take care of before I was finished.  If you look closely at the next screenshot, you can see a small blue line under the image indicating that the image is a link.

I didn’t want the line under the image so I just had to set one more Property of the Hyperlink.  The property to be set is the TextDecorations Property of the Hyperlink to None.

 Now you can see that there is no line under the link.