WPF Navigation using HyperLink within XAML

I have a touchscreen WPF application I'm building using MVVM. One of the pages has a list of thumbnails that, when clicked, set the content of a Frame with some xaml using a Command to set a Dependency Property.

Here is the main pages content ;
<UserControl x:Class="App.Pages.Customer.MyShop"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:s="http://schemas.microsoft.com/surface/2008"
         mc:Ignorable="d" 
         d:DesignHeight="560" d:DesignWidth="1278">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="438"></RowDefinition>
        <RowDefinition Height="120"></RowDefinition>
    </Grid.RowDefinitions>
    <Frame Content="{Binding CurrentPage}" Grid.Row="0"/>
    <s:SurfaceScrollViewer Grid.Row="1" Height="120" HorizontalAlignment="Left" Width="1278" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" CanContentScroll="True" VerticalAlignment="Center">
        <s:LibraryBar Height="100" Width="1278" VerticalContentAlignment="Center" Rows="1" MaxWidth="1278" ItemsSource="{Binding Sections}" MinHeight="100">
            <s:LibraryBar.ItemTemplate>
                <DataTemplate>
                    <s:SurfaceButton Command="{Binding Path=DataContext.LoadMyShoppingPageCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}" CommandParameter="{Binding PageSource}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Height="72">
                        <Image Source="{Binding ImageSource}" Height="60"></Image>
                    </s:SurfaceButton>
                </DataTemplate>
            </s:LibraryBar.ItemTemplate>
        </s:LibraryBar>
    </s:SurfaceScrollViewer>
</Grid>

Open in new window

And the viewModel code ;
public class MyViewModel : ViewModelBase
{
    public ObservableCollection<MyStaffShopThumbViewModel> Sections { get; set; }

    public object CurrentPage
    {
        get { return (object)GetValue(CurrentPageProperty); }
        set { SetValue(CurrentPageProperty, value); }
    }

    // Using a DependencyProperty as the backing store for CurrentPage.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty CurrentPageProperty =
        DependencyProperty.Register("CurrentPage", typeof(object), typeof(MyStaffShopViewModel), new UIPropertyMetadata());

    public ICommand LoadPageCommand { get; set; }

    public MyViewModel()
    {
        Sections = new ObservableCollection<MyStaffShopThumbViewModel>();
        LoadPageCommand = new LoadPageCommand(this);
        SetSections();
    }

    private void SetSections()
    {
        var group = CurrentSession.Instance.CurrentGroup;

        var groupSections = group.MyStaffShopItems.Split(new Char[] { ',' });

        foreach (var s in groupSections)
        {
            Sections.Add(new MyStaffShopThumbViewModel(s));
        }
    }

    public void SetPage(string pageName)
    {
        try
        {
            CurrentPage = Helper.GetPage(pageName);
        }
        catch (Exception e)
        {
            MessageBox.Show("Error: Could not load page", "Error", MessageBoxButton.OK, MessageBoxImage.Error);
        }
    }
}

Open in new window

And an example of one of the loaded pages ;
<Page x:Class="App.Pages.Customer.my_shopping"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  mc:Ignorable="d" 
  d:DesignWidth="1278" d:DesignHeight="438">

<DockPanel LastChildFill="False">


    <RichTextBox HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,0" Width="466" Height="158" Padding="25,25,0,0">
        <FlowDocument>
            <Paragraph>
                <Run Foreground="#FF22A8DF" FontSize="32" FontFamily="Museo Sans Rounded 500" Text="Discounts, Savings, Vouchers"/>
            </Paragraph>
            <Paragraph LineHeight="8">
                <Run FontSize="22.667" FontFamily="Museo Sans Rounded 100" Text="Shopping with MyStaffShop can save you "/>
            </Paragraph>
            <Paragraph LineHeight="8">
                <Run FontSize="22.667" FontFamily="Museo Sans Rounded 100" Language="en-gb" Text="a"/>
                <Run FontSize="22.667" FontFamily="Museo Sans Rounded 100" Text="n"/>
                <Run FontSize="22.667" FontFamily="Museo Sans Rounded 100" Language="en-gb" Text=" "/>
                <Run FontSize="22.667" FontFamily="Museo Sans Rounded 100" Text="average of £750 per year"/>
                <Run FontSize="22.667" FontFamily="Museo Sans Rounded 100" Language="en-gb" Text="."/>
            </Paragraph>
        </FlowDocument>
    </RichTextBox>

    <Grid Height="280" Width="466" Margin="-466,0,0,0" VerticalAlignment="Bottom" HorizontalAlignment="Left">
        <Image HorizontalAlignment="Right" Margin="0,0,0,0" Source="pack://application:,,,/Pages/Customer/images/my-shopping.png" Stretch="Fill" Width="466"/>
    </Grid>
    <StackPanel Width="172" Orientation="Horizontal" Margin="35,35,0,0" HorizontalAlignment="Right">
        <Image Source="pack://application:,,,/Pages/Customer/images/my-shopping-main-1-gift-cards.png"  Width="172" HorizontalAlignment="Right" >
            <Image.DataContext>
                <Hyperlink NavigateUri="pack://application:,,,/Pages/Customer/MyShopping-GiftCards.xaml"/>
            </Image.DataContext>
        </Image>
    </StackPanel>
    <StackPanel Width="184" Orientation="Horizontal">
        <Image Source="pack://application:,,,/Pages/Customer/images/my-shopping-main-2-discounts.png" Width="184" Margin="0,35,0,0">
            <Image.DataContext>
                <Hyperlink NavigateUri="pack://application:,,,/Pages/Customer/MyShopping-Discounts.xaml"/>
            </Image.DataContext>
        </Image>
    </StackPanel>
    <StackPanel Width="184" Orientation="Horizontal">
        <Image Source="pack://application:,,,/Pages/Customer/images/my-shopping-main-3-points.png" Width="184" Margin="0,35,0,0">
            <Image.DataContext>
                <Hyperlink NavigateUri="pack://application:,,,/Pages/Customer/MyShopping-Points.xaml"/>
            </Image.DataContext>
        </Image>
    </StackPanel>
    <StackPanel Width="202" Orientation="Horizontal">
        <Image Source="pack://application:,,,/Pages/Customer/images/my-shopping-main-4-local.png" Width="202" Margin="0,35,0,0">
            <Image.DataContext>
                <Hyperlink NavigateUri="pack://application:,,,/Pages/Customer/MyShopping-Local.xaml"/>
            </Image.DataContext>
        </Image>
    </StackPanel>

</DockPanel>

Open in new window

I have tried to load xaml files with and without code begind so that InitializeComponent gets called. The main page loads fine but the Hyperlinks in the page do nothing. I've tried relative and pack Uri's. Is there a way to make this work?
RynertAsked:
Who is Participating?
 
RynertAuthor Commented:
Thanks for your response.  I got it working in the end, I had to change the hyperlink to a button and then route to the command in the view model.
0
 
Bob LearnedCommented:
I don't understand what the Hyperlink navigation is supposed to do.
0
 
RynertAuthor Commented:
Change the content of the Frame, to the linked XAML.
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
Bob LearnedCommented:
I don't believe that a Hyperlink can do what you are proposing.  You are talking about changing the source of a Frame, not redirecting to a different resource.

I am not quite sure about the best approach here...

Example:

Frame1.Source = new Uri("MyCalendar.xaml", UriKind.Relative);
0
 
Bob LearnedCommented:
Another fine approach...
0
 
RynertAuthor Commented:
It worked.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.