如何使用不同大小的應用程式列

Applies to Windows only

根據預設,應用程式列按鈕的寬度是 100 個裝置獨立像素 (DIP),且其圖示下方有文字標籤。當使用者將應用程式變窄時,將沒有足夠的水平空間可以顯示命令。如果您的應用程式列有許多按鈕,就必須進行一些調整,讓按鈕能夠在較窄小的寬度中正確顯示。

附註  如果您的應用程式列內容裝載在 CommandBar 控制項中,CommandBar 會處理配置並調整其子應用程式列按鈕控制項的大小。本教學課程的技術只在您的應用程式列內容裝載在 AppBar 控制項中時才會用到。

藍圖: 這個主題與其他主題的相關性?請參閱:

您必須知道的事

技術

先決條件

指示

步驟 1: 隱藏標籤並減少寬度 (Windows 8.1)

Windows 8.1:  這個步驟只適用於 Windows 8.1。如果是 Windows 8,請參閱步驟 3。

這些範例中的程式碼會使用已在這個 Extensible Application Markup Language (XAML) 中定義的 AppBar


<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" IsSticky="True">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            
            <StackPanel x:Name="leftAppBarPanel" Orientation="Horizontal">
                <AppBarButton Label="Save" Icon="Save"/>
                <AppBarButton Label="Discard" Icon="Delete"/>
                <AppBarButton Label="Edit" Icon="Edit"/>
                <AppBarButton Label="Undo" Icon="Undo"/>
                <AppBarButton Label="Redo" Icon="Redo"/>
            </StackPanel>
            
            <StackPanel x:Name="rightAppBarPanel" 
                        Orientation="Horizontal" HorizontalAlignment="Right">
                <AppBarButton Label="Skip Back" Icon="Previous"/>
                <AppBarButton Label="Skip Ahead" Icon="Next"/>
                <AppBarButton Label="Play" Icon="Play"/>
                <AppBarButton Label="Pause" Icon="Pause"/>
                <AppBarButton Label="Stop" Icon="Stop"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

在寬度為 1024 像素的應用程式中,這個應用程式列看起來就像這樣。

包含 10 個按鈕的應用程式列

當應用程式的寬度為 320 像素時,應用程式列預設看起來像這樣。

貼齊檢視中,包含 10 個按鈕的應用程式列

應用程式列按鈕控制項 (AppBarButtonAppBarToggleButton) 有兩種大小:標準和精簡。它們預設都有文字標籤和完整的邊框間距。當 IsCompact 屬性設定為 true 的時候,文字標籤會隱藏,按鈕周圍的邊框間距則會縮小。AppBarSeparator 也有邊框間距縮小的精簡狀態。若要讓應用程式列按鈕使用較少的空間,將 IsCompact 屬性設為 true

當應用程式列按鈕沒有裝載在 CommandBar 時,您必須在程式碼中管理其 IsCompact 屬性。 若要這樣做,您要接聽頁面的 SizeChanged 事件,然後針對新的視窗大小為每個應用程式列按鈕設定適當的 IsCompact 屬性。

JJ662742.wedge(zh-tw,WIN.10).gif調整按鈕大小

  1. 登錄頁面的 SizeChanged 事件。
    
    public MainPage()
    {
        this.InitializeComponent();
    
        // Register for the SizeChanged event.
        this.SizeChanged += MainPage_SizeChanged;
    }
    
    
    
  2. SizeChanged 事件處理常式中,檢查頁面寬度是否改變。如果已變更,請更新 AppBar 的配置。
    
    void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (e.NewSize.Width != e.PreviousSize.Width)
        {
            UpdateBottomAppBarLayout(e.NewSize.Width);
        }
    }
    
    
  3. 若要更新 AppBar 配置,根據頁面寬度設定每個按鈕的 IsCompact 屬性。在這個範例中,有 10 個 AppBarButton 且每個的寬度為 100 DIP,所以如果頁面寬度小於 1000,則需要精簡按鈕。
    
    private void UpdateAppBarButtons(double newWidth)
    {
        if (newWidth < 1000)
        {
            ToggleIsCompact(true);
        }
        else
        {
            ToggleIsCompact(false);
        }
    }
    
    

    如果您有固定數量的按鈕,可以在程式碼中針對每個按鈕個別設定 IsCompact 屬性,或使用 VisualStateManager。或者,您可以循環顯示它們,如這裡所示。這個程式碼假設應用程式列使用含有根 Panel 的配置,其中包含裝載按鈕的其他 Panel

    
    private void ToggleIsCompact(bool isCompact)
    {
        // Get the app bar's root Panel.
        Panel root = bottomAppBar.Content as Panel;
        if (root != null)
        {
            // Get the Panels that hold the controls.
            foreach (Panel panel in root.Children)
            {
                foreach (ICommandBarElement child in panel.Children)
                {
                    child.IsCompact = isCompact;
                }
            }
        }
    }
    
    

