It seems like Hyperlinks are my main focus this week.

Once I had gotten the Hyperlinks with Images working for my current project, I got to thinking about my next project and just what I could get Hyperlinks to look like.  It turns out that you could do just about anything you want to create a Hyperlink.  The only thing limiting you is your imagination though you may want to temper your imagination and not make anything too gaudy.

I had a vague idea of what I wanted and one thing I definitely wanted to do was use the existing colour scheme using Yellow and Teal.  Instead of two separate colours I decided I wanted to use a Gradient colour so the first thing I did was create a LinearGradientBrush as a Page Resource so I could easily re-use it throughout the project.

 I am going to make a small side trip here, but I feel it is an important one.  In this post, and my two previous, I mention that I am using a Windows Presentation Foundation (WPF) Page for my projects.  I also mentioned that the Users web browser, Internet Explorer 6 in this case, is going to be used to view the page.  (At the time of writing this post you can only use Internet Explorer 6 or higher to view a page with XMAL markup).

Without a slight modification to a Page that is automatically generated by Visual Studio, and Expression Blend, the page itself will not open in the web browser.  There will be an error generated.

When Visual Studio creates a WPF Page the XAML markup for the page looks like the following:

 which is fine if you are going to run your application in a WPF Navigation window.  If you, like I want, wish to display the page directly in Internet Explorer, then you must remove the reference to the Class name.  Your XAML for the base page would now look like:

Now if you were to add some content to your page and try to open it with Internet Explorer the page would display assuming there are no errors in the page content XAML.

With that small explanation out of the way it is back to the project.

I wanted to have my Hyperlinks as an irregular shape, but not so irregular that I needed to create a Polygon shape for them.  What I was thinking of was something rectangular but with not all the corners squared.   The easiest way that I use for this is to use a Border.

Knowing that I can’t use a Hyperlink without it being in an UIElement, I put a Hyperlink in a TextBlock and added the Border XAML between the opening and closing tags of the Hyperlink.

I applied the LinearGradientColor I added as a page resource as the colour, or Brush, for the Border and set the Thickness of the Border to 10.  To give the Border a look of something other than a rectangle, I changed the top left and bottom right CornerRadius to 20 and 10 respectively.

This gave me a starting point as can be seen in the following screenshot.

Yes the Border is very small, but that is only because I have not put any content into it yet.  There is also that annoying little blue line showing it to be a Hyperlink too which I will deal with later.

The Border can only hold one WPF Element, which will suit my purposes fine, but if you want to be more elaborate you will need to add a container such as the Grid before adding any other Elements.

I am using a TextBlock to display the Caption of the link so between the opening and closing tags of the Border I inserted the XAML for the TextBlock.

I set three properties of the inner TextBlock, the Background to my LinearGradientBrush, the Foreground and FontWeight.  I set the FontWeight so that the Text of the TextBlock stands out a little more. 
I now mostly had the look I was going for.

I say mostly because I still had the blue line under the link showing it as a link which I didn’t want.  I also have not set the link itself.

Setting the NavigateUri and TextDecorations properties of the Hyperlink fixes those two remaining issues.

The screenshot below shows the final look of the Hyperlinks.