Language: HTML | XAML

快速入門:新增應用程式列 (XAML)

Applies to Windows and Windows Phone

使用應用程式列來顯示不需要時可以隱藏起來的瀏覽、命令及工具。 您可以將應用程式列放置於頁面的頂端、頁面的底部或兩個地方都顯示。應用程式列預設是隱藏起來,當使用者按一下滑鼠右鍵、按 Windows+Z 或從螢幕上或下邊緣撥動時,就會顯示或關閉應用程式列。您可以使用程式設計的方式,讓應用程式列在使用者進行選取或與應用程式互動時顯示。

如需了解此功能的運作情形,請參閱應用程式功能,從開始到完成系列:  Windows 市集應用程式 UI,從開始到完成

先決條件

選擇 AppBar 或 CommandBar

XAML 架構提供 CommandBarAppBar 控制項,讓您在畫面上邊緣或下邊緣進行邊緣撥動時顯示 UI。CommandBar 有較多的內建功能,但您可放入的內容類型會受到限制。AppBar 可讓您新增任何 Extensible Application Markup Language (XAML) 內容,但您必須自行管理配置和調整大小。

重要  只有專為 Windows 8.1 設計的應用程式可以使用 CommandBarAppBarButtonAppBarToggleButtonAppBarSeparator 控制項。如果應用程式專為 Windows 8 設計,則您必須使用 AppBar 控制項。
  1. 如果您需要只包含 AppBarButtonAppBarToggleButtonAppBarSeparator 控制項的應用程式列,請使用 CommandBarCommandBar 提供以下功能,簡化了基本應用程式列的建立程序:

    • 自動配置命令,其中主要命令會位於右側,次要命令位於左側。
    • 當應用程式大小變更時,自動調整應用程式列命令大小。
  2. 如果需要更複雜的內容 (像是影像、進度列、搜尋方塊、文字區塊或自訂樣式按鈕),請使用 AppBar 控制項。您可以使用 AppBar 搭配自訂內容,以建立工具列或瀏覽 UI。當您將命令放入 AppBar 控制項時,必須在畫面大小變更時重新調整大小或排列 AppBar 內容。如需詳細資訊,請參閱如何在不同的檢視中使用應用程式列

新增應用程式列

  • 若要將應用程式列新增到您的應用程式,請將 CommandBarAppBar 控制項指派給 PageTopAppBarBottomAppBar 屬性。

    使用瀏覽 (頂端應用程式) 列,在您的應用程式中顯示瀏覽。您通常會在瀏覽時使用 AppBar 搭配自訂樣式的按鈕。如需詳細資訊,請參閱 Windows 市集應用程式的瀏覽設計

    使用底部應用程式列來顯示命令和工具。如需詳細資訊,請參閱 Windows 市集應用程式的命令設計

    這個範例顯示如何新增 AppBar 控制項做為頂端應用程式列,以及 CommandBar 控制項做為底部應用程式列。

    
    
    <Page.TopAppBar>
        <AppBar>
            <!-- AppBar content -->
        </AppBar>
    </Page.TopAppBar>
    
    <Page.BottomAppBar>
        <CommandBar>
            <!-- CommandBar content -->
        </CommandBar>
    </Page.BottomAppBar>
    
    

在多頁應用程式中,您可以跨頁面共用含有常用命令的應用程式列。如需詳細資訊,請參閱如何跨頁面共用應用程式列

新增內容到 CommandBar

  • 若要在 CommandBar 新增內容,將 AppBarButtonAppBarToggleButtonAppBarSeparator 控制項新增到 CommandBarPrimaryCommands以及 SecondaryCommands 集合。在 XAML 中直接新增到 CommandBar 的控制項會自動新增到 PrimaryCommands 集合。

    這個範例顯示 CommandBar 以及 PrimaryCommandsSecondaryCommands

    
    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Label="Refresh" Icon="Refresh" Click="AppBarButton_Click"/>
            <AppBarButton Label="Help" Icon="Help" Click="AppBarButton_Click"/>
    
            <CommandBar.SecondaryCommands>
                <AppBarButton Label="Edit" Icon="Edit" Click="AppBarButton_Click"/>
                <AppBarButton Label="Remove" Icon="Remove" Click="AppBarButton_Click"/>
                <AppBarButton Label="Add" Icon="Add" Click="AppBarButton_Click"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
    
    

    底部的應用程式列控制項

