Titelleisten, Symbolleisten und App-Leisten
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

Titelleisten, Symbolleisten und App-Leisten

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Hier erfahren Sie, wie Sie von der Verwendung des iOS-UIToolbar-Steuerelements zur Verwendung des Windows 8-Steuerelements Appbar migrieren.

Im folgenden Video werden Symbolleisten in iOS-Apps und App-Leisten in Windows Store-Apps verglichen.

Wie Sie wissen, wird in den meisten iOS-Apps eine Symbolleiste verwendet. Hierbei handelt es sich um eine Leiste, die am oberen oder unteren am Bildschirmrand angezeigt wird und kontextsensitive Navigationsschaltflächen und Aktionen enthält.

Windows Store-Apps nutzen das sogenannte Appbar-Steuerelement, das ebenfalls oben oder unten, aber auch oben und unten angezeigt werden kann. App-Leisten sind standardmäßig ausgeblendet. Sie werden eingeblendet, sobald ein Benutzer eine Aktion ausführt, wie z. B. vom oberen oder unteren Bildschirmrand streifen, ein Rechtsklick mit der Maus oder Drücken der Windows- und der Z-Taste. Sie können auch programmgesteuert angezeigt werden, wenn der Benutzer mit der App interagiert.

In diesem Thema vergleichen wird die Windows 8-App-Leiste mit der iOS-Symbolleiste und zeigen anhand eines Beispiels, wie Symbolleisten in iOS- und Windows Store-Apps verwendet werden. Anschließend erläutern wir die Schritte, die für eine Implementierung der Symbolleisten auf beiden Plattformen erforderlich sind, und stellen eine ausführliche Anleitung zum Implementieren einer App-Leiste in einer Windows Store-App bereit.

Übersicht über die iOS-Symbolleiste

iOS-Symbolleisten sind üblicherweise in einem Navigationscontroller enthalten, der die Anzeigehierarchie von Ansichten verwaltet. Symbolleisten erfüllen zahlreiche Funktionen, darunter:

  • Bereitstellung von Aktionen im jeweiligen Kontext
  • Bereitstellung häufig verwendeter Befehle entsprechend des jeweiligen Kontexts
  • Aktivierung verschiedener App-Modi durch Verwendung segmentierter Steuerelemente oder Registerkarten
  • Bereitstellung des Zugriffs auf verschiedene Aspekte der Anwendungsdaten

Symbolleisten in Windows Store-Apps

Das App-Leistensteuerelement ist in der Bibliothek für Windows 8-Steuerelemente enthalten. Die folgende Abbildung zeigt eine App-Leiste in einer Windows Store-App.

In diesem Beispiel sehen Sie eine App-Leiste, die am oberen und unteren Seitenrand geteilt angezeigt wird. Der obere Teil der App-Leiste enthält die Navigationsschaltflächen, der untere Teil der App-Leiste enthält verschiedene für den Benutzer verfügbare Aktionen.

Die Aktionen auf einer App-Leiste können, wie in folgendem Beispiel gezeigt, kontextsensitiv sein. In diesem Beispiel wird die App-Leiste automatisch eingeblendet, wenn ein Element ausgewählt wird, und wieder ausgeblendet, wenn durch die Aktion ein Dialogfeld angezeigt wird.

Vergleich der Symbolleisten in iOS und Windows Store-Apps

Wenn Sie das UIToolbar-Steuerelement bereits zum Implementieren einer Symbolleiste in iOS verwendet haben, wird Ihnen die Funktionalität der App-Leiste in Windows Store-Apps bekannt vorkommen. Im Folgenden werden die Unterschiede zwischen den Plattformen erläutert:

SchritteiOSWindows 8
Erstellen der Symbolleiste und erforderlicher SteuerelementeVerwenden Sie das Steuerelement UIToolbar. Fügen Sie UIToolbarButtonItem-Steuerelemente zur Symbolleiste hinzu, um Befehle bereitzustellen.Verwenden Sie das App-Leistensteuerelement und fügen Sie der App-Leiste verschiedene Steuerelemente hinzu, z. B. eine Schaltfläche, ein Kontrollkästchen oder ein Optionsfeld. Weitere Informationen finden Sie unter Schnellstart: Hinzufügen von App-Leisten und Schnellstart: Hinzufügen von Steuerelementen und Behandeln von Ereignissen
Optional: Legen Sie das Erscheinungsbild der App-Leiste fest.Verwenden Sie die Methoden setBackgroundImage und shadowImageForToolbarPosition, legen Sie die Eigenschaften barStyle, tintColor und translucent fest oder verwenden Sie UIAppearance.Legen Sie die Stile der Layoutpanel fest, die in der App-Leiste verwendet werden sollen. Verwenden Sie die verschiedenen Formateigenschaften, z. B. Hintergrund, um das Erscheinungsbild zu definieren. Siehe Schnellstart: Definieren von Layouts.
Optional: Legen Sie das Erscheinungsbild der Steuerelemente für die App-Leiste fest.Verwenden Sie benutzerdefinierte Symbole und Titel mithilfe von Methoden, z. B. initWithTitle:image:tag: oder initWithTitle:style:target:action:.Um das Erscheinungsbild anzupassen, legen Sie verschiedene Eigenschaften fest, z. B. Vordergrund, Rahmen und Schrift. Siehe Schnellstart: Formatieren von Steuerelementen und Schnellstart: Formatieren von Schaltflächen auf der App-Leiste.
Behandeln von Ereignissen der SymbolleisteLegen Sie die Aktion und die Zieleigenschaften der Schaltfläche UIBarButtonItem fest. Implementieren Sie die Methode, die der Auswahl in der Eigenschaft der Aktion entspricht, im entsprechenden Controller. Implementieren Sie einen Ereignishandler mit einer void method(object sender, RoutedEventArgs e)-Signatur in der CodeBehind-Datei, und legen Sie die Methode als click-Eigenschaft für jedes Steuerelement fest. Weitere Informationen zum Behandeln von Steuerelement-Ereignissen finden Sie unter Schnellstart: Hinzufügen von Steuerelementen und Behandeln von Ereignissen.

 

