▷ Xamarin Forms - Cambiando una imagen a partir de la orientación del dispositivo 【 2024】

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

¡Mira el Máster en Xamarin Forms!

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:

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

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

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: