當前位置：
首頁 >
Windows8 Metro开发 (02) : AppBar控件之TopAppBar
發布時間：2025/6/15
20
豆豆
生活随笔
收集整理的這篇文章主要介紹了
Windows8 Metro开发 (02) : AppBar控件之TopAppBar
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Appbar分為2種：
在分析代碼之前先上一張程序運行效果圖(全屏模式)：
TopAppBar
一般來說，TopAppBar是為所有頁面服務的。因此只需要創建1個TopAppBar，然后在每個頁面調用即可。
創建TopAppbar 1.創建一個基本頁面GlobalPage.xaml 這個不用我教你了吧。 注意：在Metro程序中不要創建空白頁面。
2.在GlobalPage.xaml里創建1個TopAppbar，并添加幾個Button. [plain]?view plaincopyprint? <Page.TopAppBar>?? ????<AppBar?x:Name="globalAppbar"?Padding="10,0,10,0"?Loaded="OnAppbarLoaded">?? ????????<Grid?Background="Black">?? ????????????<StackPanel?Orientation="Horizontal"?HorizontalAlignment="Left"?ScrollViewer.HorizontalScrollBarVisibility="Auto">?? ????????????????<Button?x:Name="homeAppbarButton"?Style="{StaticResource?GlobalPageHomeAppBarButtonStyle}"?Click="OnHomeAppbarButtonClicked"></Button>?? ????????????????<Button?x:Name="appbarPageAppbarButton"?Style="{StaticResource?GlobalPageAppBarPageAppBarButtonStyle}"?Click="OnAppbarPageAppbarButtonClicked"></Button>?? ????????????????<Button?x:Name="localDataPageAppbarButton"?Style="{StaticResource?GlobalPageLocalDataPageAppBarButtonStyle}"?Click="OnLocalDataPageAppbarButtonClicked"></Button>?? ????????????????<Button?x:Name="settingPanelPageAppbarButton"?Style="{StaticResource?GlobalPageSettingPanelPageAppBarButtonStyle}"?Click="OnSettingPanelPageAppbarButtonClicked"></Button>?? ????????????</StackPanel>?? ????????</Grid>?? ????</AppBar>?? </Page.TopAppBar>??
你會注意到Style="{StaticResource GlobalPageHomeAppBarButtonStyle}"。GlobalPageHomeAppBarButtonStyle是什么東東？Button上面的那些”圖片“是怎么來的？
故名思義，GlobalPageHomeAppBarButtonStyle只是Button的一種樣式而已，你可以在common文件夾下的StandardStyles.xaml里找到很多類型的樣式.
為了以后維護方便，我會在一個新的xaml文件定義這些控件的樣式(以后也會這樣).
創建文件GlobalPageStyle.xaml，在StandardStyles.xaml里找到AppBarButtonStyle，將其復制到GlobalPageStyle.xaml中，并更名為GlobalPageAppBarButtonStyle，然后我們就可以開始修改了！
修改Button基本屬性 [plain]?view plaincopyprint? <Setter?Property="Foreground"?Value="{StaticResource?AppBarItemForegroundThemeBrush}"/>?? <Setter?Property="VerticalAlignment"?Value="Stretch"/>?? <span?style="color:#ff0000;"><Setter?Property="FontFamily"?Value="Segoe?UI?Symbol"/></span>?? <Setter?Property="FontWeight"?Value="Normal"/>?? <span?style="color:#ff0000;"><Setter?Property="FontSize"?Value="40"/></span>?? <Setter?Property="AutomationProperties.ItemType"?Value="App?Bar?Button"/>?? 其中字體必須為Segoe UI Symbol.后面會講到原因。
修改Button基本布局 [plain]?view plaincopyprint? ?<ControlTemplate?TargetType="ButtonBase">?? ????????????????????<Grid?x:Name="RootGrid"?Width="100"?Height="100"?Margin="10">?? ????????????????????????<Grid?x:Name="BackgroundGrid"?Width="100"?Height="100"?Background="Purple"?Opacity=".6"></Grid>?? ????????????????????????<StackPanel?VerticalAlignment="Top"?Margin="0,12,0,11"?>?? ????????????????????????????<Grid?Width="100"?Height="50"?Margin="0,0,0,5"?HorizontalAlignment="Center">?? ????????????????????????????????<TextBlock?x:Name="BackgroundGlyph"?Text=""?FontFamily="Segoe?UI?Symbol"?FontSize="53.333"?Margin="-4,-19,0,0"?Foreground="{StaticResource?AppBarItemBackgroundThemeBrush}"/>?? ????????????????????????????????<ContentPresenter?x:Name="Content"?HorizontalAlignment="Center"?Margin="-1,-1,0,0"?VerticalAlignment="Center"/>?? ????????????????????????????</Grid>?? ????????????????????????????<TextBlock?? ????????????????????????????????x:Name="TextLabel"?? ????????????????????????????????Text="{TemplateBinding?AutomationProperties.Name}"?? ????????????????????????????????Foreground="{StaticResource?AppBarItemForegroundThemeBrush}"?? ????????????????????????????????Margin="0,0,2,0"?? ????????????????????????????????FontSize="11"?? ????????????????????????????????TextAlignment="Center"?? ????????????????????????????????Width="88"?? ????????????????????????????????MaxHeight="32"?? ????????????????????????????????TextTrimming="WordEllipsis"?? ????????????????????????????????HorizontalAlignment="Center"?? ????????????????????????????????Style="{StaticResource?BasicTextStyle}"/>?? ????????????????????????</StackPanel>?? ???????????????????????...?? ????????????????????</Grid>?? ????????????????</ControlTemplate>??
下面為每一個Button設計不同的樣式，以AppBar Button為例
[plain]?view plaincopyprint? <Style?x:Key="GlobalPageAppBarPageAppBarButtonStyle"?TargetType="ButtonBase"?BasedOn="{StaticResource?GlobalPageAppBarButtonStyle}">?? ????<Setter?Property="AutomationProperties.AutomationId"?Value="GlobalPageAppBarPageAppBarButton"/>?? ????<Setter?Property="AutomationProperties.Name"?Value="AppBar示例"/>?? ????<Setter?Property="Content"?Value=""/>?? </Style>?? 可以看到，我們只需要引用之前的基本屬性和布局，再根據Button的類型修改和添加相應的屬性就可以了。
AutomationProperties.Name 就是Button下方顯示的文字。
等一下，Content的Value怎么是空的？上面的那幅"圖片"又是什么？
其實上面的"圖片"是特殊字符，你可以在字符映射表里找到它們。Value里面的空白部分就是字符的值。 你也可以用類似“”這樣的字串來表示。 注意：字體必須為Segoe UI Symbol
至此，TopAppBar就創建完成了。
3.創建全局Frame 在GlobalPage.xaml里創建1個包含Frame的Grid，很簡單。
[plain]?view plaincopyprint? <Grid?x:Name="rootGrid">?? ????<Frame?x:Name="globalFrame"></Frame>?? </Grid>?? 后面就用這個Frame來進行頁面的導航。
下面來實現UI邏輯部分 我們程序的主頁面是HomePage，GlobalPage只是其中的一個橋梁。 1.當程序從App.xaml.cs啟動時，將頁面首先定位到GlobalPage [csharp]?view plaincopyprint? if?(!rootFrame.Navigate(typeof(GlobalPage)))?? {?? ????throw?new?Exception("Failed?to?create?initial?page");?? }??
2.加載完GlobalPage頁面時，再跳到HomePage。 [csharp]?view plaincopyprint? NavigateToPage(typeof(HomePage),?globalFrame);?? 這樣就可以在各個頁面調用TopAppBar了.
點擊下鼠標右鍵，看到TopAppBar了吧。
3.下面處理Button事件 很簡單，跳轉到不同的頁面即可。
[csharp]?view plaincopyprint? private?void?OnSettingPanelPageAppbarButtonClicked(object?sender,?RoutedEventArgs?e)?? {?? ????NavigateToPage(typeof(SettingPanelPage));?? }?? ?? private?void?NavigateToPage(Type?type)?? {?? ????NavigateToPage(type,?null);?? }?? ?? private?void?NavigateToPage(Type?type,object?obj)?? {?? ????globalFrame.Navigate(type,?obj);?? ????globalAppbar.IsOpen?=?false;????????????? }?? 最后別忘記關閉AppBar.
4.特殊效果 4.1當前頁面的對應的按鈕不可用 從當前頁面跳轉到自己本身的行為是沒有必要的，因此在顯示AppBar的時候將該Button設置為不可用。 你可能會問：Button是在GlobalPage中定義的，我們在HomePage怎樣去調用它，況且我怎么知道我現在在哪個頁面？
別忘了，TopAppBar是在GlobalPage定義的，并且我們設置了Loaded事件，當TopAppBar加載完畢時，會調用該方法。 我們可以通過GlobalPage中定義的Frame來獲取當前頁面，并通過當前頁面來獲取對應的Button。 [csharp]?view plaincopyprint? DisableButton?=?GetDisableButton(globalFrame.CurrentSourcePageType);??
[csharp]?view plaincopyprint? private?Button?GetDisableButton(Type?type)?? ????????{?? ????????????Button?button?=?null;?? ????????????if(type.Equals(typeof(HomePage)))?? ????????????{?? ????????????????button?=?homeAppbarButton;?? ????????????}?? ????????????else?if?(type.Equals(typeof(AppBarPage)))?? ????????????{?? ????????????????button?=?appbarPageAppbarButton;?? ????????????}?? ????????????else?if?(type.Equals(typeof(LocalDataPage)))?? ????????????{?? ????????????????button?=?localDataPageAppbarButton;?? ????????????}?? ????????????else?if?(type.Equals(typeof(SettingPanelPage)))?? ????????????{?? ????????????????button?=?settingPanelPageAppbarButton;?? ????????????}?? ????????????return?button;?? ????????}??
不能簡單的將該Button設置為不可用，因為下一次在其他頁面調出AppBar的時候，該Button就不能用了！
可以所有的Button設置為可用，然后再將該Button設置為不可用。那么怎樣去獲取所有Button呢？一個一個寫？
當然不是。雖然不能直接調用Button，但是我們可以遍歷TopAppBar中的元素來找到Button，畢竟Button是在AppBar中定義的。
[csharp]?view plaincopyprint? Grid?grid?=?(sender?as?AppBar).Content?as?Grid;?? ????????????foreach?(var?element?in?grid.Children)?? ????????????{?? ????????????????if?(element?is?StackPanel)?? ????????????????{?? ????????????????????StackPanel?panel?=?element?as?StackPanel;?? ????????????????????foreach?(var?subElement?in?panel.Children)?? ????????????????????{?? ????????????????????????Button?button?=?subElement?as?Button;?? ????????????????????????button.IsEnabled?=?true;?? ????????????????????}?? ????????????????}?? ????????????}?? ????????????DisableButton.IsEnabled?=?false;?? OK,完事了。
4.2把鼠標移到Button上時，Button會高亮。 效果圖:
很簡單，注意到之前Style里中的Opacity=".6"嗎？Button默認的透明度為60%，把鼠標移上去的時候將透明度設置為100%就OK啦。 Button基本布局省略的代碼片段。
[plain]?view plaincopyprint? ????????????????????????????????<VisualState?x:Name="PointerOver">?? ????????????????????????????????????<Storyboard>?? ????????????????????????????????????????<ObjectAnimationUsingKeyFrames?Storyboard.TargetName="BackgroundGrid"?Storyboard.TargetProperty="Opacity">?? ????????????????????????????????????????????<DiscreteObjectKeyFrame?KeyTime="0"?Value="1"/>?? ????????????????????????????????????????</ObjectAnimationUsingKeyFrames>?? ????????????????????????????????????????<ObjectAnimationUsingKeyFrames?Storyboard.TargetName="Content"?Storyboard.TargetProperty="Foreground">?? ????????????????????????????????????????????<DiscreteObjectKeyFrame?KeyTime="0"?Value="{StaticResource?AppBarItemPointerOverForegroundThemeBrush}"/>?? ????????????????????????????????????????</ObjectAnimationUsingKeyFrames>?? ????????????????????????????????????</Storyboard>?? ????????????????????????????????</VisualState>??
5.Snap模式處理 Snap模式是什么？我們暫時先不去管它。后面會詳細介紹。 調出TopAppBar試著把程序拖到邊上，你會發現TopAppBar有一大塊沒了。 廢話，當前窗體就這么大，TopAppBar顯示不下了。 針對這種情況，可以讓TopAppBar換種風格顯示，或者干脆不顯示。
對于后者可以在Loaded里加入如下代碼 [csharp]?view plaincopyprint? if?(ApplicationView.Value?==?ApplicationViewState.Snapped)?? {?? ????globalAppbar.IsOpen?=?false;?? ????return;?? }??
呼呼，一個小小的TopAppBar就寫了那么多。下篇文章將介紹TopAppBar的兄弟BottomAppBar.
- 顯示在頁面頂部的TopAppBar
- 顯示在頁面底部的BottomAppBar
在分析代碼之前先上一張程序運行效果圖(全屏模式)：
TopAppBar
一般來說，TopAppBar是為所有頁面服務的。因此只需要創建1個TopAppBar，然后在每個頁面調用即可。
創建TopAppbar 1.創建一個基本頁面GlobalPage.xaml 這個不用我教你了吧。 注意：在Metro程序中不要創建空白頁面。
2.在GlobalPage.xaml里創建1個TopAppbar，并添加幾個Button. [plain]?view plaincopyprint?
修改Button基本屬性 [plain]?view plaincopyprint?
修改Button基本布局 [plain]?view plaincopyprint?
等一下，Content的Value怎么是空的？上面的那幅"圖片"又是什么？
其實上面的"圖片"是特殊字符，你可以在字符映射表里找到它們。Value里面的空白部分就是字符的值。 你也可以用類似“”這樣的字串來表示。 注意：字體必須為Segoe UI Symbol
至此，TopAppBar就創建完成了。
3.創建全局Frame 在GlobalPage.xaml里創建1個包含Frame的Grid，很簡單。
[plain]?view plaincopyprint?
下面來實現UI邏輯部分 我們程序的主頁面是HomePage，GlobalPage只是其中的一個橋梁。 1.當程序從App.xaml.cs啟動時，將頁面首先定位到GlobalPage [csharp]?view plaincopyprint?
2.加載完GlobalPage頁面時，再跳到HomePage。 [csharp]?view plaincopyprint?
3.下面處理Button事件 很簡單，跳轉到不同的頁面即可。
[csharp]?view plaincopyprint?
4.特殊效果 4.1當前頁面的對應的按鈕不可用 從當前頁面跳轉到自己本身的行為是沒有必要的，因此在顯示AppBar的時候將該Button設置為不可用。 你可能會問：Button是在GlobalPage中定義的，我們在HomePage怎樣去調用它，況且我怎么知道我現在在哪個頁面？
別忘了，TopAppBar是在GlobalPage定義的，并且我們設置了Loaded事件，當TopAppBar加載完畢時，會調用該方法。 我們可以通過GlobalPage中定義的Frame來獲取當前頁面，并通過當前頁面來獲取對應的Button。 [csharp]?view plaincopyprint?
[csharp]?view plaincopyprint?
4.2把鼠標移到Button上時，Button會高亮。 效果圖:
很簡單，注意到之前Style里中的Opacity=".6"嗎？Button默認的透明度為60%，把鼠標移上去的時候將透明度設置為100%就OK啦。 Button基本布局省略的代碼片段。
[plain]?view plaincopyprint?
5.Snap模式處理 Snap模式是什么？我們暫時先不去管它。后面會詳細介紹。 調出TopAppBar試著把程序拖到邊上，你會發現TopAppBar有一大塊沒了。 廢話，當前窗體就這么大，TopAppBar顯示不下了。 針對這種情況，可以讓TopAppBar換種風格顯示，或者干脆不顯示。
對于后者可以在Loaded里加入如下代碼 [csharp]?view plaincopyprint?
呼呼，一個小小的TopAppBar就寫了那么多。下篇文章將介紹TopAppBar的兄弟BottomAppBar.
專欄網址：http://blog.csdn.net/zyc13701469860/article/details/8194090
總結
以上是生活随笔為你收集整理的Windows8 Metro开发 (02) : AppBar控件之TopAppBar的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Windows8 Metro开发 (03
- 下一篇： Windows8 Metro开发 (04