UWP C# WINUI NavigationView How to access other pages/views

Question

I am writing an app using navigation view basing on Using the NavigationView in your UWP applications tutorial. I hope someone can help to clarify 2 things

1. what is the best practice to place my general routines? in the MainPage.xaml.cs or the xaml in respective views?

2. How do i update my xaml element such as textblock in a different view? eg. I have a readHardwareID routine run at startup to read the hardware ID in MainPage.xaml.cs How do I display the information in InfoPage.xaml.

my UI

Please advise, Thanks.

Updated: 06-08-2020

I am trying to pass a simple AppVerison text from MainPage to InfoPage to test out OnNavigateTo. However when I run the code and clicked on the info tab, I ran into this error.

MainPage Code

public String AppVersionName = "Test version 1.0";

private void nvTopLevelNav_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
    {
        if (args.IsSettingsInvoked)
        { 
            contentFrame.Navigate(typeof(SettingsPage));    
        } else    
        {
            TextBlock ItemContent = args.InvokedItem as TextBlock;
            if (ItemContent != null)
            {
                switch (ItemContent.Tag)
                {
                    case "Nav_Home":
                        contentFrame.Navigate(typeof(HomePage));
                        break;

                    case "Nav_Devices":
                        contentFrame.Navigate(typeof(DevicesPage));
                        break;

                    case "Nav_Log":
                        contentFrame.Navigate(typeof(LogPage));
                        break;

                    case "Nav_Info":
                        contentFrame.Navigate(typeof(InfoPage));
                        break;
                }
            }
        }

InfoPage Code

public sealed partial class InfoPage : Page
{
    private MainPage mainPage;

    string appVersion; 

    public InfoPage(MainPage page)
    {
        this.InitializeComponent();
        mainPage = page;
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);

        var data = e.Parameter;
        appVersion = mainPage.AppVersionName; 

        readHardwareID();
    }

    public void readHardwareID()
    {
        var deviceIdtoken = HardwareIdentification.GetPackageSpecificToken(null);
        var deviceId = deviceIdtoken.Id;
        var deviceIdReader = DataReader.FromBuffer(deviceId);

        byte[] deviceIdbytes = new byte[deviceId.Length];
        deviceIdReader.ReadBytes(deviceIdbytes);

        DeviceID.Text = BitConverter.ToString(deviceIdbytes);

        var sysIdToken = SystemIdentification.GetSystemIdForPublisher();
        var sysId = sysIdToken.Id;
        var sysIdReader = DataReader.FromBuffer(sysId);

        byte[] sysIdbytes = new byte[sysId.Length];
        sysIdReader.ReadBytes(sysIdbytes);

        SystemID.Text = BitConverter.ToString(sysIdbytes);

        // get the system family information
        string deviceFamily = AnalyticsInfo.VersionInfo.DeviceFamily;
        Device.Text = deviceFamily;

        // get the system version number
        var deviceFamilyVersion = AnalyticsInfo.VersionInfo.DeviceFamilyVersion.ToString();
        var version = ulong.Parse(deviceFamilyVersion);
        var majorVersion = (version & 0xFFFF000000000000L) >> 48;
        var minorVersion = (version & 0x0000FFFF00000000L) >> 32;
        var buildVersion = (version & 0x00000000FFFF0000L) >> 16;
        var revisionVersion = (version & 0x000000000000FFFFL);
        var systemVersion = $"{majorVersion}.{minorVersion}.{buildVersion}.{revisionVersion}";
        OSVersion.Text = systemVersion.ToString();
        AppVersion.Text = appVersion;

    }
}

Answer 1

It could be very easy to solve this. Normally the NavigationView´s content is a specific user control. This example is very close to the one from the question but a little bit easier & without using "string mappings". It just exchanges its specific content. The example does not consider calling up the settings.

C#:

private void NavigationViewControl_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{
    switch (sender.MenuItems.IndexOf(args.InvokedItemContainer))
    {
        case 0:
            sender.Content = new TripPlanning();
            break;
        case 1:
            sender.Content = new History();
            break;
        case 2:
            sender.Content = new About();
            break;
    }
}

XAML:

<Grid>
    <NavigationView x:Name="NavigationViewControl" Background="LightBlue" IsBackButtonVisible="Collapsed"
                    IsSettingsVisible="False"
                    ItemInvoked="NavigationViewControl_ItemInvoked">
        <NavigationView.MenuItems>
            <NavigationViewItem Content="Haltestellen" x:Name="A" Icon="Map"/>
            <NavigationViewItem Content="Letzte Abfragen" x:Name="B" Icon="Bookmarks"/>
            <NavigationViewItem Content="Über die App" x:Name="C" Icon="Important"/>
        </NavigationView.MenuItems>
    </NavigationView>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="{x:Bind NavigationViewControl.CompactModeThresholdWidth}"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="NavigationViewControl.PaneDisplayMode" Value="Top"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

Answer 2

I found a simple explanation of navigation from the link below.

As I am a hardware person without much software developing background, the official documentation with limited examples and reference confused me.

I suggest this simple example will be able to help a lot of beginners as it made it very simple , straight forward and clear.

Pass parameters between UWP pages (common types string, int, and custom types)

Answer 3

what is the best practice to place my general routines? in the MainPage.xaml.cs or the xaml in respective views?

If you want to use NavigationView as the app's base architecture, we suggest you use Windows Template Studio to make NavigationView UWP template app. You could add the specific the page with Windows Template Studio. For more please refer link here.

How do i update my xaml element such as textblock in a different view? eg. I have a readHardwareID routine run at startup to read the hardware ID in MainPage.xaml.cs How do I display the information in InfoPage.xaml

If you have load the data in the MainPage, you could use Frame.Navigate method to page the parameter when navigate to InfoPage and getting the data from OnNavigatedTo override method.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    var data = e.Parameter;
}