So wird’s gemacht: Freigeben einer App-Leiste für mehrere Seiten (XAML)

Applies to Windows and Windows Phone

Für jede Page in einer Windows Store-App mit C++, C# oder Visual Basic kann den TopAppBar- und BottomAppBar-Eigenschaften eine AppBar zugewiesen werden. Sie können jedoch auch auf allen verwandten Seiten in Ihrer App die gleiche AppBar verwenden, um einheitliche Navigationsfunktionen und Befehle bereitzustellen. Vielleicht möchten Sie beispielsweise im oberen Bereich Ihrer App eine Navigationsleiste anzeigen, mit deren Hilfe der Benutzer zwischen Seiten navigieren kann. In diesem Fall möchten Sie auf allen Seiten dieselbe Navigationsleiste anzeigen und nicht auf jeder Seite erneut eine Navigationsleiste erstellen. Im Folgenden erfahren Sie, wie Sie eine AppBar für mehrere Seiten freigeben können.

Dieses Lernprogramm basiert auf dem Thema Flache Navigation von A bis Z und dem zugehörigen Beispiel für flache Navigation. Den vollständigen Code finden Sie unter Beispiel für flache Navigation.

Roadmap: Wie hängt dieses Thema mit anderen zusammen? Informationen finden Sie unter:

Wissenswertes

Technologien

Voraussetzungen

Anweisungen

Hinzufügen einer freigegebenen App-Leiste zu einer Seite

Verwenden Sie eine Stammseite zum Hosten der freigegebenen AppBar sowie einen Frame. Der Frame hostet die Page-Steuerelemente, die den App-Inhalt anzeigen.

Im folgenden Beispiel weisen Sie der TopAppBar-Eigenschaft der Stammseite ein AppBar-Steuerelement mit Navigationsbefehlen zu. Sie fügen einen Frame zum Hosten der App-Seiten hinzu, zu denen der Benutzer navigiert.

JJ150604.wedge(de-de,WIN.10).gifSo fügen Sie der Stammseite die App-Leiste und den Frame hinzu

  1. Fügen Sie eine Seite hinzu, um die AppBar und den Frame für die Navigation zu hosten. Hier verwenden Sie die standardmäßige Datei MainPage.xaml.

    Informationen dazu finden Sie unter MainPage.xaml im vollständigen Code am Ende dieses Lernprogramms.

  2. Fügen Sie der TopAppBar-Eigenschaft der Page eine AppBar mit Navigationsbefehlen hinzu.
    
    <Page.TopAppBar>
        <AppBar x:Name="topAppBar" Background="#00b2f0">
            <AppBar.Resources>
                <Style TargetType="Button">
                    <Setter Property="Width" Value="140"/>
                    <Setter Property="Height" Value="60"/>
                    <Setter Property="Margin" Value="5"/>
                </Style>
            </AppBar.Resources>
            <StackPanel Orientation="Horizontal">
                <Button Content="Home" x:Uid="appbarHome" 
                        Click="NavButton_Click" Tag="FlatNavTemplate.Pages.HomePage"/>
                <Button Content="Page 2" x:Uid="appbarPage2" 
                        Click="NavButton_Click" Tag="FlatNavTemplate.Pages.Page2"/>
                <!-- Add more buttons here as needed for new pages. -->
                <!-- Assign the fully qualified page name to the button's Tag property. -->
    
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>
    
    
    
  3. Fügen Sie in der Codeseite (MainPage.xaml.cs/vb) Code für die Navigation zwischen Seiten hinzu.

    Hier geben Sie mit der Tag-Eigenschaft jeder Navigationsschaltfläche den Namen der Seite an, zu der navigiert werden soll.

    
    private void NavButton_Click(object sender, RoutedEventArgs e)
    {
        Button b = sender as Button;
                
        if (b != null && b.Tag != null)
        {
            Type pageType = Type.GetType(b.Tag.ToString());
    
            // Make sure the page type exists, but don't navigate to it if it's already the current page.
            if (pageType != null && rootFrame.CurrentSourcePageType != pageType)
            {
                (App.Current as App).Navigate(pageType);
            }
        }   
    }
    
    
  4. Fügen Sie der BottomAppBar-Eigenschaft der Page eine CommandBarhinzu.

    In diesem Fall wird die Schaltfläche Help auf der CommandBar für alle Seiten freigegeben. Sie können Befehle für eine bestimmte Seite hinzufügen, wenn der Benutzer zu dieser Seite navigiert, und sie anschließend wieder entfernen. Weitere Informationen finden Sie unter So wird's gemacht: Hinzufügen von Kontextbefehlen zu einer App-Leiste.

    Den Click-Ereignishandler für die Schaltfläche Help können Sie im vollständigen Code am Ende dieses Lernprogramms sehen. Weitere Informationen finden Sie unter Schnellstart: Hinzufügen einer App-Hilfe.

    Windows 8.1:  CommandBar- und AppBarButton-Steuerelemente sind nur in Windows 8.1 verfügbar. Verwenden Sie für Windows 8 AppBar und Button.

    
    <Page.BottomAppBar>
        <CommandBar x:Name="bottomAppBar" Background="#00b2f0">
            <AppBarButton Icon="Help" Label="Help" Click="HelpButton_Click"/>
        </CommandBar>
    </Page.BottomAppBar>
    
    
    
  5. Fügen Sie einen Frame in der Stammseite hinzu, um die App-Seiten zu hosten.
    
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Frame x:Name="rootFrame"/>
    </Grid>
    
    
    
  6. Fügen Sie App-Seiten hinzu, zwischen denen der Benutzer navigieren kann.

    Informationen dazu finden Sie unter HomePage.xaml und Page2.xaml im vollständigen Code am Ende dieses Lernprogramms.

