Beginning with Hyperlink and Command in Windows Phone

Occasionally read the XAML control changes for Store App development in Windows 8.1, an interest thing notified me is that Windows 8.1 adds the Hyperlink element to XAML text object model, which recalled me that the same element has been added into Windows Phone already, but with less documents for its use.

In the following paragraphs, I’d like to demonstrate how to perform the navigation and click events on Hyperlink in Windows Phone 8, along with a simple implementation of Hyperlink.Command.

First of all, let’s build a new Windows Phone project in Visual Studio, and insert the following XAML into Content Panel:

  1: <TextBlock x:Name="tb1"></TextBlock>
  2: <RichTextBox>
  3:     <Paragraph>
  4:         <Hyperlink>First Link</Hyperlink>
  5:         Some Text
  6:         <Hyperlink>Second Link</Hyperlink>
  7:     </Paragraph>
  8: </RichTextBox>

Now, we just press F5 to start debugging, and see these 2 Hyperlink as expected. Just like HyperlinkButton, we could set the NavigateUri for Hyperlink elements, and its only event “Click” is as normal as other Click event:

  1: <TextBlock x:Name="tb1"></TextBlock>
  2: <RichTextBox>
  3:     <Paragraph>
  4:         <Hyperlink NavigateUri="/Page1.xaml">First Link</Hyperlink>
  5:         Some Text
  6:         <Hyperlink Click="Hyperlink_Click">Second Link</Hyperlink>
  7:     </Paragraph>
  8: </RichTextBox>

Another topic in this article is Hyperlink.Command, which also supported in button and HyperlinkButton. The Command is an action to be executed, it’s not the event that is explicitly bind to a button. We need to bind the action to it like the other property of an element:

  1: <TextBlock x:Name="tb1"></TextBlock>
  2: <RichTextBox>
  3:     <Paragraph>
  4:         <Hyperlink CommandParameter="First Link" Command="{Binding HyperLinkTapped}">First Link</Hyperlink>
  5:         Some Text
  6:         <Hyperlink CommandParameter="Second Link" Command="{Binding HyperLinkTapped}">Second Link</Hyperlink>
  7:     </Paragraph>
  8: </RichTextBox>

It’s more flexible that we could define the action in a model object, and take the advantage of MVVM to dynamically execute the action for every different model instance. One important step is to implement a class derived from ICommand interface, the following is a simplified sample, CanExcuteChange event and CanExecute are omitted here for demo purpose:

  1: public class MyCommand : ICommand
  2: {
  3:     private Action<object> _execute;
  4:  
  5:     public MyCommand(Action<object> action)
  6:     {
  7:         _execute = action;
  8:     }
  9:  
  10:     public bool CanExecute(object parameter)
  11:     {
  12:         return true;
  13:     }
  14:  
  15:     public event EventHandler CanExecuteChanged;
  16:  
  17:     public void Execute(object parameter)
  18:     {
  19:         _execute(parameter);
  20:     }
  21: }

If we’d like to bind a Command in page code behind, a MyCommand property is needed, and we also have to define an action for MyCommand to execute:

  1: public MyCommand HyperLinkTapped { get; set; }
  2:  
  3: // Constructor
  4: public MainPage()
  5: {
  6:     InitializeComponent();
  7:  
  8:     HyperLinkTapped = new MyCommand(Executed);
  9:  
  10:     Title = "abe";
  11:     
  12:     // Sample code to localize the ApplicationBar
  13:     //BuildLocalizedApplicationBar();
  14: }
  15:  
  16: private void Executed(object parameter)
  17: {
  18:     tb1.Text = parameter.ToString();
  19: }

So far the basis implementation of Hyperlink and Command in Windows Phone is introduced, I’ll cover the some more detail in how to use it with MVVM in Whindows Phone App development later.

By Jazzen