• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 830
  • Last Modified:

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?
0
Rynert
Asked:
Rynert
  • 3
  • 3
1 Solution
 
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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:
Another fine approach...
0
 
RynertAuthor Commented:
It worked.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now