{"id":1368,"date":"2022-12-04T17:35:08","date_gmt":"2022-12-04T17:35:08","guid":{"rendered":"https:\/\/www.budus.it\/Blog\/?p=1368"},"modified":"2022-12-05T07:57:30","modified_gmt":"2022-12-05T07:57:30","slug":"c-winui-wints-template-studio-inavigationservice","status":"publish","type":"post","link":"https:\/\/www.budus.it\/Blog\/c-winui-wints-template-studio-inavigationservice\/","title":{"rendered":"C# + WinUI + WinTS (Template Studio): INavigationService"},"content":{"rendered":"\n

Ho gi\u00e0 trattato di WinUI 3 in un altro articolo (C# + WinUI 3 + MVVM Toolkit (Enter like Tab Key to Move Focus on Next Element)<\/a>), qui mi soffermo sull’uso di Template Studio<\/a> e alla possibilit\u00e0 di navigare tra le pagine<\/em>, un po’ come fosse un sito web.<\/p>\n\n\n\n\n\n\n\n

\n

Template Studio<\/p>\nRappresenta un Wizard per imbastire un’App in modo semplice<\/em> tramite Visual Studio (io uso Community, ma andr\u00e0 bene anche per i fratelli maggiori).<\/cite><\/blockquote>\n\n\n\n

Sia chiaro: non prendete niente per oro colato, quello che scrivo qui \u00e8 un archivio di soluzioni che ho trovato a problemi che devo affrontare e che voglio custodire per poterle ritrovare, nonch\u00e9 tutta roba che potrebbe pure essere di pessimo esempio<\/em>.<\/strong> Sta a chi legge valutare il contenuto, anche sulla base di quanto trova altrove (se lo trova …).<\/p>\n\n\n\n

Date le doverose premesse, passiamo a vedere come ho risolto la faccenda.<\/p>\n\n\n\n

Non sto ad elencare per filo e per segno; sostanzialmente ho creato la base di un’App con Template Studio, che ho chiamato “TemplateStudioForWinUISample<\/code>“, dove la pagina “Main<\/strong>” era vuota e l’ho riempita con un piccolo form.<\/p>\n\n\n\n

Quando invio il form, voglio che venga visualizzata una pagina riepilogativa, tutto qui, anzi, non ho nemmeno implementato la validazione (che comunque ho descritto nell’altro articolo linkato sopra), mi serviva giusto il minimo indispensabile per vedere se funziona e capire il meccanismo di passaggio da una pagina all’altra, decidendo io se i dati devono essere mantenuti o meno<\/em><\/strong> (per default vengono persi o mantenuti sempre in base all’impostazione di “NavigationCacheMode = Microsoft.UI.Xaml.Navigation.NavigationCacheMode.Enabled;<\/code>“).<\/p>\n\n\n\n

S\u00ec, sto brancolando nel buio e mi arrangio alla meno peggio, per questo invito a prendere tutto con le pinze !<\/strong><\/pre>\n\n\n\n
Iniziamo con TemplateStudioForWinUISample\\Views\\MainPage.xaml<\/code>, che rappresenta la UI della pagina Main<\/strong>, inizialmente vuota, quella dove io ci ho messo il form:<\/p>\n\n\n\n
<Page\n    x:Class=\"TemplateStudioForWinUISample.Views.MainPage\"\n    xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\n    xmlns:d=\"http:\/\/schemas.microsoft.com\/expression\/blend\/2008\"\n    xmlns:mc=\"http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006\"\n    mc:Ignorable=\"d\">\n\n    <Grid x:Name=\"ContentArea\">\n        <StackPanel Spacing=\"20\">\n            <TextBox x:Name=\"TextBoxName\" Header=\"Nome:\" Text=\"{x:Bind ViewModel.Name, Mode=TwoWay}\" KeyDown=\"KeyDownEventHandler\" \/>\n            <TextBox Header=\"Nome:\" Text=\"{x:Bind ViewModel.Surname, Mode=TwoWay}\" KeyDown=\"KeyDownEventHandler\" \/>\n            <Border BorderThickness=\"1\" BorderBrush=\"Aqua\" \/>\n            <Button Content=\"Invia ...\" HorizontalAlignment=\"Right\" Click=\"SubmitButtonEventHandler\" \/>\n        <\/StackPanel>\n    <\/Grid>\n<\/Page>\n<\/code><\/pre>\n\n\n\n
La UI viene amministrata da questa classe TemplateStudioForWinUISample\\Views\\MainPage.xaml.cs<\/code> (Template Studio usa il pattern MVVM e qui siamo nella View<\/strong><\/em>):<\/p>\n\n\n\n
using System.Diagnostics;\nusing Microsoft.UI.Xaml;\nusing Microsoft.UI.Xaml.Controls;\nusing Microsoft.UI.Xaml.Input;\nusing TemplateStudioForWinUISample.Contracts.Services;\nusing TemplateStudioForWinUISample.Contracts.ViewModels;\nusing TemplateStudioForWinUISample.ViewModels;\n\nnamespace TemplateStudioForWinUISample.Views;\n\npublic sealed partial class MainPage : Page\n{\n    public MainViewModel ViewModel\n    {\n        get;\n    }\n\n    public MainPage()\n    {\n        ViewModel = App.GetService<MainViewModel>();\n        InitializeComponent();\n\n        NavigationCacheMode = Microsoft.UI.Xaml.Navigation.NavigationCacheMode.Enabled;\n\n        Loaded += MainPage_Loaded;\n    }\n\n    private void MainPage_Loaded(object sender, RoutedEventArgs e) {\n        TextBoxName.Focus(FocusState.Programmatic);\n    }\n\n    \/\/\/ <summary>\n    \/\/\/ Gestisce la pressione del \"Return\" sui campi del form, affinch\u00e9 sia come premere TAB.\n    \/\/\/ <\/summary>\n    \/\/\/ <param name=\"sender\"><\/param>\n    \/\/\/ <param name=\"e\"><\/param>\n    \/\/\/ <exception cref=\"ArgumentNullException\"><\/exception>\n    private void KeyDownEventHandler(object sender, KeyRoutedEventArgs e)\n    {\n        if (sender is null)\n        {\n            throw new ArgumentNullException(nameof(sender));\n        }\n\n        if (e is null)\n        {\n            throw new ArgumentNullException(nameof(e));\n        }\n\n        if (e.Key == Windows.System.VirtualKey.Enter)\n        {\n            try\n            {\n                FindNextElementOptions options = new()\n                {\n                    SearchRoot = (DependencyObject)((Control)sender).XamlRoot.Content\n                };\n\n                FocusManager.TryMoveFocus(FocusNavigationDirection.Next, options);\n            }\n            catch (Exception ex)\n            {\n                Debug.WriteLine($\"ERRORE: {ex.Message}\");\n            }\n        }\n    }\n\n    \/\/\/ <summary>\n    \/\/\/ Gestione dell'Invio del Form: passa alla pagina di riepilogo.\n    \/\/\/ <\/summary>\n    \/\/\/ <param name=\"sender\"><\/param>\n    \/\/\/ <param name=\"e\"><\/param>\n    \/\/\/ <exception cref=\"ArgumentNullException\"><\/exception>\n    private void SubmitButtonEventHandler(object sender, RoutedEventArgs e)\n    {\n        if (sender is null)\n        {\n            throw new ArgumentNullException(nameof(sender));\n        }\n\n        if (e is null)\n        {\n            throw new ArgumentNullException(nameof(e));\n        }\n\n        Debug.WriteLine($\"NOME ..: {ViewModel.Name}\\nCOGNOME: {ViewModel.Surname}\");\n        try\n        {\n            var service = App.GetService<INavigationService>();\n            service.NavigateTo(typeof(ReportViewModel).FullName!, ViewModel);\n        }\n        catch (Exception ex)\n        {\n            Debug.WriteLine($\"ERRORE: {ex.Message}\");\n        }\n    }\n}\n<\/code><\/pre>\n\n\n\n
La View<\/strong><\/em> va a pescare i dati<\/em> dalla ViewModel<\/strong><\/em> relativa, quindi abbiamo TemplateStudioForWinUISample\\ViewModels\\MainViewModel.cs<\/code>:<\/p>\n\n\n\n
using System.Diagnostics;\nusing CommunityToolkit.Mvvm.ComponentModel;\nusing TemplateStudioForWinUISample.Contracts.ViewModels;\n\nnamespace TemplateStudioForWinUISample.ViewModels;\n\npublic partial class MainViewModel : ObservableRecipient, INavigationAware\n{\n    public MainViewModel()\n    {\n    }\n\n    public void OnNavigatedTo(object parameter)\n    {\n        if (parameter is bool && (bool)parameter)\n        {\n            \/\/ \u00c8 stato chiesto il reset.\n            Name = string.Empty;\n            Surname= string.Empty;\n        }\n    }\n\n    public void OnNavigatedFrom()\n    {\n    }\n\n    [ObservableProperty]\n    private string name = string.Empty;\n\n    [ObservableProperty]\n    private string surname = string.Empty;\n\n}\n<\/code><\/pre>\n\n\n\n
Nel codice sopra, non bisogna farsi ingannare<\/em> dalle poche righe, una classe che sembra<\/em> insignificante: usando “ObservableRecipient<\/code>” (MVVM Toolkit<\/a>), avviene una magia, tale per cui tutto il codice che un tapino deve normalmente scrivere, viene creato in automatico dal tookit!<\/em><\/p>\n\n\n\n
Sostanzialmente viene fatto in modo che mentre si scrive nella UI, le corrispondenti variabili del ViewModel<\/strong><\/em> vengono inizializzate al valore corrente. La magia<\/em> avviene dichiarando le variabili “private string name ...<\/code>” ed usando il tag “[ObservableProperty]<\/code>“.<\/p>\n\n\n\n
Ok, ora passiamo alla pagina del report: io l’ho aggiunta usando Template Studio (tasto destro sul progetto, Add ma poi si usa il menu apposito, non quello per aggiungere una classe qualsiasi) e poi l’ho rimossa da Views\\ShellPage.xaml<\/code>:<\/p>\n\n\n\n
...cut...\n<\/NavigationViewItem>\n                <!--\n                <NavigationViewItem x:Uid=\"Shell_Report\" helpers:NavigationHelper.NavigateTo=\"TemplateStudioForWinUISample.ViewModels.ReportViewModel\">\n                    <NavigationViewItem.Icon>\n                        <FontIcon FontFamily=\"{StaticResource SymbolThemeFontFamily}\" Glyph=\"&#xe7c3;\"\/>\n                    <\/NavigationViewItem.Icon>\n                <\/NavigationViewItem>\n                -->\n            <\/NavigationView.MenuItems>\n...cut...<\/code><\/pre>\n\n\n\n
Praticamente un banale commento “<!-- ... --><\/code>“, potevo anche cancellare … ma mi \u00e8 risultato pi\u00f9 utile cos\u00ec: posso ripristinarla per modificare la UI agevolmente, per poi cancellarla<\/em> di nuovo.<\/p>\n\n\n\n
Iniziamo con la UI del report TemplateStudioForWinUISample\\Views\\ReportPage.xaml<\/code>:<\/p>\n\n\n\n
<Page\n    x:Class=\"TemplateStudioForWinUISample.Views.ReportPage\"\n    xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\n    xmlns:d=\"http:\/\/schemas.microsoft.com\/expression\/blend\/2008\"\n    xmlns:mc=\"http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006\"\n    mc:Ignorable=\"d\">\n\n    <Grid x:Name=\"ContentArea\">\n        <StackPanel Spacing=\"10\">\n            <Grid ColumnSpacing=\"10\">\n                <Grid.ColumnDefinitions>\n                    <ColumnDefinition Width=\"Auto\"\/>\n                    <ColumnDefinition Width=\"*\"\/>\n                <\/Grid.ColumnDefinitions>\n\n                <StackPanel Grid.Column=\"0\" Spacing=\"10\">\n                    <TextBlock Text=\"Nome:\" HorizontalAlignment=\"Right\" \/>\n                    <TextBlock Text=\"Cognome:\" HorizontalAlignment=\"Right\" \/>\n                <\/StackPanel>\n                <StackPanel Grid.Column=\"1\" Spacing=\"10\" >\n                    <TextBlock Text=\"{x:Bind ViewModel.MainViewModel.Name,Mode=OneTime}\"\/>\n                    <TextBlock Text=\"{x:Bind ViewModel.MainViewModel.Surname,Mode=OneTime}\"\/>\n                <\/StackPanel>\n            <\/Grid>\n            \n            <Border BorderThickness=\"1\" BorderBrush=\"Aqua\" \/>\n            <StackPanel Orientation=\"Horizontal\" Spacing=\"30\" HorizontalAlignment=\"Right\">\n                <Button x:Name=\"ButtonAnnulla\" Content=\"Annulla\" Click=\"ButtonAnnullaEventHandler\" \/>\n                <Button Content=\"Conferma\" Click=\"ButtonConfermaEventHandler\" \/>\n            <\/StackPanel>\n            <!-- Click=\"\" -->\n        <\/StackPanel>\n    <\/Grid>\n<\/Page>\n<\/code><\/pre>\n\n\n\n
Quindi al relativo codice View<\/strong><\/em> TemplateStudioForWinUISample\\Views\\ReportPage.xaml.cs<\/code>:<\/p>\n\n\n\n
using System.Diagnostics;\nusing Microsoft.UI.Xaml.Controls;\nusing TemplateStudioForWinUISample.Contracts.Services;\nusing TemplateStudioForWinUISample.ViewModels;\n\nnamespace TemplateStudioForWinUISample.Views;\n\npublic sealed partial class ReportPage : Page\n{\n    public ReportViewModel ViewModel\n    {\n        get;\n    }\n\n    public ReportPage()\n    {\n        ViewModel = App.GetService<ReportViewModel>();\n        InitializeComponent();\n\n        Loaded += ReportPage_Loaded;\n    }\n\n    private void ReportPage_Loaded(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n    {\n        ButtonAnnulla.Focus(Microsoft.UI.Xaml.FocusState.Programmatic);\n    }\n\n    \/\/\/ <summary>\n    \/\/\/ Gestione dell'Annullamento del Form: Ritorna indietro.\n    \/\/\/ <\/summary>\n    \/\/\/ <param name=\"sender\"><\/param>\n    \/\/\/ <param name=\"e\"><\/param>\n    \/\/\/ <exception cref=\"ArgumentNullException\"><\/exception>\n    private void ButtonAnnullaEventHandler(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n    {\n        if (sender is null)\n        {\n            throw new ArgumentNullException(nameof(sender));\n        }\n\n        if (e is null)\n        {\n            throw new ArgumentNullException(nameof(e));\n        }\n\n        try\n        {\n            var service = App.GetService<INavigationService>();\n            service.NavigateTo(typeof(MainViewModel).FullName!, false, clearNavigation: true);\n        }\n        catch (Exception ex)\n        {\n            Debug.WriteLine($\"ERRORE: {ex.Message}\");\n        }\n    }\n\n    private void ButtonConfermaEventHandler(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)\n    {\n        if (sender is null)\n        {\n            throw new ArgumentNullException(nameof(sender));\n        }\n\n        if (e is null)\n        {\n            throw new ArgumentNullException(nameof(e));\n        }\n\n        try\n        {\n            Debug.WriteLine($\"SUBMIT:\\n\\nNOME ..: {ViewModel.MainViewModel.Name}\\nCOGNOME: {ViewModel.MainViewModel.Surname}\");\n\n            var service = App.GetService<INavigationService>();\n            service.NavigateTo(typeof(MainViewModel).FullName!, true, clearNavigation: true);\n        }\n        catch (Exception ex)\n        {\n            Debug.WriteLine($\"ERRORE: {ex.Message}\");\n        }\n    }\n}\n<\/code><\/pre>\n\n\n\n
Ed infine al corrispondente ViewModel<\/strong><\/em> TemplateStudioForWinUISample\\ViewModels\\ReportViewModel.cs<\/code>:<\/p>\n\n\n\n
using CommunityToolkit.Mvvm.ComponentModel;\nusing TemplateStudioForWinUISample.Contracts.ViewModels;\n\nnamespace TemplateStudioForWinUISample.ViewModels;\n\npublic class ReportViewModel : ObservableRecipient, INavigationAware\n{\n\n    private MainViewModel mainViewModel = new();\n\n    public MainViewModel MainViewModel => mainViewModel;\n\n    public ReportViewModel()\n    {\n    }\n\n    public void OnNavigatedTo(object parameter)\n    {\n        mainViewModel = (MainViewModel)parameter ?? throw new ArgumentNullException(nameof(parameter));\n    }\n\n    public void OnNavigatedFrom()\n    {\n    }\n}\n<\/code><\/pre>\n\n\n\n
Qui le parti salienti sono:<\/p>\n\n\n\n
    \n
  • Il fatto di ereditare la classe “ReportViewModel<\/code>” da “INavigationAware<\/code>“.<\/li>\n\n\n\n
  • L’implementazione dell’Interfaccia, con le funzioni “OnNavigatedTo<\/code>” e “OnNavigatedFrom<\/code>” (quest’ultima peraltro vuota, ma l’Interfaccia in C# prevede che tutti i metodi siano implementati).<\/li>\n<\/ul>\n\n\n\n
    Spero che anche questo articolo sia di aiuto a qualche sfigato che, come me, si sta sbattendo per imparare a realizzare App per Windows 10\/11 … una tribolazione inaudita (almeno, nel momento in cui scrivo e per chi \u00e8 nelle mie – pessime – condizioni).<\/p>\n","protected":false},"excerpt":{"rendered":"
    Ho gi\u00e0 trattato di WinUI 3 in un altro articolo (C# + WinUI 3 + MVVM Toolkit (Enter like Tab Key to Move Focus on Next Element)), qui mi soffermo sull’uso di Template Studio e alla possibilit\u00e0 di navigare tra le pagine, un po’ come fosse un sito web.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57,6],"tags":[278,281,98,280,279],"class_list":["post-1368","post","type-post","status-publish","format-standard","hentry","category-development","category-software","tag-c-2","tag-mvvm","tag-windows","tag-wints","tag-winui"],"_links":{"self":[{"href":"https:\/\/www.budus.it\/Blog\/wp-json\/wp\/v2\/posts\/1368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.budus.it\/Blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.budus.it\/Blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.budus.it\/Blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.budus.it\/Blog\/wp-json\/wp\/v2\/comments?post=1368"}],"version-history":[{"count":2,"href":"https:\/\/www.budus.it\/Blog\/wp-json\/wp\/v2\/posts\/1368\/revisions"}],"predecessor-version":[{"id":1371,"href":"https:\/\/www.budus.it\/Blog\/wp-json\/wp\/v2\/posts\/1368\/revisions\/1371"}],"wp:attachment":[{"href":"https:\/\/www.budus.it\/Blog\/wp-json\/wp\/v2\/media?parent=1368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.budus.it\/Blog\/wp-json\/wp\/v2\/categories?post=1368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.budus.it\/Blog\/wp-json\/wp\/v2\/tags?post=1368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}