Beispiel-App

In diesem Beispiel wird das Erstellen einer Windows Store-App mit einer App-Leiste beschrieben.

Hinweis  Unter Windows 8.1 ändert sich die Vorgehensweise zum Definieren von App-Leisten. Ausführlichere Informationen hierzu finden Sie im Blogbeitrag Neues zur App-Leiste unter Windows 8.1.
 

1. Erstellen Sie die App. In diesem Beispiel erstellen wir die App mit der Vorlage "C# Leere App".

  • Öffnen Sie Microsoft Visual Studio, und klicken zum Erstellen eines neuen Projekts auf Visual Studio C# > Windows-App > Blank App (XAML).
  • Öffnen Sie die Datei MainPage.xaml im Projektmappen-Explorer. Klicken Sie ggf. auf die Schaltfläche für die horizontale Aufteilung, um die XAML-Ansicht zu öffnen.
  • Fügen Sie in der Datei MainPage.xaml zwischen dem Starttag <Grid ..> und dem Endtag </Grid> folgenden XAML-Code hinzu:
    
    // 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"/>
    
    
    

Fügen Sie der Seite ein App-Leistensteuerelement hinzu und der App-Leiste die Schaltflächen-Steuerelemente.

  • Öffnen Sie die Datei MainPage.xaml im Projektmappen-Explorer.
  • Fügen Sie direkt vor dem Endtag "</page>" folgenden Code hinzu:
    
    // 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>
    
    
    
  • Falls Sie für Windows 8 entwickeln, müssen Sie Allgemein > StandardStyles.xaml öffnen. Suchen Sie nach EditAppBarButtonStyle, RemoveAppBarButtonStyle oder AddAppBarButtonStyle, und heben Sie die Kommentierung des Abschnitts auf, in dem die Einträge definiert sind. Entfernen Sie die Markierung <!-- und --> vor bzw. nach dem Abschnitt, in dem die Einträge definiert sind. Bei Windows 8.1-Apps ist dieser Schritt nicht erforderlich.
  • Klicken Sie auf Debuggen > Debugging starten oder F5, um die Anwendung auszuführen. Führen Sie eine Streifbewegung vom oberen Rand des Bildschirms aus bzw. drücken Sie die Windows- und die Z-Taste, um die App-Leiste einzublenden.

Behandeln Sie die Ereignisse der Schaltflächen in der App-Leiste.

  • Klicken Sie zum Anhalten des Debuggers auf Debuggen > Debugging anhalten (oder drücken Sie UMSCHALT+F5).
  • Aktualisieren Sie
    
    //Windows 8
    <Button Style="{StaticResource EditAppBarButtonStyle}" />
    // Windows 8.1
    <AppBarButton Icon="Edit" Label="Edit"/>
    
    
    in der Datei MainPage.xaml, indem Sie folgenden XAML-Code hinzufügen
    
    //Windows 8
    <Button Style="{StaticResource EditAppBarButtonStyle}" Click="EditButton_Click" />
    // Windows 8.1
    <AppBarButton Icon="Edit" Label="Edit" Click="EditButton_Click" />
    
    
    Hiermit wird festgelegt, dass der EditButton_Click-Ereignishandler aufgerufen wird, wenn ein Benutzer auf die Bearbeiten-Schaltfläche in der App-Leiste klickt.
  • Fügen Sie am Anfang der Datei MainPage.xaml folgenden Code hinzu:
    
    using Windows.UI.Popups;
    
    
  • Fügen Sie zwischen der öffnenden und schließenden Klammer der partiellen MainPage-Klasse folgenden Code hinzu:
    
    private async void EditButton_Click(object sender, RoutedEventArgs e)
    {
        MessageDialog dlg = new MessageDialog("Edit clicked");
        await dlg.ShowAsync();
    }
    
    
    
  • Drücken Sie F5, um die Anwendung erneut auszuführen. Führen Sie eine Streifbewegung vom oberen Rand des Bildschirms aus, um die App-Leiste einzublenden. Klicken Sie auf die Bearbeiten-Schaltfläche, um ein Meldungsdialog einzublenden.

Verwandte Themen

Themen für iOS-Entwickler
Ressourcen für iOS-Entwickler
Windows 8-Steuerelemente für iOS-Entwickler
Windows 8-Cookbook für iOS-Entwickler
Neues zur App-Leiste unter Windows 8.1
Themen zur App-Leiste
Schnellstart: Hinzufügen von App-Leisten
Schnellstart: Formatieren von Schaltflächen auf der App-Leiste
Schnellstart: Hinzufügen von Steuerelementen und Behandeln von Ereignissen

 

 

Anzeigen:
© 2016 Microsoft