應(yīng)用欄

應(yīng)用欄

基本的用法我們?cè)诮坛糖懊娴摹绊?yè)面布局與基本導(dǎo)航”中已經(jīng)講過(guò)了，這里繼續(xù)補(bǔ)充關(guān)于應(yīng)用欄的更多用法。

Icon

在之前的學(xué)習(xí)中，我們知道 Icon 屬性中有很多很多系統(tǒng)預(yù)定義，但也許這些還是不夠的，現(xiàn)在就來(lái)增加幾種用法。

字符集應(yīng)用

<AppBarToggleButton Label="Sigma" Click="AppBarButton_Click">
    <AppBarToggleButton.Icon>
        <FontIcon Glyph="&#x03A3;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

關(guān)于更多字符集的應(yīng)用請(qǐng)?jiān)L問(wèn)維基百科。

PathIcon

我們也可以用路徑來(lái)繪制一個(gè)屬于自己的圖形哦，下面的圖形大概就是 9 點(diǎn)鐘的樣子啦。

<AppBarToggleButton Label="Time" Click="AppBarButton_Click">
    <AppBarToggleButton.Icon>                              
        <PathIcon Data="F1 M 20,20 21,1L 21,21L 8,21"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

如何適應(yīng)不同的分辨率

如何適應(yīng)不同的分辨率這也是值得我們?nèi)ソ鉀Q的問(wèn)題，畢竟不論是從 8 英寸的平板還是 25 英寸的臺(tái)式機(jī)，甚至還有 4 英寸至 7 英寸的手機(jī)，在應(yīng)用欄按鈕太多而屏幕不夠大時(shí)，多余的按鈕該怎么辦呢？

默認(rèn)情況下，應(yīng)用欄圖標(biāo)的寬度都是確定好的 100 像素哦。那么我們先來(lái)看兩張圖片好了，由于 Windows 10 是可以直接調(diào)整 Modern 應(yīng)用的大小的（而不是 windows 8 那種只能全屏顯示），所以我直接拉伸 Modern 大小以模擬分辨率的概率啦。

    <Page.BottomAppBar>
        <AppBar x:Name="bottomAppBar" IsSticky="True">
            <Grid>          
                <StackPanel x:Name="leftBottomAppBar" 
                            Orientation="Horizontal">
                    <AppBarButton Label="Like" Icon="Like"/>
                    <AppBarButton Label="Dislike" Icon="Dislike"/>
                    <AppBarButton Label="Delete" Icon="Delete"/>
                    <AppBarButton Label="Download" Icon="Download"/>
                    <AppBarButton Label="Pin" Icon="Pin"/>
                </StackPanel>
                <StackPanel x:Name="rightBottomAppBar" 
                        Orientation="Horizontal" HorizontalAlignment="Right">
                    <AppBarButton Label="Play" Icon="Play"/>
                    <AppBarButton Label="Pause" Icon="Pause"/>
                    <AppBarButton Label="Stop" Icon="Stop"/>
                    <AppBarButton Label="Previous" Icon="Previous"/>
                    <AppBarButton Label="Next" Icon="Next"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

這里為了調(diào)試更加方便，所以使用了 IsSticky 屬性。AppBarButton 還有一個(gè)很重要的屬性喲，之前用不到，不過(guò)這里就是核心成員了呢，它就是 IsCompact。這個(gè)屬性可以讓?xiě)?yīng)用欄按鈕只顯示圖標(biāo)而不顯示文字，也就是 Label 啦。那么我們的工作就要圍繞這個(gè)屬性來(lái)展開(kāi)了。

我們可以這樣假設(shè)，有一個(gè)函數(shù)，它有一個(gè)布爾變量的參數(shù)，參數(shù)為真的話(huà)呢，那么所有的這些 AppBarButton 的 IsCompact 屬性也為真。在以下這段代碼中，我們先將 bottomAppBar 的自對(duì)象選取為 root，這樣一來(lái)的話(huà)呢，如果應(yīng)用中還有頂部的應(yīng)用欄，就不會(huì)相互干擾啦。然后逐步取出 root 和 panel 中的自對(duì)象就好咯。

     private void AppBarButtonCompact(bool isCompact)
        {
            Panel root = bottomAppBar.Content as Panel;
            if(root!=null)
            {
                foreach(Panel panel in root.Children)
                {
                    foreach (ICommandBarElement child in panel.Children)
                    {
                        child.IsCompact = isCompact;
                    }
                }
            }
        }

接下來(lái)還需要判斷到底需不需要啟用 IsCompact，那這又是由什么決定的呢，既然前面提到是因?yàn)槠聊坏姆直媛?，也就是所?yīng)用所占用的寬度會(huì)導(dǎo)致應(yīng)用欄發(fā)生重疊，那么答案就毫無(wú)疑問(wèn)了?？吹较旅娴拇a相信大家都明白了，至于為何是寬度的界限在 1000 呢，那是因?yàn)橛?10 個(gè) AppBarButton，前面也說(shuō)了它們的寬度是 100。（不帶 Label 的話(huà)呢，就只需要 60 像素啦。）

     void AppSizeChanged(object sender, SizeChangedEventArgs e)
        {
            if (e.NewSize.Width != e.PreviousSize.Width)
            {
                if (e.NewSize.Width < 1000)
                {
                    AppBarButtonCompact(true);
                }
                else
                {
                    AppBarButtonCompact(false);
                }
            }
        }

來(lái)張圖片以示搞定這個(gè)問(wèn)題了吧。

