Solved

WPF Navigation using HyperLink within XAML

Posted on 2012-03-28
6
723 Views
Last Modified: 2012-05-07
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
Comment
Question by:Rynert
  • 3
  • 3
6 Comments
 
LVL 96

Expert Comment

by:Bob Learned
ID: 37782513
I don't understand what the Hyperlink navigation is supposed to do.
0
 

Author Comment

by:Rynert
ID: 37783024
Change the content of the Frame, to the linked XAML.
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 37783077
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

Accepted Solution

by:
Rynert earned 0 total points
ID: 37785943
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
 
LVL 96

Expert Comment

by:Bob Learned
ID: 37786740
Another fine approach...
0
 

Author Closing Comment

by:Rynert
ID: 37936163
It worked.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

After several hours of googling I could not gather any information on this topic. There are several ways of controlling the USB port connected to any storage device. The best example of that is by changing the registry value of "HKEY_LOCAL_MACHINE\S…
More often than not, we developers are confronted with a need: a need to make some kind of magic happen via code. Whether it is for a client, for the boss, or for our own personal projects, the need must be satisfied. Most of the time, the Framework…
This is Part 3 in a 3-part series on Experts Exchange to discuss error handling in VBA code written for Excel. Part 1 of this series discussed basic error handling code using VBA. http://www.experts-exchange.com/videos/1478/Excel-Error-Handlin…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now