Quando un'applicazione viene aggiornata oppure installata per la prima volta, può aver senso mostrare all'utente un tutorial che ne spieghi in dettaglio l'utilizzo, almeno per le sue componenti principali. Il tutorial è spesso un componente statico, creato tramite immagini costruite ad-hoc per riempire tutto lo schermo e creare scenari finti, al puro scopo illustrativo. Gli scenari vengono poi cambiati facendo solitamente uno swipe verso destra o verso sinistra.
Volendo creare qualcosa di più complesso e reale, possiamo fare uso di XAML per creare le viste applicative e poi, in particolare, di un nuovo componente chiamato TeachingTip che permette di mettere in evidenza dettagli dell'applicazione per insegnare, appunto, il funzionamento di un pulsante o di una vista. L'aggiunta dell'oggetto può essere fatta direttamente tramite le Resources del componente a cui lo vogliamo assegnare (ad esempio un Button):
<Button Content="Save" x:Name="SaveButton"> <Button.Resources> <controls:TeachingTip x:Name="TeachingTip" Target="{x:Bind SaveButton}" Title="Save automatically" Subtitle="When you save your file to OneDrive, we save your changes as you go - so you never have to."> </controls:TeachingTip> </Button.Resources> </Button>
In questo caso il controllo è nascosto by default e dovrà essere attivato esplicitamente quando ne abbiamo bisogno, tramite l'impostazione della proprità IsOpen a true.
Il controllo inoltre non deve essere necessariamente piazzato associato ad un altro elemento dello XAML, ma anzi, può anche essere mostrato da solo, in una porzione dedicata della pagina:
<controls:TeachingTip x:Name="TeachingTip" Title="Saving automatically" Subtitle="We save your changes as you go - so you never have to." PreferredPlacement="BottomLeft" IsLightDismissEnabled="True"> </controls:TeachingTip>
In questo caso particolare non solo il controllo è stato piazzato in basso a destra, ma è anche stato impostato il light dismiss, ovvero la possibilità di fare la chiusura automatica del controllo qualora l'utente inizi a cliccare su altri elementi all'interno della pagina, facendogli perdere il focus.
A livello di XAML, questo controllo è come tutti gli altri che abbiamo a disposizione e ci permette, quindi, alta personalizzazione per aggiungere altri pulsanti o elementi all'interno per renderlo specifico per la nostra applicazione, come mostra l'immagine seguente:
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Configurare lo startup di applicazioni server e client con .NET Aspire
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Generare la software bill of material (SBOM) in GitHub
Creare gruppi di client per Event Grid MQTT
Miglioramenti nelle performance di Angular 16
Criptare la comunicazione con mTLS in Azure Container Apps
Routing statico e PreRendering in una Blazor Web App
Creare una libreria CSS universale: Cards
Migrare una service connection a workload identity federation in Azure DevOps
Migliorare i tempi di risposta di GPT tramite lo streaming endpoint in ASP.NET Core
Utilizzare un service principal per accedere a Azure Container Registry
Creare una libreria CSS universale: i bottoni
I più letti di oggi
- Build 2015: segui con noi tutte le novità per gli sviluppatori in diretta da San Francisco
- Speciale Windows Live Services: come integrarli nelle proprie applicazioni
- Rilasciata la RTM di SQL Server 2012, la versione Express subito in download
- Build 2014: tutte le novità per gli sviluppatori in diretta da San Francisco
- .NET Managed provider per MySQL
- WS-I approva Basic Profile 1.0
- Due regali dal Tech-Ed USA 2004: WSE 2.0 e VS 2005 Team System
- VS 2005 e SQL Server 2005 Express da scaricare
- Microsoft aggiorna WinFS beta 1 per VS 2005
- Utilizzare CLEditor per consentire l'input di HTML in ASP.NET MVC