但是像我這么鉆牛角尖的人，10 個(gè) AppBarButton 用這種方式搞定了，那 20 個(gè)呢？我們就來(lái)演示一下，把之前 XAML 中的 AppBarButton 復(fù)制粘貼一番。如果是 2K、4K 的屏幕應(yīng)對(duì) 20 個(gè)沒(méi)問(wèn)題啊，但我這 1920X1080 的屏幕就放不下了。

那么這又有什么辦法可以解決的嗎？當(dāng)然有啦，將這 20 個(gè)圖標(biāo)切成 2 列就好啦。我們首先在 Grid 中添加一行。

<Grid.RowDefinitions>      
    <RowDefinition Height="auto"/>                     
    <RowDefinition Height="auto"/>                
</Grid.RowDefinitions>

再通過(guò)下面這張方式來(lái)調(diào)整它處于哪一行，以及在水平方向的右側(cè)還是左側(cè)。這里我將兩行都設(shè)置在右側(cè)啦。

leftBottomAppBar.SetValue(Grid.RowProperty, 1);
leftBottomAppBar.SetValue(HorizontalAlignmentProperty, HorizontalAlignment.Right);           

當(dāng)然了，這樣一來(lái)就可以放 40 個(gè) AppBarButton 啦，如果縮小應(yīng)用的大小的話(huà)為了容納更多還可以用 IsCompact 屬性呢。不過(guò)沒(méi)有哪個(gè)應(yīng)用做成這樣吧。

另外呢，如果把應(yīng)用欄設(shè)計(jì)成這樣的話(huà)。

<Page.BottomAppBar>   
   <AppBar x:Name="bottomAppBar" IsSticky="True">            
      <Grid>                
         <Grid.ColumnDefinitions>                      
             <ColumnDefinition Width="*"/>                    
             <ColumnDefinition Width="*"/>                
         </Grid.ColumnDefinitions>               
         <StackPanel Grid.Column="0" x:Name="leftBottomAppBar"  Orientation="Horizontal" HorizontalAlignment="Left">                                     
             <AppBarButton Label="Like" Icon="Like"/>                
             <AppBarButton Label="Dislike" Icon="Dislike"/>           
             <AppBarButton Label="Delete" Icon="Delete"/>                 
             <AppBarButton Label="Download" Icon="Download"/>       
             <AppBarButton Label="Pin" Icon="Pin"/>                
         </StackPanel>     
         <StackPanel Grid.Column="1" x:Name="rightBottomAppBar" Orientation="Horizontal" HorizontalAlignment="Right">                                                     
             <AppBarButton Label="Play" Icon="Play"/>       
             <AppBarButton Label="Pause" Icon="Pause"/>       
             <AppBarButton Label="Stop" Icon="Stop"/>         
             <AppBarButton Label="Previous" Icon="Previous"/>       
             <AppBarButton Label="Next" Icon="Next"/>        
         </StackPanel>   
      </Grid>   
   </AppBar>  
</Page.BottomAppBar>

那么對(duì)于 Windows 10，在拉伸的過(guò)程中，中間部分的控件就會(huì)慢慢消失啦。以下這張圖片呢，是我在拉伸到中間有2個(gè)控件剛好重疊的時(shí)候啦。至于把 AppBarButton 設(shè)計(jì)成這樣是好是壞大家自己決定咯，我反正覺(jué)得這樣不好呢。不過(guò)有意思的是，即便如此，它們彼此的 Click 事件還都是有效的噢，會(huì)區(qū)分左右兩部分，而不會(huì)疊在一起。

當(dāng)然啦，這個(gè)的應(yīng)用遠(yuǎn)不是應(yīng)用欄這么簡(jiǎn)單喲，對(duì)于其他的前景，比如有兩個(gè) TextBlock 在屏幕左右兩側(cè)，當(dāng)應(yīng)用把收縮變小之后也可以讓這個(gè) TextBlock 疊成 2 層在屏幕的一邊。

在應(yīng)用欄上添加菜單

我們都見(jiàn)過(guò)有菜單的應(yīng)用欄按鈕對(duì)吧，這個(gè)的實(shí)現(xiàn)其實(shí)也挺簡(jiǎn)單的。用 Flyout 屬性就好了。

<Page.BottomAppBar>        
    <CommandBar> 
        <AppBarButton Icon="Rotate" Label="Rotate">                
            <AppBarButton.Flyout>                    
                <MenuFlyout>   
                   <MenuFlyoutItem Text="Rotate 90" Click="MenuFlyoutItem_Click" Tag="Rotate90"/>           
                   <MenuFlyoutItem Text="Rotate 180" Click="MenuFlyoutItem_Click" Tag="Rotate180"/>      
                   <MenuFlyoutItem Text="Rotate 270" Click="MenuFlyoutItem_Click" Tag="Rotate270"/>                    
               </MenuFlyout>                
           </AppBarButton.Flyout>            
       </AppBarButton>     
   </CommandBar>   
</Page.BottomAppBar>

Tag 屬性，就相當(dāng)于做一個(gè)標(biāo)簽。下面這段代碼就讓 Flyout 菜單發(fā)揮作用了。

private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    MenuFlyoutItem selectedItem = sender as MenuFlyoutItem;
    if (selectedItem != null)
    {
        if (selectedItem.Tag.ToString() == "Rotate90")
        {
            DoRotate(90);
        }
        else if (selectedItem.Tag.ToString() == "Rotate180")
        {
            DoRotate(180);
        }
        else if (selectedItem.Tag.ToString() == "Rotate270")
        {
            DoRotate(270);
        }
    }
}