Barre del titolo, barre degli strumenti e barre dell'app

Applies to Windows and Windows Phone

Ecco come passare dall'uso dei controlli UIToolbar di iOS a quello dei controlli Appbar di Windows 8.

Nel video seguente vengono confrontate le barre degli strumenti in iOS e le barre delle app di Windows Store.

Come già saprai, la maggior parte delle app di iOS usa una barra degli strumenti, ossia una barra visualizzata nella parte inferiore dello schermo che ospita pulsanti di navigazione e azioni sensibili al contesto.

Le app di Windows Store usano un controllo chiamato Appbar che puoi collocare nella parte superiore della pagina, in quella inferiore o in entrambe. Le barre dell'app sono nascoste per impostazione predefinita e possono essere visualizzate con semplici azioni dell'utente, ad esempio con uno scorrimento rapido del dito dal bordo superiore o inferiore della pagina, facendo clic con il pulsante destro del mouse o premendo il tasto Windows e Z. Possono inoltre essere visualizzate a livello di programmazione quando l'utente interagisce con l'app.

In questa sezione confronteremo la barra dell'app di Windows 8 con la barra degli strumenti di iOS e mostreremo un esempio di uso di una barra degli strumenti sia nelle app di iOS che in quelle di Windows Store. Esamineremo quindi i passaggi necessari per implementare le barre degli strumenti in entrambe le piattaforme e forniremo indicazioni dettagliate su come implementare una barra dell'app nell'app di Windows Store.

Panoramica della barra degli strumenti di iOS

In iOS la barra degli strumenti è in genere contenuta in un controller di navigazione che gestisce la gerarchia di apertura delle visualizzazioni. Le barre degli strumenti possono essere usate in molti modi, ad esempio per:

  • Fornire una serie di azioni nel contesto corrente.
  • Fornire comandi usati di frequente e appropriati nel contesto corrente.
  • Abilitare diverse modalità dell'app mediante controlli segmentati o schede.
  • Fornire accesso a diversi aspetti dei dati dell'app.

Barre degli strumenti nelle app di Windows Store

La libreria di controlli di Windows 8 include il controllo barra dell'app. Ecco un esempio di barra dell'app in un'app di Windows Store.

In questo esempio mostriamo una barra dell'app divisa tra la parte superiore e quella inferiore della pagina. La parte superiore della barra dell'app contiene il pulsante di navigazione, mentre quella inferiore mostra varie azioni disponibili per l'utente.

Le azioni della barra dell'app possono essere sensibili al contesto, come illustrato di seguito. In questo esempio la barra dell'app viene visualizzata automaticamente quando l'utente seleziona un elemento e scompare quando si apre una finestra di dialogo in risposta.

Confronto delle barre degli strumenti nelle app di iOS e in quelle di Windows Store

Se hai usato UIToolbar per implementare una barra degli strumenti in iOS, scoprirai che una funzionalità simile è fornita dal controllo barra dell'app nelle app di Windows Store. Ecco il processo a confronto tra le due piattaforme:

PassaggiiOSWindows 8
Creare la barra degli strumenti e aggiungere i controlli necessariUsa il controllo UIToolbar. Aggiungi i controlli UIToolbarButtonItem alla barra degli strumenti per i comandi.Usa il controllo barra dell'app e aggiungi vari controlli, come pulsanti, caselle di controllo, pulsanti di opzione. Per altre informazioni, vedi Progettazione dei comandi per app di Windows Store, Guida introduttiva: Aggiunta di barre dell'app e Guida introduttiva: Aggiunta di controlli e gestione di eventi
(Facoltativo) Definire l'aspetto della barra degli strumentiUsa i metodi setBackgroundImage, shadowImageForToolbarPosition, imposta le proprietà barStyle, tintColor e translucent oppure usa UIAppearance.Imposta gli stili del pannello di layout usato nella barra dell'app. È possibile usare varie proprietà di applicazione dello stile, ad esempio BackGround, per impostare l'aspetto. Vedi Guida introduttiva: Definizione dei layout.
Facoltativo: Definire l'aspetto dei controlli usati nella barra degli strumenti.Usa metodi personalizzati per icone e titoli, ad esempio initWithTitle:image:tag: o initWithTitle:style:target:action:È possibile usare varie proprietà, ad esempio Foreground, Border e Font per personalizzare l'aspetto. Vedi Guida introduttiva: Applicazione di stili ai controlli e Guida introduttiva: Applicazione di stili ai pulsanti della barra dell'app
Gestire gli eventi della barra degli strumentiImposta l'azione e le proprietà di destinazione del pulsante UIBarButtonItem. Implementa il metodo corrispondente a selector della proprietà action nel controller appropriato. Implementa un gestore eventi con firma void method(object sender, RoutedEventArgs e) nel file code-behind e imposta il metodo come proprietà Click di ogni controllo. Per la gestione degli eventi dei controlli, vedi Guida introduttiva: Aggiunta di controlli e gestione di eventi

 

Esempio di app

Ecco un esempio in ci viene illustrata la compilazione di un'app di Windows Store con la barra dell'app.

