应用栏

应用栏由工具栏和可能的其他视图组成。 公开一项或多项操作。

使用 appbar 的主要好处是能够自定义所有内容。 自定义选项，例如：

• 自定义应用栏高度。
• 包括没有限制或限制（边距、大小等）的任何内容。
• 透明的应用栏。
• 等等。

注意： AppBar 是一个跨平台视图，当原生导航栏达到其限制时会接管，例如添加自定义内容、使用布局定位等。

在 Xamarin.Forms 中，应用栏通常用于Shell.AppBar属性，它将应用栏作为固定高度的小部件放置在屏幕顶部。

API

接下来是一个包含 AppBar 属性和事件的列表。

特性

| 物业 | 类型 | 说明 |
|---------|:-------------:|:-------------:|
| 安置 | AppBarPlacement | AppBar 位置（顶部或底部）。 |
| 酒吧高度 | 双 | 定义应用栏高度。 |
| 酒吧背景 | 刷子 | 提供背景的画笔。 |
| 酒吧背景图片 | 图片来源 | 提供背景的 ImageSource。 |
| 条形文字颜色 | 颜色 | 文本中使用的颜色（标题等）。 |
| 导航图标 | 图片来源 | 提供导航图标（后退按钮等）的 ImageSource。 |
| 返回按钮标题 | 字符串 | 定义应用栏后退按钮标题。 |
| 边框颜色 | 颜色 | 应用栏边框颜色。 |
| 边框厚度 | 厚度 | 每边的应用栏边框宽度。 |
| 字体家族 | 字符串 | 应用栏文本中使用的字体系列。 |
| 字体属性 | 字体属性 | 应用栏文本中使用的字体属性。 |
| 字体大小 | 双 | 应用栏文本中使用的字体大小。 |
| 标题视图 | 查看 | 在应用栏中显示任何 Xamarin.Forms 视图。 |
| 返回命令 | ICommand | 执行导航返回的命令。 |
| 返回命令参数 | 对象 | 用于向后导航的命令参数。 |

活动

| 活动 | 说明 |
|---------|:-------------:|
| BackTapped | 用户导航返回时引发的事件。 |

场景

让我们看一些涵盖常见场景的示例。

简单的应用栏

让我们看一个基本的例子：

<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