Wilson Vargas
Wilson Vargas

Un programador enamorado de su código.

Wilson Vargas
Author

Un chico con una gran experiencia en el arte del desarrollo software. Desarrollador de aplicaciones de móviles, especialista en ASP.Net, Xamarin y tecnologías de computo en la Nube en especial Azure.

Share


Suscribete


Mantente al tanto de mis nuevos artículos

Tags


Featured on Planet Xamarin badge

Twitter


Personalizando el icono de un MasterDetail Page Xamarin.Forms

Wilson VargasWilson Vargas

Hola de nuevo, hace unas semanas escribí un artículo sobre un NavigationPage personalizado, para ser más específico que el fondo de la barra de navegación sea gradiente. Aquí expliqué como usar los Custom Renderers y una definición bien básica de cómo funciona y en qué casos usarlos.
Si quieres leerle el artículo anterior lo puedes hacer aquí:

Personalizando un NavigationBar en Xamarin.Forms

En este articulo voy a mostrar cómo cambiar el icono de un control Master-Detail Page. Un control de este tipo es muy usado desde hace bastante tiempo atrás, es básicamente un menú, el menú hamburguesa…

Este menú está presente en muchas aplicaciones móviles y su funcionamiento radica en un menú desplegable de izquierda a derecha accionado por un botón en la parte superior izquierda (algunas veces derecha) del teléfono.

xamarin_master_detail_page-1

Lo que hoy haremos es personalizar el botón que muestra el menú, la verdad no sé si esto sea un bug en Xamarin Forms o esté configurado así, pero en teoría podríamos modificar la imagen de este botón desde nuestro archivo XAML en nuestro proyecto compartido.

En fin, si tú sabes cuál es la causa de este extraño caso no dudes en dejar un comentario para poder actualizar este artículo.

Manos al código

Empezaremos creando un MasterDetailPage de la siguiente forma:

imagenumber1

Recuerda que este no es un tutorial de cómo crear un menú MasterDetail sino de como personalizar su icono así que voy a explicar cosas que tal vez no entiendas si estás iniciando con Xamarin Forms. Recuerda que puedes revisar el código de este ejemplo en Github si quiere saber cómo se ha creado este ejemplo.

Al tener creado nuestro control MasterDetail ahora podemos personalizar nuestro icono.

Android

En Android tienes que crear un Custom Renderer que extienda de MasterDetailPageRenderer e invocar a un ExportRenderer haciendo referencia a nuestra página principal, es decir la que tiene el control MasterDetail.

imagenumber2

Para el proposito de obtener el activity actual de la aplicación es necesario instalar el Plugin.CurrentActivity creado por James Montemagno despues de ello podemos llamar al espacio de nombre:

	using Plugin.CurrentActivity;

Ahora tenemos que sobre escribir el método OnLayout para poder reemplazar el icono, obtener el Toolbar y luego iterar entre todos los iconos que tenga y poner asignar la imagen que nosotros querramos.

Finalmente, nuestro control MasterDetail queda así:

android

iOS

En teoría en iOS debería funcionar sin agregar ningún Custom Renderer, ya que iOS agrega la imagen que le asignamos en nuestro archivo MasterDetail.xaml pero extrañamente el mismo sistema operativo asigna el color a la imagen, quedando de esta manera:

image-ios

De hecho, eso no es lo que queremos para eso tenemos que crear un Custom Renderer que extienda de PhoneMasterDetailRenderer e invocar a un ExportRenderer haciendo referencia a nuestra página principal, es decir la que tiene el control MasterDetail.

imagenumber3

Ahora tenemos que sobre escribir el método ViewDidLayoutSubviews para poder reemplazar el icono.

Finalmente, nuestro control MasterDetail queda así:

ios

Conclusión

Bueno, esto ha sido un artículo super corto, pero creo que muy útil donde mostré como cambiar el icono hamburguesa de un control MasterDetailPage usando los Custom Renderer. Recuerda que este ejemplo lo puedes encontrar en mi repositorio de Github. Nos leemos pronto, sigan xamarineando.

Un chico con una gran experiencia en el arte del desarrollo software. Desarrollador de aplicaciones de móviles, especialista en ASP.Net, Xamarin y tecnologías de computo en la Nube en especial Azure.

Comentarios