Xamarin

Xamarin.Forms – Cambiando una imagen a partir de la orientación del dispositivo


Si se desea cambiar una imagen en Xamarin.Forms a partir de la orientación del dispositivo, debemos de seguir estos pasos:

1.- Insertar las imágenes que deseemos utilizar para cada una de las orientaciones del dispositivo. Para esta demo, he utilizado dos, llamadas “Horizontal.png” y “Vertical.png”, cada una con diferente color de fondo, y con una resolución de 1024 x 768 y de 768 x 1024 respectivamente. Dichas imágenes deben incluirse en cada uno de los proyectos de cada plataforma, no en el proyecto compartido. Por ejemplo, para agregarlo en Android debemos agregarlo a la carpeta Resources -> drawable, como se muestra a continuación:

Xamarin.Forms - Android

En el proyecto para iOS, debemos colocarlas en la carpeta Resources:

Xamarin.Forms - iOS

En un proyecto tipo UWP, debemos colocarlas en la carpeta raíz:

Xamarin.Forms - UWP

2.- Posteriormente, crearemos una página tipo XAML, donde colocaremos un elemento tipo Image, y un botón a modo de ejemplificación:

3.- Una vez colocadas las imágenes y creada la nueva página, debemos suscribirnos al evento SizeChanged de la página que acabamos de crear:

4.- Finalmente, en el manejador de eventos, debemos comparar si acabamos de rotar de forma horizontal, o vertical, y asignar a la propiedad Source la imagen correspondiente:

Para los que no manejen el operador ternario, el código equivalente con if es:

El resultado es el siguiente:

Dispositivo en Vertical:

Xamarin.Forms - Vista Vertical

Dispositivo en Horizontal:

Xamarin.Forms - Vista Horizontal

Recuerda que el proyecto con todas las recetas lo puedes encontrar aquí:

Recetas Xamarin.Forms

Saludos.

Entrada basada en las recetas del sitio oficial de Xamarin.Forms.

Recetas
Xamarin.Forms – Agregando un ToolbarItem a tu aplicación
Xamarin Forms
Xamarin Forms: El método Device.OnPlatform
Xamarin Forms
Xamarin Forms: Consumiendo un servicio web basado en JSON Parte 3: Creando Creando la Vista
There are currently no comments.