Solved

WPF Navigation using HyperLink within XAML

Posted on 2012-03-28
6
729 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages in an application. Themes can be made up of a set of elements: skins, style sheets, images, and o…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
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…
This is a video that shows how the OnPage alerts system integrates into ConnectWise, how a trigger is set, how a page is sent via the trigger, and how the SENT, DELIVERED, READ & REPLIED receipts get entered into the internal tab of the ConnectWise …

911 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

19 Experts available now in Live!

Get 1:1 Help Now