Applicazioni UWP: come gestire correttamente il tasto Back

Le applicazioni Universal Windows Platform sono organizzate attraverso pagine (classe Page), esattamente come accadeva nelle precedenti versioni di Windows 8 ed 8.1. Questo significa che l’app parte mostrando una pagina iniziale, poi l’utente naviga e si sposta secondo un flusso che dipende dall’app stessa. L’utente può ovviamente anche tornare indietro fra le pagine, con diverse modalità dipendentemente dal software e dall’hardware che ha a disposizione. Ad esempio:

• su uno smartphone l’utente può utilizzare il tasto hardware fisico Back, oppure può toccare il tasto software previsto da Windows (come ad esempio su un Lumia 640 LTE)
• su un tablet o su un PC Windows 10 il tasto hardware Back non esiste, per cui l’utente può solamente cliccare/toccare il tasto Back software previsto dal sistema operativo. Questo tasto si può trovare in due punti distinti: se la modalità Tablet è spenta, allora il pulsante si trova sulla barra del titolo relativo all’app stessa. Se la modalità Tablet è attiva, allora il pulsante si trova sulla taskbar di Windows
• Da notare che l’utente può posizionare la taskbar su uno dei quattro lati dello schermo, per cui il tasto Back fisicamente può ritrovarsi ai quattro angoli dello schermo:
  – taskbar inferiore : tasto Back nell’angolo in basso a sinistra
  – taskbar sul lato sinistro : tasto Back nell’angolo in alto a sinistra
  – taskbar superiore : tasto Back nell’angolo in alto a sinistra
  – taskbar sul lato destro : tasto Back nell’angolo in alto a destra
• L’app può ovviamente anche contenere un pulsante Back previsto dallo sviluppatore ed inserito all’interno della pagina: aspetto, posizionamento e comportamento dipendono ovviamente da chi scrive il codice ed implementa la pagina

Qualche screenshot è d’obbligo per chiarire meglio le cose.

Sopra : Pulsante Back sulla barra del titolo in un’app UWP con modalità Tablet spenta.

Sopra : Pulsante Back sulla taskbar di Windows agganciata al lato sinistro dello schermo, con modalità Tablet attiva.

Sopra : Pulsante Back sulla taskbar di Windows agganciata al lato inferiore dello schermo, con modalità Tablet attiva.

Rendere visibile o invisibile il tasto Back 
Vediamo adesso qualche riga di codice C# per gestire tutti questi scenari.

Innanzitutto, occorre controllare la visibilità del pulsante Back, che di default è e rimane nascosto. Con Windows 10 questo pulsante non fa parte della nostra UI, non è un contenuto inserito nelle nostre pagine tramite XAML, per cui se vogliamo controllarlo dobbiamo passare da classi che consentono l’accesso a questo componente messo a disposizione dal sistema operativo. Ad esempio, se vogliamo rendere visibile il pulsante Back ogni volta che si naviga verso una nuova pagina il codice necessario è il seguente:

SystemNavigationManager.GetForCurrentView()
    .AppViewBackButtonVisibility =
    ((Frame)sender).CanGoBack ?
    AppViewBackButtonVisibility.Visible :
    AppViewBackButtonVisibility.Collapsed;

Dove posizionare questo blocco di codice? Ecco il codice completo che suggerisco:

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;

    if (rootFrame == null)
    {
        rootFrame = new Frame();
        rootFrame.NavigationFailed += OnNavigationFailed;
        rootFrame.Navigated += RootFrame_Navigated;
        Window.Current.Content = rootFrame;
    }

    if (rootFrame.Content == null)
    {
        rootFrame.Navigate(typeof(MainPage), e.Arguments);
    }

    Window.Current.Activate();
}

private void RootFrame_Navigated(object sender,
    NavigationEventArgs e)
{
    SystemNavigationManager.GetForCurrentView()
        .AppViewBackButtonVisibility =
        ((Frame)sender).CanGoBack ?
        AppViewBackButtonVisibility.Visible :
        AppViewBackButtonVisibility.Collapsed;
}

Intercettare la pressione del tasto Back e spostarsi alla pagina precedente

Capire quando l’utente clicca o tocca il pulsante Back e reagire di conseguenza è semplice:

public SecondPage()
{
    this.InitializeComponent();

    SystemNavigationManager.GetForCurrentView()
        .BackRequested += SecondPage_BackRequested;
}

private void SecondPage_BackRequested(object sender,
    BackRequestedEventArgs e)
{
    if (this.Frame.CanGoBack)
    {
        this.Frame.GoBack();
    }

    e.Handled = true;
}

public AboutViewModel()
{
    SystemNavigationManager.GetForCurrentView()
    .BackRequested += (s, e) =>
    {
        e.Handled = true;
        base.GoBack();
    };
}

protected void GoBack()
{
    Frame rootFrame =
        Windows.UI.Xaml.Window.Current.Content as Frame;

    if (rootFrame.CanGoBack)
    {
        rootFrame.GoBack();
    }
}

Send to Kindle