Windows Dev Center

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

Jede Page-Klasse in einer Windows-Runtime-App kann ein AppBar-Steuerelement enthalten, das deren TopAppBar-Eigenschaft und BottomAppBar-Eigenschaft zugewiesen ist. Sie können jedoch auch auf allen verwandten Seiten in Ihrer App dasselbe AppBar-Steuerelement verwenden, um einheitliche Navigationsfunktionen oder 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.

Hier zeigen wir einige Möglichkeiten zur übergreifenden Verwendung von AppBar oder CommandBar für mehrere Seiten. 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

Erstellen Sie zum Hinzufügen einer allgemeinen App-Leiste zu mehreren Seiten eine neue Klasse, die von der Page-Klasse abgeleitet wird. In diesem Lernprogramm erstellen Sie eine Klasse namens NavigationPage. Diese erbt die TopAppBar- und BottomAppBar-Eigenschaften von der Page-Klasse. Sie können Navigationsbefehle der App-Leiste oben und weitere gemeinsam genutzte Befehle der App-Leiste unten hinzufügen. Dann ändern Sie die App-Seiten, sodass sie von NavigationPage anstatt von Page abgeleitet werden und jede Seite die definierten Befehle erbt.

JJ150604.wedge(de-de,WIN.10).gifHinzufügen einer freigegebenen App-Leiste

  1. Erstellen Sie eine neue Klasse, die von der Page-Klasse abgeleitet wird. In diesem Lernprogramm benennen wir die Klasse NavigationPage.

    Informationen dazu finden Sie unter NavigationPage.cs im vollständigen Code am Ende dieses Lernprogramms.

    
    public class NavigationPage : Page
    {
        public NavigationPage()
        {
    
        }
    }
    
    
    
  2. Weisen Sie der TopAppBar-Eigenschaft der NavigationPage-Klasse ein AppBar-Steuerelement mit Navigationsbefehlen zu. Der AppBar-Inhalt ist ein UserControl, das Sie im nächsten Schritt definieren.
    
    public class NavigationPage : Page
    {
        public NavigationPage()
        {
            Loaded += NavigationPage_Loaded;
        }
    
        void NavigationPage_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            // Navigation controls go in the top app bar.
            AppBar navBar = new AppBar();
            navBar.Background = new SolidColorBrush(new Color() { A=255, R = 0, G = 178, B = 240 }); 
            navBar.Content = new NavigationControl();
            this.TopAppBar = navBar;
        }
    }
    
    
    
  3. Da ein AppBar-Steuerelement beliebige Inhalte enthalten kann, fassen Sie alle Navigationsbefehle in einem UserControl zusammen und legen das UserControl als Inhalt der AppBar fest. Für dieses Lernprogramm benennen Sie das UserControl NavigationControl.
    
    <UserControl
        x:Class="FlatNavTemplate.NavigationControl"
        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"
        d:DesignHeight="300"
        d:DesignWidth="400">
        <UserControl.Resources>
            <Style TargetType="Button">
                <Setter Property="Width" Value="140"/>
                <Setter Property="Height" Value="60"/>
                <Setter Property="Margin" Value="5"/>
            </Style>
        </UserControl.Resources>
    
       <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>
    </UserControl>
    
    
  4. Fügen Sie in der Codeseite des UserControl (NavigationControl.xaml.cs) 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.

    
    public sealed partial class NavigationControl : UserControl
    {
        public NavigationControl()
        {
            this.InitializeComponent();
        }
    
        private void NavButton_Click(object sender, RoutedEventArgs e)
        {
            Button b = sender as Button;
            Frame rootFrame = Window.Current.Content as Frame;
    
            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);
                }
                else if (pageType == null)
                {
                    // TODO: Optional - Do something if page not found.
                }
            }
        }
    }
    
    

Hinzufügen einer freigegebenen CommandBar zu einer Seite

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