Anmerkungen

Laden Sie das Beispiel für flache Navigation herunter, um diesen Code in Aktion zu sehen.

Vollständiges Beispiel

MainPage


<Page
    x:Class="FlatNavTemplate.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlatNavTemplate"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.TopAppBar>
        <AppBar x:Name="topAppBar" Background="#00b2f0">
            <AppBar.Resources>
                <Style TargetType="Button">
                    <Setter Property="Width" Value="140"/>
                    <Setter Property="Height" Value="60"/>
                    <Setter Property="Margin" Value="5"/>
                </Style>
            </AppBar.Resources>
             <!--The StacklPanel doesn't resize nicely if the window gets narrow, so this way can be problamatic if there are too many pages.-->
            <StackPanel Orientation="Horizontal">
                <Button x:Uid="appbarHome" Click="NavButton_Click" Tag="FlatNavTemplate.Pages.HomePage"/>
                <Button x:Uid="appbarPage2" Click="NavButton_Click" Tag="FlatNavTemplate.Pages.Page2"/>
                <!-- Add more buttons here as needed for new pages. -->
                <!-- Assign the fully qualified page name to the button's Tag property. -->
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>

    <Page.BottomAppBar>
        <CommandBar x:Name="bottomAppBar" Background="#00b2f0">
            <AppBarButton Icon="Help" Label="Help" Click="HelpButton_Click"/>
        </CommandBar>
    </Page.BottomAppBar>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Frame x:Name="rootFrame"/>
    </Grid>
</Page>


using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace FlatNavTemplate
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void NavButton_Click(object sender, RoutedEventArgs e)
        {
            Button b = sender as Button;
            
            if (b != null && b.Tag != null)
            {
                Type pageType = Type.GetType(b.Tag.ToString());

                // Make sure the page type exists, but don't navigate to it if it's already the current page.
                if (pageType != null && rootFrame.CurrentSourcePageType != pageType)
                {
                    (App.Current as App).Navigate(pageType);
                }
            }   
        }

        private void HelpButton_Click(object sender, RoutedEventArgs e)
        {
            Settings.HelpSettings helpSettingsFlyout = new Settings.HelpSettings();
            // When the settings flyout is opened from the app bar instead of from
            // the setting charm, use the ShowIndependent() method.
            helpSettingsFlyout.ShowIndependent();
            topAppBar.IsOpen = false;
            bottomAppBar.IsOpen = false;
        }
    }
}


HomePage


<Page
    x:Name="pageRoot"
    x:Class="FlatNavTemplate.Pages.HomePage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlatNavTemplate.Pages"
    xmlns:common="using:FlatNavTemplate.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image x:Name="logoimage" HorizontalAlignment="Center" Height="100" 
                   VerticalAlignment="Center" Width="100" 
                   Source="ms-appx:///Assets/square70logo.png" IsHitTestVisible="False"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" 
                       Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                       IsHitTestVisible="false" TextWrapping="NoWrap" 
                       VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>
    </Grid>
</Page>

Page2


<Page
    x:Name="pageRoot"
    x:Class="FlatNavTemplate.Pages.Page2"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlatNavTemplate.Pages"
    xmlns:common="using:FlatNavTemplate.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application Page 2</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image x:Name="logoimage" HorizontalAlignment="Center" Height="100" 
                   VerticalAlignment="Center" Width="100" 
                   Source="ms-appx:///Assets/square70logo.png" IsHitTestVisible="False"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" 
                       Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                       IsHitTestVisible="false" TextWrapping="NoWrap" 
                       VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>
    </Grid>
</Page>

Verwandte Themen

Beispiel für flache Navigation
Beispiel für XAML-App-Leisten-Steuerelement
Schnellstart: Hinzufügen von App-Leisten
Schnellstart: Navigation zwischen Seiten
Flache Navigation von A bis Z (XAML)
Navigationsdesign für Windows Store-Apps
Befehlsdesign für Windows Store-Apps

 

 

Anzeigen:
© 2014 Microsoft