新增內容到 AppBar

  • AppBar 只能包含一個子內容,因此您通常會加入可以新增其他控制項的配置面板。

    這個範例顯示 AppBar 以及瀏覽按鈕和搜尋方塊。

    
    <Page.TopAppBar>
        <AppBar>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal">
                    <Button Content="Home" Width="140" Height="80" Click="AppBarButton_Click"/>
                    <Button Content="Page 1" Width="140" Height="80" Click="AppBarButton_Click"/>
                    <Button Content="Page 2" Width="140" Height="80" Click="AppBarButton_Click"/>
                </StackPanel>
                <SearchBox Grid.Column="1" Width="300" Height="50" HorizontalAlignment="Right"/>
            </Grid>
        </AppBar>
    </Page.TopAppBar>
    
    

    底部的應用程式列控制項

以程式設計的方式開啟應用程式列

根據預設,當使用者按一下滑鼠右鍵、按 Windows+Z 或從螢幕上或下邊緣撥動時,就會顯示應用程式列。當使用者執行這其中一個動作時,如果該頁面有頂端和底部的應用程式列,則這兩個應用程式列都會出現。您可以藉由將 IsOpen 屬性設定為 true,以程式設計方式開啟應用程式列。 當您執行這個動作時,只會開啟您為其設定該屬性值的特定應用程式列 (頂端或底部)。

  1. 若要在載入頁面時初始開啟您的應用程式列,請在 XAML 中將 IsOpen 屬性設定為 true
    
    <Page.BottomAppBar>
        <CommandBar IsOpen="True">
            <AppBarButton Label="Refresh" Icon="Refresh" Click="AppBarButton_Click"/>
            <AppBarButton Label="Help" Icon="Help" Click="AppBarButton_Click"/>
        </CommandBar>
    </Page.BottomAppBar>
    
    
  2. 若要以程式設計的方式開啟應用程式列,請在程式碼中將 IsOpen 屬性設定為 true。若要以程式碼參照應用程式列,您可以給予它一個名稱,並以該名稱參照它,或者您可以參照 TopAppBarBottomAppBar 屬性。
    
    private void OpenButton_Click(object sender, RoutedEventArgs e)
    {
        if (this.BottomAppBar != null)
        {
            this.BottomAppBar.IsOpen = true;
        }
    }
    
    

    您通常會以程式設計方式開啟應用程式列,以便在使用者與應用程式中的項目互動時,顯示關聯式命令。例如,您可能會在使用者於應用程式中選取文字時,顯示含有格式設定命令的應用程式列。當您顯示關聯式命令時,請將應用程式列的關閉模式設定為「相黏」,直到內容變更為止,以便讓命令保持可見狀態。

使應用程式列「相黏」

根據預設,應用程式列會在使用者於應用程式列以外之任何地方與您的應用程式互動時關閉。若要讓命令保持可見狀態,您可以藉由將 IsSticky 屬性設定為 true,以變更關閉模式。如果應用程式列是相黏的,則只有在使用者按一下滑鼠右鍵、按 Windows+Z 或從螢幕上下邊緣撥動時,才會關閉該應用程式列。

  1. 若要讓您的應用程式列在使用者與應用程式互動時保持可見狀態,請在 XAML 中將 IsSticky 屬性設定為 true
    
    <Page.TopAppBar>
        <AppBar IsSticky="True">
            <StackPanel Orientation="Horizontal">
                <Button Content="Home" Width="140" Height="80" Click="AppBarButton_Click"/>
                <Button Content="Page 1" Width="140" Height="80" Click="AppBarButton_Click"/>
                <Button Content="Page 2" Width="140" Height="80" Click="AppBarButton_Click"/>
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>
    
    
  2. 若要以程式設計的方式變更應用程式列關閉模式,請在程式碼中將 IsSticky 屬性設定為 true。若要以程式碼參照應用程式列,您可以給予它一個名稱,並以該名稱參照它,或者您可以參照 TopAppBarBottomAppBar 屬性。
    
    private void OpenButton_Click(object sender, RoutedEventArgs e)
    {
        if (this.TopAppBar != null)
        {
            this.TopAppBar.IsSticky = true;
        }
    }
    
    

摘要與後續步驟

在這個快速入門中,您已學會如何將應用程式列新增至使用 C++、C# 或 Visual Basic 的 Windows 市集應用程式中。

為了讓您的使用者能有一致的體驗,請檢閱應用程式列的指導方針

若要深入了解 AppBarButton 控制項,請參閱快速入門:新增應用程式列按鈕

相關主題

XAML AppBar 控制項範例
快速入門:新增應用程式列按鈕
Windows 市集應用程式的命令設計
AppBar
黑白棋範例功能案例:應用程式列

 

 

顯示:
© 2015 Microsoft