現在,當使用者將應用程式變窄,按鈕會重新調整大小,而應用程式列看起來會像這樣。

窄版應用程式的應用程式列

步驟 2: 重新排列和隱藏按鈕 (Windows 8.1)

Windows 8.1:  這個步驟只適用於 Windows 8.1。如果是 Windows 8,請參閱步驟 4。

附註  在這個步驟中,我們假設應用程式列按鈕處於精簡狀態 (如上一個步驟所述),沒有文字標籤也沒有減少寬度。

在最窄的情況下,應用程式列的寬度只夠在一列中顯示 5 個 AppBarButton。如果應用程式列的按鈕超過 5 個,您就必須將按鈕排成 2 列、隱藏部分按鈕,或同時執行這兩者。

JJ662742.wedge(zh-tw,WIN.10).gif將按鈕移成 2 列

  1. 若要將按鈕重新排列成 2 列,請為應用程式列使用類似這樣的配置。使用根 Grid 搭配 2 列及 2 個面板 (通常是 StackPanel) 來保留按鈕。
    
    <AppBar>
        <Grid>
            <Grid.RowDefinitions>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
                    
            <StackPanel x:Name="leftAppBarPanel" Orientation="Horizontal">
                <!-- Buttons -- >
            </StackPanel>
                    
            <StackPanel x:Name="rightAppBarPanel" Orientation="Horizontal" 
                        HorizontalAlignment="Right">
                <!-- Buttons -- >
            </StackPanel>
        </Grid>
    </AppBar>
    
    
  2. 當應用程式太窄而無法在一列容納所有的按鈕時,將 rightAppBarPanel 元素的 Grid.Row 屬性值設為 1,並將面板的 HorizontalAlignment 屬性變更為 Left

    如果您需要同時顯示主要 (右) 和次要 (左) 按鈕,這個方法很有用。如果您不需要顯示次要命令,可以如下個步驟所示將它們隱藏起來。

    當應用程式在最窄的狀態時,右邊的按鈕會移到下面一列。應用程式列看起來就像這樣。

    在貼齊檢視中包含 2 列的應用程式列

    在這個範例中,精簡狀態時有 10 個 AppBarButton,每個寬度為 60 DIP。如果頁面寬度少於 600,您需要將按鈕設為精簡,並將它們移到第二列。

    
    private void UpdateBottomAppBarLayout(double newWidth)
    {
        if (newWidth < 600)
        {
            ToggleIsCompact(true);
            rightAppBarPanel.SetValue(Grid.RowProperty, 1);
            rightAppBarPanel.SetValue(HorizontalAlignmentProperty, HorizontalAlignment.Left);
        }
        else if (newWidth < 1000)
        {
            ToggleIsCompact(true);
            rightAppBarPanel.SetValue(Grid.RowProperty, 0);
            rightAppBarPanel.SetValue(HorizontalAlignmentProperty, HorizontalAlignment.Right);
        }
        else
        {
            ToggleIsCompact(false);
            rightAppBarPanel.SetValue(Grid.RowProperty, 0);
            rightAppBarPanel.SetValue(HorizontalAlignmentProperty, HorizontalAlignment.Right);
        }
    }
    
    

