AppBar

Uma barra de aplicativos consiste em uma barra de ferramentas e potencialmente outras visualizações. Exponha uma ou mais ações.

O principal benefício de usar a barra de aplicativos é poder personalizar tudo. Opções de personalização como:

• Altura da barra de aplicativos personalizada.
• Inclua qualquer conteúdo sem restrições ou limitações (margens, tamanho, etc.).
• Barra de aplicativos transparente.
• etc.

NOTA: AppBar é uma visualização de plataforma cruzada que assume quando a barra de navegação nativa atinge seus limites, como adicionar conteúdo personalizado, posicionamento com layouts etc.

No Xamarin.Forms, a barra de aplicativos é normalmente usada na propriedade Shell.AppBar , que coloca a barra de aplicativos como um widget de altura fixa na parte superior da tela.

API

Em seguida, uma lista com as propriedades e eventos do AppBar.

Propriedades

| Propriedade | Tipo | Descrição |
|----------|:-------------:|:-------------:|
| Colocação | AppBarPlacement | O posicionamento do AppBar (superior ou inferior). |
| BarAltura | duplo | Defina a altura da barra de aplicativos. |
| BarBackground | Escova | Um pincel que fornece o plano de fundo. |
| BarBackgroundImage | ImageSource | Um ImageSource que fornece o plano de fundo. |
| BarTextColor | Cor | A cor utilizada nos textos (título, etc.). |
| Ícone de navegação | ImageSource | Um ImageSource que fornece o ícone de navegação (botão voltar, etc). |
| BackButtonTitle | seqüência | Defina o título do botão Voltar da barra de aplicativos. |
| Cor da Borda | Cor | A cor da borda da barra de aplicativos. |
| Espessura da Borda | Espessura | A largura da borda da barra de aplicativos em todos os lados. |
| FontFamily | seqüência | A família de fontes usada nos textos da barra de aplicativos. |
| FontAttributes | FontAttributes | Os atributos de fonte usados ​​nos textos da barra de aplicativos. |
| FontSize | duplo | O tamanho da fonte usada nos textos da barra de aplicativos. |
| TitleView | Ver | Exiba qualquer exibição Xamarin.Forms na barra de aplicativos. |
| VoltarComando | IComando | Comando executado navegando de volta. |
| BackCommandParameter | objeto | O parâmetro de comando usado na navegação de volta. |

Eventos

| Evento | Descrição |
|----------|:-------------:|
| BackTopped | Evento que é gerado quando o usuário navega de volta. |

Cenários

Vamos ver alguns exemplos cobrindo cenários comuns.

Barra de aplicativos simples

Vejamos um exemplo básico:

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

Barra de aplicativos personalizada

Personalizando a aparência usando uma barra transparente com altura personalizada e conteúdo personalizado (TitleView).

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

Canal

Uma barra de aplicativos superior (posicionamento padrão) exibe a navegação e as ações na parte superior das telas dos dispositivos móveis.

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

Uma barra de aplicativos inferior exibe a navegação e as ações na parte inferior das telas dos dispositivos móveis.

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

Usando estilos

Pode personalizar a aparência do conteúdo da guia, faixa de guia, item de guia etc. usando estilos XAML ou CSS .

Usando XAML:

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

Usando CSS:

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

Dificuldade: Médio

Mais Informações

Baseado em https://github.com/xamarin/Xamarin.Forms/issues/10774