通過應用欄(AppBar)可以在需要時向使用者顯示各種應用指令。應用欄提供與使用者目前頁面或目前標明的内容相關的各種指令。預設情況下,應用欄處于隐藏狀态。當使用者沿螢幕邊緣從頂部或底部用手指劃動時會顯示應用欄,還可以通過單擊滑鼠右鍵顯示。在使用者啟動指令、點選應用界面或重複劃動手勢後,應用欄會自動消失。如果需要進行多選指令操作時,也可以以讓應用欄始終可見。
IC561717
建立應用欄
以下邊欄(BottomAppBar)為例,利用AppBar 控件編寫一個具有文本編輯功能的應用欄。
<Page.BottomAppBar>
<AppBar x:Name="BottomAppBar">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
<Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" Click="Edit_Button_Click"/>
<Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}"/>
<Button x:Name="Delete" Style="{StaticResource DeleteAppBarButtonStyle}"/>
</StackPanel>
<StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
<Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}"/>
</Grid>
</AppBar>
</Page.BottomAppBar>
從上面代碼可以看出編寫應用欄本身并沒有什麼複雜之處,而且應用欄中使用按鍵的風格在Win8 應用中也都提供了。在項目工程Common 檔案夾中找到StandardStyles.xaml 裡面有很多注釋掉的ButtonStyle,在裡面找到你需要的提出來即可。
編輯應用欄
接下來,我們在應用界面中添加兩個CheckBox:一個用來将應用欄固定,另一個用來新增或删除應用欄按鍵。
<StackPanel Orientation="Vertical" Grid.Row="1" Margin="120,50,0,0">
<CheckBox x:Name="IsSticky" Content="IsSticky" Click="IsSticky_Click" />
<CheckBox x:Name="AddHelpButton" Content="Add Help Button" Click="AddHelpButton_Click" />
</StackPanel>
image
兩個CheckBox 點選事件代碼如下,當應用欄IsSticky 屬性激活後,隻能通過劃動下邊螢幕或滑鼠右鍵将取消顯示。
private void IsSticky_Click(object sender, RoutedEventArgs e)
{
CheckBox cb = sender as CheckBox;
AppBar ap = pageRoot.FindName("BottomAppBar") as AppBar;
if (ap != null)
{
ap.IsSticky = (bool)cb.IsChecked;
}
}
private void AddHelpButton_Click(object sender, RoutedEventArgs e)
if ((bool)cb.IsChecked)
Button helpButton = new Button();
helpButton.Name = "Help";
helpButton.Style = App.Current.Resources["HelpAppBarButtonStyle"] as Style;
RightPanel.Children.Add(helpButton);
else
RightPanel.Children.RemoveAt(1);
screenshot_11132012_230534
源碼下載下傳
http://sdrv.ms/SSPQM2
本文轉自Gnie部落格園部落格,原文連結http://www.cnblogs.com/gnielee/archive/2012/11/13/windows8-app-develop-appbar.html,如需轉載請自行聯系原作者