Windows 8.1 新增控件之 AppBar - gnielee－IT工程師數位筆記本

文章出處

Windows 8.1 與Windows 8 相比已經有了很多改進，從ITPro 角度這篇文章《What's New in Windows 8.1》已經表述的很詳細。對開發者來說，最明顯的變化就是開始菜單的磁貼尺寸，有大、中、小號之分。搜索功能也集成了Bing，使其更加強大。

start search

同時，Windows 8.1 也新增了一些控件（如下），本篇將為大家介紹AppBar 控件的一些使用方法。

• AppBar
• CommandBar
• DatePicker
• Flyout
• Hub
• Hyperlink
• MenuFlyout
• SettingsFlyout
• TimePicker

AppBar 顧名思義就是為Windows 8.1 應用提供更加方便快捷的應用菜單欄，通常AppBar 是隱藏的，在App 中右鍵鼠標就可以使其顯示。在AppBar 中可以加入AppBarButton、AppBarToggleButton、AppBarSeparator。應用中常規按鈕都是矩形，AppBar中的按鈕均為圓形，并且通過Label 與Icon 屬性設置按鈕的名稱和圖案。

在應用中添加AppBar 其實也很簡單，以下面代碼為例。AppBar 中加入了Grid 布局，同時在StackPanel 中各放入了一些AppBarButton。運行應用程序后，便可看到這些Button 之間不同的區別，相比而言AppBarToggleButton 提供了多種變換狀態，且包含一些特殊事件和屬性（可參考AppBarToggleButton）。

<Page.BottomAppBar>
    <AppBar>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*"/>
                <ColumnDefinition Width="50*"/>
            </Grid.ColumnDefinitions>
            <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                <AppBarButton x:Uid="Camera" Icon="Camera" Label="Camera"/>
                <AppBarToggleButton x:Uid="Suffle" Icon="Shuffle" Label="Shuffle"/>
                <AppBarToggleButton x:Uid="Account" Icon="Account" Label="Account"/>
                <AppBarButton x:Uid="Like" Icon="Like" Label="Like"/>
                <AppBarButton x:Uid="Dislike" Icon="Dislike" Label="Dislike"/>
            </StackPanel>
            <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                <AppBarButton x:Uid="Add" Icon="Add" Label="Add" />
                <AppBarToggleButton x:Uid="Remove" Icon="Remove" Label="Remove"/>
                <AppBarSeparator/>
                <AppBarButton x:Uid="Delete" Icon="Delete" Label="Delete"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

所有按鍵都具有兩種尺寸，默認情況是Normal 就像上面圖中的所有Button。另外一種就是Compact，我將它稱為精簡模式，只需通過IsCompact 屬性即可實現。當IsCompact 設置為True 時，按鍵的Label 名稱將自動隱藏，并且按鍵所占空間也會縮小。如下代碼，將其中幾個Button 設為IsCompact=True。上下兩張圖已經可以很明顯的看出差別了。

<AppBarButton x:Uid="Camera" Icon="Camera" Label="Camera" IsCompact="True"/>
<AppBarToggleButton x:Uid="Suffle" Icon="Shuffle" Label="Shuffle" IsCompact="True"/>
<AppBarToggleButton x:Uid="Account" Icon="Account" Label="Account" IsCompact="True"/>
<AppBarButton x:Uid="Like" Icon="Like" Label="Like" IsCompact="True"/>
<AppBarButton x:Uid="Dislike" Icon="Dislike" Label="Dislike" IsCompact="True"/>

同時，按鍵的Icon 也提供了多種展現方式，上述Button 均為SymbolIcon 模式，除此之外還包括：

• SymbolIcon -- 基于符號
• FontIcon -- 基于文字
• BitmapIcon -- 基于圖片
• PathIcon -- 基于路徑圖

具體用途，看了下面幾個簡單示例肯定就清楚了：

<AppBarButton Icon="Like" Label="SymbolIcon"/>

<AppBarButton Label="BitmapIcon">
    <AppBarButton.Icon>
        <BitmapIcon UriSource="ms-appx:///Assets/globe.png"/>
    </AppBarButton.Icon>
</AppBarButton>

<AppBarToggleButton Label="FontIcon">
    <AppBarToggleButton.Icon>
        <FontIcon FontFamily="Candara" Glyph="&#x03A3;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

<AppBarToggleButton Label="PathIcon">
    <AppBarToggleButton.Icon>
        <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>