JJ662742.wedge(zh-tw,WIN.10).gif隱藏按鈕

  • 當應用程式太窄而無法在一列容納所有的按鈕時,將 leftAppBarPanel 元素的 Visibility 屬性值變更為 Collapsed

    當應用程式在最窄的狀態時,會隱藏左面板的按鈕。應用程式列看起來就像這樣。

    在貼齊檢視中包含 1 列的應用程式列

    在這個範例中,精簡狀態時有 10 個 AppBarButton,每個寬度為 60 DIP。如果頁面寬度少於 600,您需要將按鈕設為精簡,並隱藏次要命令。

    
    private void UpdateBottomAppBarLayout(double newWidth)
    {
        if (newWidth < 600)
        {
            ToggleIsCompact(true);
            leftAppBarPanel.SetValue(VisibilityProperty, Visibility.Collapsed);
    
        }
        else if (newWidth < 1000)
        {
            ToggleIsCompact(true);
            leftAppBarPanel.SetValue(VisibilityProperty, Visibility.Visible);
        }
        else
        {
            ToggleIsCompact(false);
            leftAppBarPanel.SetValue(VisibilityProperty, Visibility.Visible);
        }
    }
    
    

步驟 3: 隱藏標籤並減少寬度 (Windows 8)

Windows 8:  這個步驟只適用於 Windows 8。如果是 Windows 8.1,請參閱步驟 1。在 Windows 8.1 中,AppBarButtonStyle 已過時,由 AppBarButton 控制項取代。

這些範例中的程式碼會使用這個 XAML 中定義的 AppBar

附註  若要使用此處顯示的 "AppBarButtonStyle" 資源,則必須編輯 StandardStyles.xaml 檔案以供使用。如需詳細資訊,請參閱快速入門:新增應用程式列按鈕


<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" IsSticky="True" 
            Loaded="appBar_Loaded" Unloaded="appBar_Unloaded">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            
            <StackPanel x:Name="leftAppBarPanel" Orientation="Horizontal">
                <Button Style="{StaticResource SaveAppBarButtonStyle}"/>
                <Button Style="{StaticResource DiscardAppBarButtonStyle}"/>
                <Button Style="{StaticResource EditAppBarButtonStyle}"/>
                <Button Style="{StaticResource UndoAppBarButtonStyle}"/>
                <Button Style="{StaticResource RedoAppBarButtonStyle}"/>
            </StackPanel>
            
            <StackPanel x:Name="rightAppBarPanel" 
                        Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Style="{StaticResource SkipBackAppBarButtonStyle}"/>
                <Button Style="{StaticResource SkipAheadAppBarButtonStyle}"/>
                <Button Style="{StaticResource PlayAppBarButtonStyle}"/>
                <Button Style="{StaticResource PauseAppBarButtonStyle}"/>
                <Button Style="{StaticResource StopAppBarButtonStyle}"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

在寬度為 1024 像素的應用程式中,這個應用程式列看起來就像這樣。

包含 10 個按鈕的應用程式列

當應用程式貼齊時,應用程式列預設看起來像這樣。

貼齊檢視中,包含 10 個按鈕的應用程式列

為了讓應用程式列按鈕使用較少空間,AppBarButtonStyle 基礎 Style 包含的 VisualState 會在 SnappedFullScreenPortrait 檢視中,隱藏按鈕的標籤並減少其寬度。 VisualState 是在 AppBarButtonStyle 資源中定義,但是根據預設,控制項不會知道應用程式的檢視狀態。若要讓應用程式列按鈕能夠根據應用程式的檢視狀態來變更狀態,您必須提供其他程式碼,讓 Button 知道應用程式檢視狀態有變更。 您提供的程式碼取決於主控應用程式列的頁面是否衍生自 LayoutAwarePage 類別。

附註  Microsoft Visual Studio 頁面範本 (非空白頁面) 衍生自 LayoutAwarePage 類別。LayoutAwarePagePage 的實作,可針對 Windows 市集應用程式開發 (如檢視狀態管理、基本瀏覽,以及應用程式工作階段狀態管理) 啟用重要功能。如需詳細資訊,請參閱 C#、VB 及 C++ 項目範本

LayoutAwarePage 中,任何控制項都可以叫用 StartLayoutUpdates 來登錄以接收與應用程式檢視狀態變更相對應的視覺狀態變更。這表示,當應用程式檢視狀態變更為 Snapped 時,應用程式列按鈕可以移至它的 Snapped 檢視狀態。

