xamarin-forms-toolbar

Xamarin.Forms – ToolBar

Manda Galera

Vamos falar um pouco sobre um componente interessante que as 3 plataformas possuem e que muitas vezes é esquecido e pode ser muito útil. A Toolbar.

O Android e o iOS implementam a Toolbar no topo da UI já o Windows Phone usa a mesma na parte inferior da UI. Muitos Apps utilizam ela para inserir acesso as Configurações ou ações simples e que não seria necessário inserir botões no meio da tela que está sendo visualizada.

Nos exemplos abaixo temos o WhatsApp, podemos observar que temos as opções de Pesquisa, Nova conversa, Novo Grupo, Editar e os famosos “…”

Com o Xamarin nós fazemos isso de forma simples e rápida.

 

Isso deve ser feito na página que for necessário ter a ação.

 

Podemos fazer de duas formas, no Code Behind ou no XAML segue o exemplo das duas formas logo abaixo.

 

Nó código podemos fazer assim para um item na toolbar que terá apenas Texto:

ToolbarItems.Add(new ToolbarItem {
	Name = "OK",
	Order = ToolbarItemOrder.Primary,
	Command = new Command(() => Navigation.PushAsync(new LaunchPage()))
});

E Assim para um que ira possuir Ícone:

ToolbarItems.Add(new ToolbarItem {
	Name = "OK",
	Icon = "ok.png"
	Order = ToolbarItemOrder.Primary,
	Command = new Command(() => Navigation.PushAsync(new LaunchPage()))
});

 

Para o XAML devemos colocar algumas Tags, além de implementar o Evento Activated do ToolBarItem. Ficaria assim

 

XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="ToolbarExemplo.Views.MainView">
 
 
  
  
  
 
 

 

CS:

namespace ToolbarExemplo.Views
 
public class MainView : Page{
 
public MainView(){
  InitializeComponents();
}
void OnClick(object sender, EventArgs e)
  {
   ToolbarItem tbi = (ToolbarItem) sender;
   this.DisplayAlert("Clique acionado", tbi.Name,"Entendi");
  }
}
Xamarin.Forms – ToolBar
5 (100%) 1 voto

Rafael Moura

Desenvolvedor .NET, mais de 5 anos de experiência, apaixonado por tecnologia, Xamarin Student Partner Regional Lead Central/South America, Xamarin Comunity Speaker, Xamarin Certified Mobile Developer e Windows Phone Developer.

2 comentários em “Xamarin.Forms – ToolBar

  1. Bom artigo meu caro. Vale um acréscimo, no caso do Forms atuando no iOS, quando combinamos dois itens em uma Toolbar, a utilização da propriedade Order, fará o mesmos se disporem de uma forma diferente do normal (embutida dentro da toolbar do iOS), as imagens referentes aos botões, ficaram abaixo da toolbar. Para um caso de “Paginador”, configura um layout interessante

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

%d blogueiros gostam disto: