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:

    <Grid>
        <Image x:Name="imgBackground" Opacity="1" Source="Vertical.png" Aspect="AspectFill"/>
        <Button HorizontalOptions="Center" VerticalOptions="Center" Text="¡Click!"/>
    </Grid>

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:

        public ImageOrientationView()
        {
            InitializeComponent();
            SizeChanged += ImageOrientationView_SizeChanged;
        }

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:

imgBackground.Source = ImageSource.FromFile(Height > Width ? "Horizontal.png" : "Vertical.png");

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

            //Código equivalente con if:
            //if(Height > Width)
            //{
            //    imgBackground.Source = "Horizontal.png";
            //}
            //else
            //{
            //    imgBackground.Source = "Vertical.png";
            //}

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

Recuerda que puedes tener acceso a mis cursos para aprender Xamarin Forms ¡totalmente en español! Por si esto fuera poco, si accedes desde la siguiente página… ¡Te llevas cada uno de los cursos a un súper precio!

Cursos de Xamarin en Español

No lo pienses más y mejora tu carrera desde hoy mismo.

Saludos.

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

0
    0
    Your Cart
    Your cart is emptyReturn to Shop