JJ662742.wedge(zh-tw,WIN.10).gif在 LayoutAwarePage 中調整按鈕大小

  1. 如果您的 AppBar 只有一個或兩個命令,您可在它們的 LoadedUnloaded 事件中,分別予以登錄和解除登錄,就像這樣。
    
    <Button Style="{StaticResource PlayAppBarButtonStyle}"
            Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates"/>
    
    
  2. 如果您的應用程式列有多個按鈕,最好是在應用程式列載入和解除載入時,透過程式碼予以登錄和解除登錄,如下所示。

    這段程式碼會假設應用程式列使用含有根 Panel 的配置,且包含主控按鈕的其他 PanelAppBar 載入時,會登錄每個按鈕以接收狀態變更,並在應用程式列解除載入時解除登錄。

    LoadedUnloaded 事件登錄於先前說明的 AppBar XAML 中。

    
    
    private void appBar_Loaded(object sender, RoutedEventArgs e)
    {
        // Get the app bar's root Panel.
        Panel root = ((AppBar)sender).Content as Panel;
        if (root != null)
        {
            // Get the Panels that hold the controls.
            foreach (Panel panel in root.Children)
            {
                // Get each control and register for layout updates.
                foreach (UIElement child in panel.Children)
                {
                    base.StartLayoutUpdates(child, new RoutedEventArgs());
                }
            }
        }
    }
    
    private void appBar_Unloaded(object sender, RoutedEventArgs e)
    {
        // Get the app bar's root Panel.
        Panel root = ((AppBar)sender).Content as Panel;
        if (root != null)
        {
            // Get the Panels that hold the controls.
            foreach (Panel panel in root.Children)
            {
                // Get each control and unregister layout updates.
                foreach (UIElement child in panel.Children)
                {
                    base.StopLayoutUpdates(child, new RoutedEventArgs());
                }
            }
        }
    }
    
    

如果主控應用程式列的頁面不是衍生自 LayoutAwarePage,您就必須在頁面中提供功能,以變更 Button 的檢視狀態。若要這樣做,您可以接聽應用程式檢視狀態變更,然後在應用程式的檢視狀態變更時,針對每個應用程式列按鈕呼叫 ViewStateManager.GoToState

JJ662742.wedge(zh-tw,WIN.10).gif在空白頁面中調整按鈕大小

  1. 登錄視窗的 SizeChanged 事件。
    
    public MainPage()
    {
        this.InitializeComponent();
    
        // Register for the SizeChanged event.
        Window.Current.SizeChanged += Current_SizeChanged;
    }
    
    
    
  2. SizeChanged 事件處理常式中,檢查應用程式列是否已開啟。如果是,請更新每個按鈕的檢視狀態。

    如果應用程式檢視狀態在應用程式列開啟時變更,這段程式碼就會予以處理。

    
    void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
    {
        if (bottomAppBar.IsOpen == true)
        {
            UpdateAppBarButtonsViewState();
        }
    }
    
    
  3. 針對 AppBarLoaded 事件新增處理常式。在 Loaded 事件處理常式中,更新每個按鈕的檢視狀態。

    如果應用程式列是在應用程式檢視狀態變更後開啟,這段程式碼就會予以處理。

    這個 Loaded 事件登錄於先前說明的 AppBar XAML 中。

    
    private void bottomAppBar_Loaded(object sender, RoutedEventArgs e)
    {
        UpdateAppBarButtonsViewState();
    }
    
    
  4. 若要更新每個按鈕的檢視狀態,請呼叫 VisualStateManager.GoToState 並傳遞應用程式的目前檢視狀態。

    如果您的應用程式列只有一個或兩個命令,則您可予以命名並分別為它們呼叫 GoToState,就像這樣。

    
    private void UpdateAppBarButtonsViewState()
    {
        string viewState = Windows.UI.ViewManagement.ApplicationView.Value.ToString();
    
        VisualStateManager.GoToState(playButton, viewState, true);
        VisualStateManager.GoToState(stopButton, viewState, true);
    }
    
    

    如果您的應用程式列有多個按鈕,則最好是予以循環顯示,如此處所示。這段程式碼會假設應用程式列使用含有根 Panel 的配置,且包含主控按鈕的其他 Panel

    
    private void UpdateAppBarButtonViewState()
    {
        string viewState = Windows.UI.ViewManagement.ApplicationView.Value.ToString();
    
        // Get the app bar's root Panel.
        Panel root = bottomAppBar.Content as Panel;
        if (root != null)
        {
            // Get the Panels that hold the controls.
            foreach (Panel panel in root.Children)
            {
                // Get each control and update its state if 
               // it's a Button or ToggleButton.
                foreach (UIElement child in panel.Children)
                {
                    if (child.GetType() == typeof(Button) || 
                        child.GetType() == typeof(ToggleButton))
                    {
                        VisualStateManager.GoToState((ButtonBase)child, viewState, true);
                    }
                }
            }
        }
    }
    
    

