How to make a simple hyperlink in XAML?

Question

All I want to do is make a small hyperlink in XAML. I tried everything. I give up.

What is the syntax for this?

<StackPanel Width="70" HorizontalAlignment="Center"> <Hyperlink Click="buttonClose_Click" Cursor="Hand" Foreground="#555" Width="31" Margin="0 0 0 15" HorizontalAlignment="Right">Close</Hyperlink> <Button Width="60" Margin="0 0 0 3">Test 1</Button> <Button Width="60" Margin="0 0 0 3">Test 2</Button> <Button Width="60" Margin="0 0 0 3">Test 3</Button> <Button Width="60" Margin="0 0 0 3">Test 4</Button> </StackPanel> 

Visual Studio Team: In Visual Studio 2010, I want Clippy to pop up and say, “It seems you are trying to make a hyperlink” and tell me how to do it. Can't you do this with MEF? That would be retro cool, and these little "how I do what I already know how to do in HTML" problems burn out so much time in the learning process using XAML.

Answer 1

You can use a button with a custom control template, the code below is a button with a limited hyperlink style (for example, it only supports text hyperlinks), but it may point you in the right direction.

 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Page.Resources> <Style x:Key="Link" TargetType="Button"> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="Cursor" Value="Hand"/> <Setter Property="Foreground" Value="Blue"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <TextBlock TextDecorations="Underline" Text="{TemplateBinding Content}" Background="{TemplateBinding Background}"/> <ControlTemplate.Triggers> <Trigger Property="IsPressed" Value="True"> <Setter Property="Foreground" Value="Red"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Page.Resources> <Button Content="Click Me!" Style="{StaticResource Link}"/> </Page> 

Answer 2

You cannot add a hyperlink to the StackPanel - you will get a runtime error. (Actually, I am surprised that this is not a compile-time error.) This is because Hyperlink does not live on the "control" side of WPF using <Button> and <StackPanel> and other things that are laid out on rectangular screen fragments and go down with UIElement . Instead, it lives on the “textual” side of things, with <Bold> and <Run> and <Paragraph> and other usually texical things that carry words and flow in lines and paragraphs and are omitted from TextElement .

Once you realize that there are two separate class hierarchies with different behaviors, it makes sense that the hyperlink will be on the "text" side of things (it makes it easier, for example, to have a paragraph with a hyperlink in the middle and even so that this hyperlink wraps itself through a line break )

But no, it is not so easy to detect when you start.

To mix the two worlds and use the hyperlink as a control, all you have to do is put it in a TextBlock. TextBlock is a control (that is, it can go to the StackPanel) that contains text things (that is, it can contain a hyperlink):

 <TextBlock><Hyperlink Click="buttonClose_Click">Close</Hyperlink></TextBlock> 

Answer 3

Try the following:

 <TextBlock> <Hyperlink RequestNavigate="Hyperlink_RequestNavigate" NavigateUri="http://www.msn.com">MSN</Hyperlink> </TextBlock> 

---

 private void Hyperlink_RequestNavigate(object sender, System.Windows.Navigation.RequestNavigateEventArgs e) { System.Diagnostics.Process.Start("http://www.msn.com"); } 

Answer 4

You may find that if you are attached to anything other than simple text values, you will need to use ContentPresenter , otherwise nothing will appear, this may be true if you are attached to an XML data source.

The Trigger property for IsMouseOver gives the text an underline.

An example where I'm m binding to XML is presented below.

 <Style x:Key="JobNumberStyleButton" TargetType="{x:Type Button}"> <Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="Cursor" Value="Hand"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <TextBlock> <ContentPresenter Margin="0,0,0,0" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="False" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> </TextBlock> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <TextBlock Padding="0,0,0,0" Margin="0,0,0,0"> <Underline> <ContentPresenter Margin="0,0,0,0" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="False" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> </Underline> </TextBlock> </ControlTemplate> </Setter.Value> </Setter> </Trigger> </Style.Triggers> </Style> 

Answer 5

 <TextBlock> <Hyperlink NavigateUri="{Binding YourUri}" RequestNavigate="YourRequestNavigate"> <TextBlock Text="{Binding YourText}" /> </Hyperlink> </TextBlock> 

This will link any related text in a nested text block, I have not yet found a better way, I would like the first text block not to be there, if possible. This will also work with DataTemplates.

Answer 6

Typically, the value of a hyperlink is to provide a binding to send the user to another page or, as a rule, to another resource, so it is implemented in this way, and you must specify the location for this resource as follows:

 <HyperLink NavigateUri="http://www.site.com"> Web Site </HyperLink> 

However, I found this blog using a special text block that is used as HyperLink and supports click events.

Answer 7

You can just use HyperlinkButton . When it is clicked, the URL will be displayed in your web browser:

 <HyperlinkButton NavigateUri="https://dev.windowsphone.com" TargetName="_blank" Content="Windows Phone Dev Center" />