Windows8 Metro开发 (03) : AppBar控件之BottomAppBar
生活随笔
收集整理的這篇文章主要介紹了
Windows8 Metro开发 (03) : AppBar控件之BottomAppBar
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
BottomAppBar
在介紹BottomAppBar之前還是先上張圖。
這次我們關注底部的AppBar.
上圖的AppBar分為左右2個部分。 左側是引用系統自帶的AppBar按鈕，右側是自定義的AppBar按鈕。其實寫法都一樣。
下面來看看布局文件 [plain]?view plaincopyprint? <Page.BottomAppBar>?? ????????<!--?ApplicationBar?-->?? ????????<AppBar?x:Name="BottomAppbar">?? ????????????<Grid>?? ????????????????<Grid.RowDefinitions>?? ????????????????????<RowDefinition?Height="Auto"/>?? ????????????????????<RowDefinition?Height="Auto"/>?? ????????????????</Grid.RowDefinitions>?? ????????????????<StackPanel?x:Name="systemAppBarPanel"?Orientation="Horizontal">?? ????????????????????<Button?x:Name="SkipBackAppBarButton"?Style="{StaticResource?SkipBackAppBarButtonStyle}"?Click="OnSkipBackAppBarButtonCilcked"?/>?? ????????????????????<Button?x:Name="SkipAheadAppBarButton"?Style="{StaticResource?SkipAheadAppBarButtonStyle}"?Click="OnSkipAheadAppBarButtonCilcked"/>?? ????????????????????<Line?Width="5"?Stroke="White"?Stretch="Fill"?Y2="{Binding?ActualHeight,?ElementName=systemAppBarPanel,?Mode=OneWay}"/>?? ????????????????????<Button?x:Name="PlayAppBarButton"?Style="{StaticResource?PlayAppBarButtonStyle}"?Click="OnPlayAppBarButtonCilcked"/>?? ????????????????????<Button?x:Name="PauseAppBarButton"?Style="{StaticResource?PauseAppBarButtonStyle}"?Click="OnPauseAppBarButtonCilcked"/>?? ????????????????????<Button?x:Name="StopAppBarButton"?Style="{StaticResource?StopAppBarButtonStyle}"?Click="OnStopAppBarButtonCilcked"/>?? ????????????????</StackPanel>?? ????????????????<StackPanel?x:Name="customAppBarPanel"?Orientation="Horizontal"?HorizontalAlignment="Right">?? ????????????????????<Button?x:Name="LoveAppBarButton"?Style="{StaticResource?LoveAppBarButtonStyle}"?Click="OnLoveAppBarButtonCilcked"/>?? ????????????????????<Button?x:Name="CalcAppBarButton"??Style="{StaticResource?CalcAppBarButtonStyle}"?Click="OnCalcAppBarButtonCilcked"/>?? ????????????????????<Button?x:Name="TelAppBarButton"??Style="{StaticResource?TelAppBarButtonStyle}"?Click="OnTelAppBarButtonCilcked"/>?? ????????????????????<Button?x:Name="GoodAppBarButton"??Style="{StaticResource?GoodAppBarButtonStyle}"?Click="OnGoodAppBarButtonCilcked"/>?? ????????????????????<Button?x:Name="LaughAppBarButton"??Style="{StaticResource?LaughAppBarButtonStyle}"?Click="OnLaughAppBarButtonCilcked"/>?? ????????????????</StackPanel>?? ????????????</Grid>?? ????????</AppBar>?? ????</Page.BottomAppBar>?? 里面每一個Button的樣式都是不同的。這些樣式是什么呢？先來看看系統的樣式。
以SkipBackAppBarButtonStyle為例：
[html]?view plaincopyprint? <Style?x:Key="SkipBackAppBarButtonStyle"?TargetType="ButtonBase"?BasedOn="{StaticResource?AppBarButtonStyle}">?? ????<Setter?Property="AutomationProperties.AutomationId"?Value="SkipBackAppBarButton"/>?? ????<Setter?Property="AutomationProperties.Name"?Value="Skip?Back"/>?? ????<Setter?Property="Content"?Value=""/>?? </Style>?? SkipBackAppBarButton是以AppBarButtonStyle為基本樣式的一個AppBar按鈕，在這里我們只需注意最后2個Setter.
<Setter Property="AutomationProperties.Name" Value="Skip Back"/>用來顯示按鈕下面的字串
<Setter Property="Content" Value=""/>?用來顯示按鈕中間圓圈里的字符串，再次強調這個不是“圖片”。
看到這里，你們也許知道了自定義按鈕該怎樣定義了。代碼還是貼下吧。
[html]?view plaincopyprint? ????<Style?x:Key="LoveAppBarButtonStyle"?TargetType="ButtonBase"?BasedOn="{StaticResource?AppBarButtonStyle}">?? ????????<Setter?Property="AutomationProperties.AutomationId"?Value="LoveAppBarButton"/>?? ????????<Setter?Property="AutomationProperties.Name"?Value="愛心"/>?? ????????<Setter?Property="Content"?Value=""/>?? ????</Style>?? 每一個按鈕的事件都很簡單，就是彈出一個相應的對話框，這里就省略了。
Snap模式處理 同TopAppBar一樣，BottomAppBar在Snap模式下的時候需要進行UI轉換。
Snap模式后面會詳細介紹。這里先省略概念。
如果不做處理，當你把程序拖到側邊欄時，你會發現此時BottomAppBar上面的按鈕只剩下了3個!并且按鈕上面的文字顯示不全。 因此我們需要對BottomAppBar的布局做下調整。當程序拖到側邊欄時，將左右兩側的按鈕分兩排顯示，縮小按鈕尺寸并且隱去按鈕下面文字。 不過系統并沒有定義這種按鈕的樣式，需要我們自己來實現： 創建文件AppBarPageStyle.xaml，在StandardStyles.xaml里找到AppBarButtonStyle，將其復制到AppBarPageStyle.xaml中，并更名為
AppBarButtonSnapStyle,修改Template屬性。
[plain]?view plaincopyprint? <ControlTemplate?TargetType="ButtonBase">?? ???????????????????<Grid?x:Name="RootGrid"?Width="60"?Background="Transparent">?? ???????????????????????<StackPanel?VerticalAlignment="Top"?Margin="0,12,0,11">?? ???????????????????????????<Grid?Width="40"?Height="40"?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}"/>?? ???????????????????????????????<TextBlock?x:Name="OutlineGlyph"?Text=""?FontFamily="Segoe?UI?Symbol"?FontSize="53.333"?Margin="-4,-19,0,0"/>?? ???????????????????????????????<ContentPresenter?x:Name="Content"?HorizontalAlignment="Center"?Margin="-1,-1,0,0"?VerticalAlignment="Center"/>?? ???????????????????????????</Grid>?? ???????????????????????</StackPanel>?? ????????????????????...?? ???????????????????</Grid>?? ???????????????</ControlTemplate>?? 然后定義相對應的Snap AppBar按鈕
[plain]?view plaincopyprint? <Style?x:Key="LoveAppBarButtonSnapStyle"?TargetType="ButtonBase"?BasedOn="{StaticResource?AppBarButtonSnapStyle}">?? ????<Setter?Property="Content"?Value=""/>?? </Style>?? 在AppBarPage頁面進入Snap模式的時候，如果在XAML里面注冊狀態監聽，程序會根據XAML代碼變換UI布局。
[plain]?view plaincopyprint? <VisualState?x:Name="Snapped">?? ????????????????????<Storyboard>?? ????????????????????????<ObjectAnimationUsingKeyFrames?Storyboard.TargetName="backButton"?Storyboard.TargetProperty="Style">?? ????????????????????????????<DiscreteObjectKeyFrame?KeyTime="0"?Value="{StaticResource?SnappedBackButtonStyle}"/>?? ????????????????????????</ObjectAnimationUsingKeyFrames>?? ????????????????????????<ObjectAnimationUsingKeyFrames?Storyboard.TargetName="pageTitle"?Storyboard.TargetProperty="Style">?? ????????????????????????????<DiscreteObjectKeyFrame?KeyTime="0"?Value="{StaticResource?SnappedPageHeaderTextStyle}"/>?? ????????????????????????</ObjectAnimationUsingKeyFrames>?? ????????????????????????<ObjectAnimationUsingKeyFrames?Storyboard.TargetName="customAppBarPanel"??Storyboard.TargetProperty="(Grid.Row)">?? ????????????????????????????<DiscreteObjectKeyFrame?KeyTime="0"?Value="1"/>?? ????????????????????????</ObjectAnimationUsingKeyFrames>?? ????????????????????????<ObjectAnimationUsingKeyFrames?Storyboard.TargetName="customAppBarPanel"??Storyboard.TargetProperty="HorizontalAlignment">?? ????????????????????????????<DiscreteObjectKeyFrame?KeyTime="0"?Value="Left"/>?? ????????????????????????</ObjectAnimationUsingKeyFrames>?? ?? ????????????????????????<!--appbar?button-->?? ????????????????????????<ObjectAnimationUsingKeyFrames?Storyboard.TargetName="SkipBackAppBarButton"?Storyboard.TargetProperty="Style">?? ????????????????????????????<DiscreteObjectKeyFrame?KeyTime="0"?Value="{StaticResource?SkipBackAppBarButtonSnapStyle}"/>?? ????????????????????????</ObjectAnimationUsingKeyFrames>?? ?? ????????????????????????<ObjectAnimationUsingKeyFrames?Storyboard.TargetName="SkipAheadAppBarButton"?Storyboard.TargetProperty="Style">?? ????????????????????????????<DiscreteObjectKeyFrame?KeyTime="0"?Value="{StaticResource?SkipAheadAppBarButtonSnapStyle}"/>?? ????????????????????????</ObjectAnimationUsingKeyFrames>?? ?? ????????????????????????<ObjectAnimationUsingKeyFrames?Storyboard.TargetName="PlayAppBarButton"?Storyboard.TargetProperty="Style">?? ????????????????????????????<DiscreteObjectKeyFrame?KeyTime="0"?Value="{StaticResource?PlayAppBarButtonSnapStyle}"/>?? ????????????????????????</ObjectAnimationUsingKeyFrames>?? ?? ????????????????????????<ObjectAnimationUsingKeyFrames?Storyboard.TargetName="PauseAppBarButton"?Storyboard.TargetProperty="Style">?? ????????????????????????????<DiscreteObjectKeyFrame?KeyTime="0"?Value="{StaticResource?PauseAppBarButtonSnapStyle}"/>?? ????????????????????????</ObjectAnimationUsingKeyFrames>?? ?? ????????????????????????<ObjectAnimationUsingKeyFrames?Storyboard.TargetName="StopAppBarButton"?Storyboard.TargetProperty="Style">?? ????????????????????????????<DiscreteObjectKeyFrame?KeyTime="0"?Value="{StaticResource?StopAppBarButtonSnapStyle}"/>?? ????????????????????????</ObjectAnimationUsingKeyFrames>?? ????????????????????????????????????????????????? ????????????????????????<ObjectAnimationUsingKeyFrames?Storyboard.TargetName="LoveAppBarButton"??Storyboard.TargetProperty="Style">?? ????????????????????????????<DiscreteObjectKeyFrame?KeyTime="0"?Value="{StaticResource?LoveAppBarButtonSnapStyle}"/>?? ????????????????????????</ObjectAnimationUsingKeyFrames>?? ????????????????????????<ObjectAnimationUsingKeyFrames?Storyboard.TargetName="CalcAppBarButton"??Storyboard.TargetProperty="Style">?? ????????????????????????????<DiscreteObjectKeyFrame?KeyTime="0"?Value="{StaticResource?CalcAppBarButtonSnapStyle}"/>?? ????????????????????????</ObjectAnimationUsingKeyFrames>?? ????????????????????????<ObjectAnimationUsingKeyFrames?Storyboard.TargetName="TelAppBarButton"??Storyboard.TargetProperty="Style">?? ????????????????????????????<DiscreteObjectKeyFrame?KeyTime="0"?Value="{StaticResource?TelAppBarButtonSnapStyle}"/>?? ????????????????????????</ObjectAnimationUsingKeyFrames>?? ????????????????????????<ObjectAnimationUsingKeyFrames?Storyboard.TargetName="GoodAppBarButton"??Storyboard.TargetProperty="Style">?? ????????????????????????????<DiscreteObjectKeyFrame?KeyTime="0"?Value="{StaticResource?GoodAppBarButtonSnapStyle}"/>?? ????????????????????????</ObjectAnimationUsingKeyFrames>?? ????????????????????????<ObjectAnimationUsingKeyFrames?Storyboard.TargetName="LaughAppBarButton"??Storyboard.TargetProperty="Style">?? ????????????????????????????<DiscreteObjectKeyFrame?KeyTime="0"?Value="{StaticResource?LaughAppBarButtonSnapStyle}"/>?? ????????????????????????</ObjectAnimationUsingKeyFrames>?? ????????????????????</Storyboard>?? ????????????????</VisualState>?? Snap模式下的BottomAppBar如下圖所示：
注意： 1.別忘了在App.xaml中引用AppBarPageStyle.xaml
[html]?view plaincopyprint? <ResourceDictionary?Source="Common/StandardStyles.xaml"/>?? <ResourceDictionary?Source="Pages/Home/GlobalPageStyle.xaml"/>?? <ResourceDictionary?Source="Pages/Home/HomePageStyle.xaml"/>?? <ResourceDictionary?Source="Pages/01-AppBar/AppBarPageStyle.xaml"/>?? 2.AppBar控件的功能(應該是所有控件)需要符合微軟制定的規范，不能隨便制定。具體內容可參考MSDN。
這次我們關注底部的AppBar.
上圖的AppBar分為左右2個部分。 左側是引用系統自帶的AppBar按鈕，右側是自定義的AppBar按鈕。其實寫法都一樣。
下面來看看布局文件 [plain]?view plaincopyprint?
Snap模式處理 同TopAppBar一樣，BottomAppBar在Snap模式下的時候需要進行UI轉換。
Snap模式后面會詳細介紹。這里先省略概念。
如果不做處理，當你把程序拖到側邊欄時，你會發現此時BottomAppBar上面的按鈕只剩下了3個!并且按鈕上面的文字顯示不全。 因此我們需要對BottomAppBar的布局做下調整。當程序拖到側邊欄時，將左右兩側的按鈕分兩排顯示，縮小按鈕尺寸并且隱去按鈕下面文字。 不過系統并沒有定義這種按鈕的樣式，需要我們自己來實現： 創建文件AppBarPageStyle.xaml，在StandardStyles.xaml里找到AppBarButtonStyle，將其復制到AppBarPageStyle.xaml中，并更名為
AppBarButtonSnapStyle,修改Template屬性。
[plain]?view plaincopyprint?
注意： 1.別忘了在App.xaml中引用AppBarPageStyle.xaml
[html]?view plaincopyprint?
總結
以上是生活随笔為你收集整理的Windows8 Metro开发 (03) : AppBar控件之BottomAppBar的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ASP.NET中验证控件的使用
- 下一篇： Windows8 Metro开发 (02