Modern UI how to go to another page from another link

Kokombads picture Kokombads · Jan 31, 2015 · Viewed 7.4k times · Source

I am currently using Modern UI from CodePlex. It is great and easy to use but there are some classes and events that I am not familiar with. Example: I have two GroupLinks named "Patients" and "Configurations". There are several pages in each of the GroupLinks. I tried to navigate from one page to another using a button click event. It worked. But when I tried navigating from Page1 of GroupLink2 to Page1 of GroupLink1, it still worked, but the problem was the active GroupLink remained in GroupLink2 instead of GroupLink1 just like the screenshots show below:

Configuration GroupLink2, I will click the New Entry

The page navigated to PatientPage, but the GroupLink is still GroupLink2

Btw, I used the code behind to navigate from Allergies(IrritantPage) to PatientsPage:

private void FilterControl_OnToPatientClick(object sender, RoutedEventArgs e)
    {            
        NavigationCommands.GoToPage.Execute("/MainContents/PatientGridPage.xaml", this);
    }

So how do I solve this?

here are my MainWindow, Patient's Tab Page and Configuration's List Page

MODERN WINDOW (Main Window)

<mui:ModernWindow x:Class="DentalProto.MainWindow"
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                  xmlns:mui="http://firstfloorsoftware.com/ModernUI"
                  Title="Dental" IsTitleVisible="True"
                  WindowStartupLocation="CenterScreen"
                  Width="1200"
                  Height="720"                       
                  ContentSource="/Pages/MainTabPage.xaml"
                  Closing="MainWindow_OnClosing"
                  >

    <mui:ModernWindow.MenuLinkGroups>
        <mui:LinkGroup DisplayName="User Name">
            <mui:LinkGroup.Links>

                <mui:Link DisplayName="Patients" Source="/Pages/MainTabPage.xaml" />
                <mui:Link DisplayName="Configurations" Source="/Pages/ConfigurationsListNav.xaml" />

            </mui:LinkGroup.Links>
        </mui:LinkGroup>

        <mui:LinkGroup DisplayName="settings" GroupKey="settings">
            <mui:LinkGroup.Links>
                <mui:Link DisplayName="software" Source="/Pages/SettingsPage.xaml" />
            </mui:LinkGroup.Links>
        </mui:LinkGroup>
    </mui:ModernWindow.MenuLinkGroups>

    <mui:ModernWindow.TitleLinks>
        <mui:Link DisplayName="settings" Source="/Pages/SettingsPage.xaml" />
        <mui:Link DisplayName="help" Source="https://www.facebook.com/" />
    </mui:ModernWindow.TitleLinks>
</mui:ModernWindow>

MAINTAB PAGE (Patient Page)

<UserControl x:Class="DentalProto.Pages.MainTabPage"
             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:mui="http://firstfloorsoftware.com/ModernUI"

             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="1280">
    <Grid >
        <!-- TODO: set @SelectedSource -->
        <mui:ModernTab Layout="Tab">
            <mui:ModernTab.Links>
                <!-- TODO: set @Source -->

                <mui:Link DisplayName="Patient" Source="/MainContents/PatientGridPage.xaml" />
                <mui:Link DisplayName="Treatment Record" Source="/MainContents/TreatmentFillInPage.xaml"/>

            </mui:ModernTab.Links>
        </mui:ModernTab>
    </Grid>
</UserControl>

CONFIGURATIONLISTNAV (Configurations' Page)

<UserControl x:Class="DentalProto.Pages.ConfigurationsListNav"
             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:mui="http://firstfloorsoftware.com/ModernUI"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid Style="{StaticResource ContentRoot}">
        <!-- TODO: set @SelectedSource -->
        <mui:ModernTab Layout="List">
            <mui:ModernTab.Links>
                <!-- TODO: set @Source -->
                <mui:Link DisplayName="Allergies" Source="/MainContents/IrritantGridPage.xaml"/>
                <mui:Link DisplayName="Health Diseases" Source="/MainContents/HealthDiseaseGridPage.xaml"/>
                <mui:Link DisplayName="Mouth Diseases" Source="/MainContents/MouthDiseaseGridPage.xaml"/>
                <mui:Link DisplayName="Procedures"  Source="/MainContents/ProcedureGridPage.xaml"/>
                <mui:Link DisplayName="Dentists" Source="/MainContents/DentistGridPage.xaml"/>
            </mui:ModernTab.Links>
        </mui:ModernTab>
    </Grid>
</UserControl>

Answer

corradolab picture corradolab · Feb 4, 2015

You are mixing "page" navigation with "tab" navigation inside the ModernTab control.

If you call NavigationCommands.GoToPage.Execute inside a ModernTab control you are changing the current "tab", not the current "page".

To change the top level page you can use:

IInputElement target = NavigationHelper.FindFrame("_top", this);
NavigationCommands.GoToPage.Execute("/Pages/BasicPage1.xaml", target);

If the new page is another ModernTab and you want to select a different tab then the default one, then you have to put in place some extra code. In example you could pass parameters to the new page. Se this SO answer.