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 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 MasterDetail. Un control de este tipo es muy usado desde hace bastante tiempo atrás, es básicamente un menú, el menú hamburguesa…

Este menú es muy usado 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.

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:

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage  xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:CustomIcon.Views;assembly=CustomIcon"
         Title="MainPage"
         Icon="newIcon.png"
         x:Class="CustomIcon.Views.MainPage">
    <MasterDetailPage.Master>
        <local:MasterPage x:Name="masterPage" />
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:Page1 />
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

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.

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í:

#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.

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.

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

Finalmente, nuestro control MasterDetail queda así:

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. 😎