L'integrazione con il sistema operativo è uno dei punti di forza delle Windows Store app, una di esse in particolare è proprio un requisito per la pubblicazione nello Store: si tratta dell'utilizzo del pannello dei Settings del sistema operativo per integrare impostazioni e informazioni sull'applicazione.
In WinRT abbiamo a disposizione la classe statica SettingsPane con cui possiamo gestire eventi e contenuti del pannello Settings del sistema operativo, che si apre dalla charm, con la gesture swipe e lo short-cut Windows+c.
L'oggetto è molto semplice: espone il metodo GetForCurrentView per recuperare l'oggetto SettingsPane associato all'applicazione, il metodo Show per mostrare programmaticamente il flyout e infine l'evento CommandsRequested che si scatena quando l'utente apre manualmente la barra dei Settings.
La logica di base è quella di intercettare l'evento di apertura ed aggiungere le nostre voci di menu a quelle predefinite dal sistema, come Permissions ecc..
Per aggiungere una voce possiamo usare l'oggetto SettingsCommand, che implementa l'interfaccia IUICommand, e può essere quindi aggiunto alla collezione IList
var s = SettingsPane.GetForCurrentView(); s.CommandsRequested += (SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args) => { var cmd = new SettingsCommand("commandId", "Impostazioni (etichetta)", (o) => { //popup }); args.Request.ApplicationCommands.Add(cmd); }; SettingsPane.Show();
L'oggetto SettingsCommand espone un delegato che viene richiamato alla pressione del relativo elemento del menu, è a seguito di questo evento che possiamo visualizzare la nostra interfaccia e mostrare all'utente le informazioni o la maschera di impostazioni.
In XAML non esistono controlli specifici per rispettare la UI e la user experience del sistema operativo: il tutto può essere fatto utilizzando opportunamente il controllo Popup impostando dimensioni, animazioni di transizione e creando un layout aderente a quello di Windows (compreso il pulsante di back).
Tim Heuer (http://timheuer.com), Program Manager Lead per la divisione XAML in Microsoft ha creato Callisto: una libreria che tra le altre cose, implementa un controllo SettingsFlyout che semplifica l'implementazione di tali layout. Ecco un esempio:
var s = SettingsPane.GetForCurrentView(); s.CommandsRequested += (SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args) => { var cmd = new SettingsCommand("commandId", "Impostazioni (etichetta)", (o) => { var f = new Callisto.Controls.SettingsFlyout(); //larghezza del flyout f.FlyoutWidth = SettingsFlyout.SettingsFlyoutWidth.Narrow; //f.FlyoutWidth = SettingsFlyout.SettingsFlyoutWidth.Wide; //testo dell'header f.HeaderText = o.Label; //colore di sfondo dell'header f.HeaderBrush = new SolidColorBrush(Colors.Orange); //logo di fianco all'header var img = new BitmapImage(new Uri("ms-appx:///Assets/SmallLogo.png")); f.SmallLogoImageSource = img; //colore del testo e dello sfondo f.ContentBackgroundBrush = new SolidColorBrush(Colors.Red); f.ContentForegroundBrush = new SolidColorBrush(Colors.White); //contenuto f.Content = new TextBlock() { Text = "Esempio" }; f.IsOpen = true; }); args.Request.ApplicationCommands.Add(cmd); }; SettingsPane.Show();
La reference di Callisto è gestibile attraverso NuGet o come estenzione di Visual Studio.
(http://visualstudiogallery.msdn.microsoft.com/0526563b-7a48-4b17-a087-a35cea701052)
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare QuickGrid di Blazor con Entity Framework
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Creare un'applicazione React e configurare Tailwind CSS
Utilizzare un numero per gestire la concorrenza ottimistica con SQL Server ed Entity Framework
Hosting di componenti WebAssembly in un'applicazione Blazor static
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Simulare Azure Cosmos DB in locale con Docker
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Code scanning e advanced security con Azure DevOps
Referenziare un @layer più alto in CSS
Aprire una finestra di dialogo per selezionare una directory in WPF e .NET 8
Le novità di Angular: i miglioramenti alla CLI