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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
OWASP: Threats Fundamentals

Learn the top ten threats that are present in modern web-application development and how to protect your business from them.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bob LearnedCommented:
Another fine approach...
0
RynertAuthor Commented:
It worked.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
C#

From novice to tech pro — start learning today.