Nota  Windows 8.1 aggiorna le modalità di definizione delle barre delle app. Vedi il post del blog sulle novità di AppBar in Windows 8.1 per ulteriori informazioni.

1. Crea l'app. In questo esempio creeremo l'app usando il modello di app vuota in C#.

  • Apri Microsoft Visual Studio e crea un nuovo progetto scegliendo Visual Studio C# > Applicazione Windows > Applicazione vuota (XAML).
  • Apri MainPage.xaml da Esplora soluzioni. Fai clic sul pulsante di menu combinato orizzontale per aprire la visualizzazione XAML, se non è già visibile.
  • Nel file MainPage.xaml aggiungi questo codice XAML tra il tag di apertura <Grid ..> e il tag di chiusura </Grid> :
    
    // Windows 8
    <Grid.RowDefinitions>
            <RowDefinition Height="70"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Appbar Sample" Style="{StaticResource PageHeaderTextStyle}"  Grid.Row="0" Margin="20,0,0,10"/>
    
    // Windows 8.1
    <Grid.RowDefinitions>
            <RowDefinition Height="70"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Appbar Sample" Style="{StaticResource HeaderTextBlockStyle}"  Grid.Row="0" Margin="20,0,0,10"/>
    
    
    

Aggiungi un controllo barra dell'app alla pagina e i controlli pulsanti alla barra dell'app.

  • Apri il file MainPage.xaml da Esplora soluzioni.
  • Immediatamente prima del tag di chiusura </page>, aggiungi il codice seguente:
    
    // Windows 8 
    <Page.BottomAppBar>
            <AppBar x:Name="bottomAppBar" Padding="10,0,10,0" Background="Gray">
                <Grid>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                        <Button Style="{StaticResource EditAppBarButtonStyle}" />
                        <Button Style="{StaticResource RemoveAppBarButtonStyle}" />
                        <Button Style="{StaticResource AddAppBarButtonStyle}" />
                    </StackPanel>
                </Grid>
            </AppBar>
        </Page.BottomAppBar>
    
    // Windows 8.1 
     <Page.BottomAppBar>
            <CommandBar>
                <CommandBar.PrimaryCommands>
                    <AppBarButton Icon="Edit" Label="Edit"/>
                    <AppBarButton Icon="Remove" Label="Remove"/>
                    <AppBarButton Icon="Add" Label="Add" />
                </CommandBar.PrimaryCommands>
            </CommandBar>
        </Page.BottomAppBar>
    
    
    
  • Se sviluppi per Windows 8, dovrai aprire Comuni > StandardStyles.xaml. Cerca "EditAppBarButtonStyle", "RemoveAppBarButtonStyle" o "AddAppBarButtonStyle" e rimuovi il commento dalla sezione in cui sono definiti. Rimuovi i tag <!-- e --> che racchiudono la sezione in cui sono definiti. Questo passaggio non è necessario per le app per Windows 8.1.
  • Fai clic su Debug > Avvia debug o premi F5 per eseguire l'applicazione. Fai scorrere rapidamente un dito dal bordo superiore dello schermo o premi il tasto Windows e Z per aprire la barra dell'app.

Gestisci gli eventi dei pulsanti della barra dell'app.

  • Interrompi il debug facendo clic su Debug > Termina debug oppure premendo MAIUSC+F5.
  • Nel file MainPage.xaml aggiorna
    
    //Windows 8
    <Button Style="{StaticResource EditAppBarButtonStyle}" />
    // Windows 8.1
    <AppBarButton Icon="Edit" Label="Edit"/>
    
    
    con il codice XAML seguente
    
    //Windows 8
    <Button Style="{StaticResource EditAppBarButtonStyle}" Click="EditButton_Click" />
    // Windows 8.1
    <AppBarButton Icon="Edit" Label="Edit" Click="EditButton_Click" />
    
    
    Questo codice specifica che verrà chiamato il gestore dell'evento EditButton_Click quando l'utente fa clic sul pulsante Modifica sulla barra dell'app.
  • Aggiungi il codice seguente all'inizio del file MainPage.xaml:
    
    using Windows.UI.Popups;
    
    
  • Aggiungi il codice seguente tra le parentesi quadre di apertura e chiusura nella classe parziale MainPage:
    
    private async void EditButton_Click(object sender, RoutedEventArgs e)
    {
        MessageDialog dlg = new MessageDialog("Edit clicked");
        await dlg.ShowAsync();
    }
    
    
    
  • Premi F5 per eseguire di nuovo l'app. Fai scorrere rapidamente un dito dal bordo superiore dello schermo per visualizzare la barra dell'app. Se fai clic sul pulsante Modifica, verrà visualizzato un oggetto MessageDialog.

Argomenti correlati

Argomenti per sviluppatori iOS
Risorse per sviluppatori iOS
Controlli di Windows 8 per sviluppatori iOS
Guida dettagliata di Windows 8 per sviluppatori iOS
Novità di AppBar in Windows 8.1
Argomenti relativi alla barra dell'app
Guida introduttiva: Aggiunta di barre dell'app
Guida introduttiva: Applicazione di stili ai pulsanti della barra dell'app
Guida introduttiva: Aggiunta di controlli e gestione di eventi

 

 

Mostra:
© 2014 Microsoft