JJ150604.wedge(de-de,WIN.10).gifHinzufügen einer freigegebenen CommandBar

  • Hinzufügen einer CommandBar zur BottomAppBar-Eigenschaft der NavigationPage-Klasse.

    Da CommandBar nur AppBarButton-Steuerelemente enthalten kann, können Sie Ihre Befehle nicht in UserControl einfügen, wie dies für AppBar möglich war. Fügen Sie stattdessen die Befehle im Code hinzu. In diesem Lernprogramm fügen Sie CommandBar eine Hilfe-Schaltfläche hinzu, die für alle Seiten gemeinsam genutzt wird. Den Click-Ereignishandler für die Hilfe-Schaltfläche sehen Sie im vollständigen Code am Ende dieses Lernprogramms. Weitere Informationen finden Sie unter Schnellstart: Hinzufügen einer App-Hilfe.

    Tipp  

    Sie können Befehle für eine bestimmte Seite hinzufügen, wenn der Benutzer zu dieser Seite navigiert, und sie entfernen, wenn er zu einer anderen Seite navigiert. Weitere Informationen finden Sie unter So wird's gemacht: Hinzufügen von Kontextbefehlen zu einer App-Leiste.

    
    public class NavigationPage : Page
    {
        public NavigationPage()
        {
            Loaded += NavigationPage_Loaded;
        }
    
        void NavigationPage_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            // CommandBar for Help command goes in the BottomAppBar.
            CommandBar commandBar = new CommandBar();
            commandBar.Background = new SolidColorBrush(new Color() { A = 255, R = 0, G = 178, B = 240 });
                
            // Create the Help button.
            AppBarButton helpButton = new AppBarButton();
            helpButton.Icon = new SymbolIcon(Symbol.Help);
            helpButton.Label = "Help";
            helpButton.Click += helpButton_Click;
                
            // Add the Help button to the command bar.
            commandBar.PrimaryCommands.Add(helpButton);
            this.BottomAppBar = commandBar;
        }
    }
    
    
    

Hinzufügen von Seiten zu Ihrer App

  1. 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.

  2. Ändern Sie die App-Seiten, sodass sie von NavigationPage anstatt von Page abgeleitet werden. Jede von NavigationPage abgeleitete Seite verfügt über die von Ihnen definierten Navigations- und Hilfebefehle.

    Hier wurde die Definition von HomePage aktualisiert, sodass die Ableitung von NavigationPage erfolgt.

    
    
    <nav:NavigationPage
        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:nav="using:FlatNavTemplate"
        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">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <-- PAGE CONTENT -->   
        </Grid>
    </nav:NavigationPage>
    
    
    
    
    public sealed partial class HomePage : NavigationPage
    {
    
    }
    
    

Anmerkungen

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

Vollständiges Beispiel

NavigationPage


using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

namespace FlatNavTemplate
{
    public class NavigationPage : Page
    {
        public static NavigationPage Current;

        public NavigationPage()
        {
            Loaded += NavigationPage_Loaded;
        }

        void NavigationPage_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            // To access the app bars from the code of a derived page, 
            // use NavigationPage.Current.TopAppBar or NavigationPage.Current.BottomAppBar.
            Current = this;

            // Navigation controls go in the top app bar.
            AppBar navBar = new AppBar();
            navBar.Background = new SolidColorBrush(new Color() { A=255, R = 0, G = 178, B = 240 });
            navBar.Content = new NavigationControl();
            this.TopAppBar = navBar;

            // CommandBar for Help command goes in the BottomAppBar.
            CommandBar commandBar = new CommandBar();
            commandBar.Background = new SolidColorBrush(new Color() { A = 255, R = 0, G = 178, B = 240 });
            // Create the Help button.
            AppBarButton helpButton = new AppBarButton();
            helpButton.Icon = new SymbolIcon(Symbol.Help);
            helpButton.Label = "Help";
            helpButton.Click += helpButton_Click;
            // Add the Help button to the command bar.
            commandBar.PrimaryCommands.Add(helpButton);
            this.BottomAppBar = commandBar;
        }

        void helpButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            Settings.HelpSettings helpSettingsFlyout = new Settings.HelpSettings();
            // When the settings flyout is opened from the app bar instead of from
            // the Settings charm, use the ShowIndependent() method.
            helpSettingsFlyout.ShowIndependent();

            // Close the app bars.
            this.TopAppBar.IsOpen = false;
            this.BottomAppBar.IsOpen = false;
        }
    }
}

NavigationControl


<UserControl
    x:Class="FlatNavTemplate.NavigationControl"
    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"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <UserControl.Resources>
        <Style TargetType="Button">
            <Setter Property="Width" Value="140"/>
            <Setter Property="Height" Value="60"/>
            <Setter Property="Margin" Value="5"/>
        </Style>
    </UserControl.Resources>
    
    <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>
</UserControl>



namespace FlatNavTemplate
{
    public sealed partial class NavigationControl : UserControl
    {
        public NavigationControl()
        {
            this.InitializeComponent();
        }

        private void NavButton_Click(object sender, RoutedEventArgs e)
        {
            Button b = sender as Button;
            Frame rootFrame = Window.Current.Content as Frame;

            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);
                }
                else if (pageType == null)
                {
                    // TODO: Optional - Do something if page not found.
                }
            }
        }
    }
}

HomePage


<nav:NavigationPage
    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:nav="using:FlatNavTemplate"
    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>
</nav:NavigationPage>


public sealed partial class HomePage : NavigationPage
{
    // Only class definition is shown. Template code is removed for clarity.
}

Page2


<nav:NavigationPage
    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:nav="using:FlatNavTemplate"
    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>
</nav:NavigationPage>


public sealed partial class Page2 : NavigationPage
{
    // Only class definition is shown. Template code is removed for clarity.
}

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:
© 2015 Microsoft