Windows 8.1は、開発者にアプリケーションでツールバーを作成する新しい可能性を提供します。 これらの可能性を考慮し、 前の記事のアプリケーションのナビゲーションバーとアクションバーを作成します。
アプリケーションのツールバー（AppBar）は、画面の上下に配置できます。 これの典型的な例は、Windowsストアです。
上部のナビゲーションバーにはカテゴリのリストが含まれ、アプリケーションをナビゲートするために使用されます。
下のペインには、その特定のページまたは強調表示されたアイテムに関連するアクションが含まれています。
理論を掘り下げることはせず、単純にアプリケーションにパネルを追加しようとします。
アプリケーションナビゲーションバー（TopAppBar）
簡単なナビゲーション
アプリケーション画面の上部に配置され、2つのボタンを含むナビゲーションバーを作成しましょう。
- メインページに戻ります。
- ショッピングカートに移動します。
実装に進みましょう。
1. Visual Studio 2012で以前の記事のアプリケーションを開くか、新しい記事を作成します。
2.ソリューションエクスプローラーで、 HubPage.xamlメイン画面を開き、 Pageタグ内に次のコードを追加します。
<Page.TopAppBar> <AppBar> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="100" /> </Grid.ColumnDefinitions> <AppBarButton x:Name="HomeAppBarButton" Grid.Column="0" Icon="Home" Label=" " Click="HomeAppBarButton_Click" /> <AppBarButton x:Name="ShoppingCartAppBarButton" Grid.Column="1" Icon="Shop" Label="" Click="ShoppingCartAppBarButton_Click" /> </Grid> </AppBar> </Page.TopAppBar>
このパネルには、テーブルと2つのAppBarButtonボタンが含まれています。 AppBarButtonは、ツールバー用に作成されたボタンの子孫です。
たとえば、このボタンには、アイコンとして、 標準セットから美しいアイコンを選択する機能があります。
AppBarButtonを使用すると、既製のアイコンや自分で描いたアイコンだけでなく、フォントを使用したり、アイコンをドットで描いて独自のスタイルを作成することもできます。
3.次のコードを、メイン画面に切り替えるボタンのHomeAppBarButton_Clickイベントハンドラーに追加します。
private void HomeAppBarButton_Click(object sender, RoutedEventArgs e) { this.Frame.Navigate(typeof(HubPage)); }
4.アプリケーションを起動します。
5.写真で見ることができる彼の仕事の結果。
デフォルトでは、ナビゲーションバーは最小化されており、表示されません。 彼女を見るには、次のことが必要です。
- 画面の任意の場所を右クリックします（マウスを使用する場合）。
- 上から下にスワイプします（タッチデバイスを使用している場合）。
セクションナビゲーション
実際、 AppBarButtonのみを使用する必要はなく、ツールバーの他のコントロールを使用できます。
次に、ページコードを変更し、製品カタログのセクション間のナビゲーションを整理します。
実装に進みましょう。
1.ソリューションエクスプローラーで、 HubPage.xamlメイン画面を開き、 Page.TopAppBarタグの内容を置き換えます。
<Page.TopAppBar> <AppBar> <Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width="350" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0" > <Grid Background="#3D3D3D" > <Grid.ColumnDefinitions> <ColumnDefinition Width="90" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <AppBarButton x:Name="HomeAppBarButton" Grid.Column="0" Icon="Home" Click="HomeAppBarButton_Click" Margin="0,15,0,0" /> <HyperlinkButton x:Name="CategoryButton" Grid.Column="1" Content=" " Click="HomeAppBarButton_Click" Foreground="White" /> </Grid> <GridView x:Name="NavigationGridView" ItemsSource="{Binding NavigationItems}" Background="#616161" BorderBrush="#3D3D3D" BorderThickness="0,1,0,0"> <GridView.ItemTemplate> <DataTemplate> <HyperlinkButton x:Name="NavigationItem" Content="{Binding Title}" Click="NavigationItem_Click" CommandParameter="{Binding UniqueId}" Margin="90,0,26,0" Foreground="White" /> </DataTemplate> </GridView.ItemTemplate> </GridView> </StackPanel> <AppBarButton x:Name="ShoppingCartAppBarButton" Grid.Column="1" Icon="Shop" Label="" Click="ShoppingCartAppBarButton_Click" HorizontalAlignment="Right" /> </Grid> </AppBar> </Page.TopAppBar>
これで、ページにはデータソースからのリンクを表示するGridViewテーブルがあります。 データソースを入力し、カテゴリページでナビゲーションを作成します。
2.ソリューションエクスプローラーで、 HubPage.xaml.csファイルを開き、コードをnavigationHelper_LoadStateメソッドの先頭に追加して、製品カタログのセクションを取得し、データソースに入力します。
private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e) { var sampleNavigation = await SampleDataSource.GetGroupsAsync(); this.DefaultViewModel["NavigationItems"] = sampleNavigation; //… }
3. HubPage.xaml.csファイルで 、自動生成されたNavigationItem_Clickメソッドを見つけて、次のコードに置き換えます。
private void NavigationItem_Click(object sender, RoutedEventArgs e) { this.Frame.Navigate(typeof(SectionPage), (sender as HyperlinkButton).CommandParameter); }
4.アプリケーションを起動し、ツールバーを開きます。
ご覧のとおり、データソースからのリンクを表示し、セクション間を移動するテーブルがツールバーにあります。
アプリケーションアクションバー（BottomAppBar）
次に、アプリケーションのアクションバーを追加します。 画面の下部に配置され、いくつかのボタンが含まれます。
- カートに追加;
- ゴミ箱から取り出します。
- 設定
- お気に入りに追加;
- タイルに固定します。
実装に進みましょう。
1.ソリューションエクスプローラーで、 HubPage.xamlファイルを開きます。
2. ページタグ内のページの最後に次のコードを追加します。
<Page.BottomAppBar > <CommandBar > <CommandBar.PrimaryCommands> <AppBarButton x:Name="AddAppBarButton" IsCompact="True" Label=" " Icon="Add" /> <AppBarButton x:Name="DeleteAppBarButton" IsCompact="True" Label="" Icon="Delete" /> <AppBarSeparator IsCompact="True" /> <AppBarButton x:Name="SettingAppBarButton" IsCompact="True" Label="" Icon="Setting" /> </CommandBar.PrimaryCommands> <CommandBar.SecondaryCommands> <AppBarToggleButton x:Name="FavoriteAppBarButton" IsCompact="True" Label="" Checked="FavoriteAppBarButton_Checked" Unchecked="FavoriteAppBarButton_Unchecked"> <AppBarToggleButton.Icon> <SymbolIcon Symbol="Favorite" /> </AppBarToggleButton.Icon> </AppBarToggleButton> <AppBarButton x:Name="PinAppBarButton" IsCompact="True" Label=" " Icon="Pin" /> </CommandBar.SecondaryCommands> </CommandBar> </Page.BottomAppBar>
CommandBarをコンテナとして使用して、 ボタンを追加します。
主な最も重要なアクションがあります-これは、バスケットに製品を追加し、バスケットからそれを削除することです。また、たとえば、お気に入りに製品を追加するなど、追加のアクションがあります。
PrimaryCommandsセクションに重要なアクションを追加します-それらはパネルの右側に表示されます。
SecondaryCommandsセクションのセカンダリアクションは、パネルの左側に表示されます。
アクションはAppBarSeparator区切り文字によって論理的に分離できます。
通常のボタンに加えて、2つのAppBarToggleButton状態を持つボタンを使用できます。たとえば、お気に入りの追加と削除の場合に使用できます。
すべての要素に指定したIsCompactプロパティを使用すると、画面に収まらない場合、たとえばボタンラベルが低解像度で非表示になる場合に、不必要に非表示にできます。
3.アプリケーションを起動します。
4.任意の場所またはアイテムを右クリックします。
上部のナビゲーションバーに加えて、アクションバーが画面に表示されます。
5.アプリケーションでウィンドウを縮小し、パネルがコンパクトモードになる様子を確認します。
6.「お気に入り」ボタンをクリックすると、その状態が記憶されます。
おわりに
今日は以上です。 ツールバーを作成するための新しい可能性に精通し、さまざまな標準コントロールを使用してアプリケーションのナビゲーションパネルとアクションパネルを実装する方法も学びました。
今後の記事では、簡単な例を使用してWindows 8.1アプリケーションの開発を引き続き理解していきます。
結果のアプリケーションは、次のリンクからSkyDriveにダウンロードできます： http : //sdrv.ms/1hJIudI
便利な資料
AppBarコントロール
AppBarの標準アイコンセット
クイックスタートガイド：アプリケーションパネルボタンの追加