現在,如果應用程式旋轉成直向且按鈕調整大小,應用程式列看起來就會像這樣。

直向檢視中的應用程式列

步驟 4: 重新排列和隱藏按鈕 (Windows 8)

Windows 8:  這個步驟只適用於 Windows 8。如果是 Windows 8.1,請參閱步驟 2。在 Windows 8.1 中,AppBarButtonStyle 已過時,由 AppBarButton 控制項取代。

附註  在這個步驟中,我們假設應用程式列按鈕處於 Snapped VisualState (如上一個步驟所述),沒有文字標籤也沒有減少寬度。

Snapped 檢視中,應用程式列的寬度只夠在一列中顯示 5 個按鈕。如果應用程式列的按鈕超過 5 個,您就必須將按鈕排成 2 列、隱藏部分按鈕,或同時執行這兩者。

JJ662742.wedge(zh-tw,WIN.10).gif將按鈕移成 2 列

  1. 若要將按鈕重新排列成 2 列,請為應用程式列使用類似這樣的配置。使用根 Grid 搭配 2 列及 2 個面板 (通常是 StackPanel) 來保留按鈕。
    
    <AppBar>
        <Grid>
            <Grid.RowDefinitions>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
                    
            <StackPanel x:Name="leftAppBarPanel" Orientation="Horizontal">
                <!-- Buttons -- >
            </StackPanel>
                    
            <StackPanel x:Name="rightAppBarPanel" Orientation="Horizontal" HorizontalAlignment="Right">
                <!-- Buttons -- >
            </StackPanel>
        </Grid>
    </AppBar>
    
    
  2. Snapped VisualState 中,將 rightAppBarPanel 元素的 Grid.Row 屬性值變更為 1,並將面板的 HorizontalAlignment 屬性變更為 Left

    當應用程式貼齊時,右邊的按鈕會移到最後一列。應用程式列看起來就像這樣。

    在貼齊檢視中包含 2 列的應用程式列

    
    <VisualStateManager.VisualStateGroups>
        ...
            <VisualState x:Name="Snapped">
                <Storyboard>
                    ... 
    
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="rightAppBarPanel" 
                                                   Storyboard.TargetProperty="(Grid.Row)">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="rightAppBarPanel" 
                                           Storyboard.TargetProperty="HorizontalAlignment">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
                    </ObjectAnimationUsingKeyFrames>
                    ...
                </Storyboard>
            </VisualState>
        ...
    </VisualStateManager.VisualStateGroups>
    
    

JJ662742.wedge(zh-tw,WIN.10).gif隱藏按鈕

  • Snapped VisualState 中,將 leftAppBarPanel 元素的 Visibility 屬性值變更為 Collapsed

    當應用程式貼齊時,會隱藏左面板中的按鈕。應用程式列看起來就像這樣。

    在貼齊檢視中包含 1 列的應用程式列

    
    <VisualStateManager.VisualStateGroups>
        ...
            <VisualState x:Name="Snapped">
                <Storyboard>
                    ...
    
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="leftAppBarPanel" 
                                                   Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        ...
    </VisualStateManager.VisualStateGroups>
    
    

備註

您可以隱藏整個面板 (如圖所示) 或以相同方法隱藏個別按鈕,在 Snapped 檢視中隱藏較不重要的命令。若要隱藏個別按鈕,您必須予以命名,才能在 VisualStateManager 中參照它。

 

 

顯示:
© 2014 Microsoft