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

¡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!

curso de xamarin

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

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.