¡Adquiere el Máster en Xamarin Forms!
Antes de iniciar, te invito a visitar la página de la Membresía de mi academia, donde podrás encontrar:
– Cursos y talleres de Xamarin
– Cursos y talleres en C#
– Cursos y talleres de Blazor
– Cursos y talleres de ASP.NET
– Cursos y talleres en muchas otras tecnologías
¡Todo al precio más bajo posible por tiempo limitado!
Si en tu aplicación tipo Xamarin.Forms, quieres implementar botones tipo Barra de herramientas (con un ToolbarItem) como el que ves en las siguientes imágenes:
En android:
En UWP:
sigue esta sencilla receta.
Pasos para agregar un ToolbarItem en tu aplicación:
1.- Crea una nueva página tipo Forms Blank Content Page (Lo puedes hacer a través de XAML o de código C#:
2.- Agrega una imagen que quieras que sea el ícono a desplegar en la barra de herramientas, ya en una entrada anterior vimos cómo agregar imágenes en nuestros proyectos. En mi caso, agregaré una imagen llamada settings.png:
3.- Si queremos hacerlo a través de código XAML, debemos tomar en cuenta que cada tipo de página (ContentPage, TabbedPage, etc), tiene una propiedad llamada ToolbarItems. Es dentro de esta propiedad, donde definiremos cuáles son las opciones que queremos que formen parte de nuestra barra de herramientas. En código XAML sería, en caso de tener como tipo de página una ContentPage:
<ContentPage.ToolbarItems>
<ToolbarItem Icon="settings.png" Text="Hola!"/>
</ContentPage.ToolbarItems>Si te das cuenta, podemos especificar si queremos colocar un texto como parte del ToolbarItem, además de una imagen ó ícono.
4.- Si queremos hacerlo a través de código C#, bastará con llevar a cabo una sobreescritura el método “OnAppearing”, y agregar una instancia de ToolbarItem a nuestra colección de ToolbarItems de nuestra página actual, de la siguiente forma:
protected override void OnAppearing()
{
this.ToolbarItems.Add(new ToolbarItem
{
Text = "¡Desde C#!",
Icon = "settings.png"
});
base.OnAppearing();
}Con esto, tendremos listos nuestros ToolbarItems, los cuales según este ejemplo, se verán de la siguiente forma:
Recuerda que el código de las recetas lo puedes encontrar en el siguiente enlace:
¡Saludos!