AppBar

アプリバーは、ツールバーと場合によっては他のビューで構成されます。 1つ以上のアクションを公開します。

appbarを使用する主な利点は、すべてをカスタマイズできることです。 次のようなカスタマイズオプション：

• カスタムアプリバーの高さ。
• 制限や制限（マージン、サイズなど）のないコンテンツを含めます。
• 透明なappbar。
• 等。

注： AppBarは、カスタムコンテンツの追加、レイアウトによる配置など、ネイティブナビゲーションバーが制限に達したときに引き継ぐクロスプラットフォームビューです。

Xamarin.Formsでは、アプリバーは通常Shell.AppBarプロパティで使用され、画面の上部に固定高さのウィジェットとしてアプリバーを配置します。

API

次に、AppBarのプロパティとイベントのリスト。

プロパティ

| プロパティ| タイプ| 説明|
| ---------- |：-------------：|：-------------：|
| 配置| AppBarPlacement | AppBarの配置（上または下）。 |
| BarHeight | ダブル| アプリバーの高さを定義します。 |
| BarBackground | ブラシ| 背景を提供するブラシ。 |
| BarBackgroundImage | ImageSource | 背景を提供するImageSource。 |
| BarTextColor | 色| テキストで使用されている色（タイトルなど）。 |
| NavigationIcon | ImageSource | ナビゲーションアイコン（戻るボタンなど）を提供するImageSource。 |
| BackButtonTitle | 文字列| アプリバーの戻るボタンのタイトルを定義します。 |
| BorderColor | 色| アプリバーの境界線の色。 |
| BorderThickness | 厚さ| すべての側のappbar境界線の幅。 |
| FontFamily | 文字列| アプリバーのテキストで使用されるフォントファミリ。 |
| FontAttributes | FontAttributes | アプリバーのテキストで使用されるフォント属性。 |
| FontSize | ダブル| アプリバーのテキストで使用されるフォントサイズ。 |
| TitleView | 表示| アプリバーにXamarin.Formsビューを表示します。 |
| BackCommand | ICommand | コマンドが実行され、ナビゲートしました。 |
| BackCommandParameter | オブジェクト| コマンドパラメータは、ナビゲートを使用しました。 |

イベント

| イベント| 説明|
| ---------- |：-------------：|
| バックタップ| ユーザーが戻ったときに発生するイベント。 |

シナリオ

一般的なシナリオをカバーするいくつかのサンプルを見てみましょう。

シンプルなアプリバー

基本的な例を見てみましょう。

<Shell>
     <Shell.AppBar>
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

カスタムアプリバー

カスタムの高さとカスタムのコンテンツ（TitleView）を備えた透明なバーを使用して外観をカスタマイズします。

<Shell>
     <Shell.AppBar>
        <AppBar  
            BarHeight="120"
            BarBackgroundColor="Transparent">
            <AppBar.TitleView>
            ...
            </AppBar.TitleView>
        </AppBar>
     </Shell.AppBar>
    ...
</Shell>

配置

上部のアプリバー（デフォルトの配置）は、モバイル画面の上部にナビゲーションとアクションを表示します。

<Shell>
     <Shell.AppBar
          Placement="Top">
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

下部のアプリバーには、モバイル画面の下部にナビゲーションとアクションが表示されます。

<Shell>
     <Shell.AppBar
          Placement="Bottom">
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

スタイルの使用

XAMLスタイルまたはCSSを使用して、タブコンテンツ、タブストリップ、タブアイテムなどの外観をカスタマイズできます。

XAMLの使用：

<Style
    x:Key="AppBarStyle"
    TargetType="AppBar">
    <Setter
        Property="BarHeight"
        Value="120" />
    <Setter
        Property="BarBackgroundColor"
        Value="Transparent" />
</Style>

CSSの使用：

.appBarStyle {
  background: transparent;
  height: 120px;
}

難易度：中

詳しくは

https://github.com/xamarin/Xamarin.Forms/issues/10774に基づく