Elevación de VisualElement en Android

  • Artículo

Download SampleDescargar el ejemplo

Esta característica específica de la plataforma Android se usa para controlar la elevación, u orden Z, de elementos visuales en aplicaciones que tienen como destino la API 21 o versiones posteriores. La elevación de un elemento visual determina su orden de dibujo, con elementos visuales con valores de Z superiores que ocluyen elementos visuales con valores Z inferiores. Se consume en XAML configurando la propiedad adjunta VisualElement.Elevation en un valor boolean:

<ContentPage ...
             xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
             Title="Elevation">
    <StackLayout>
        <Grid>
            <Button Text="Button Beneath BoxView" />
            <BoxView Color="Red" Opacity="0.2" HeightRequest="50" />
        </Grid>        
        <Grid Margin="0,20,0,0">
            <Button Text="Button Above BoxView - Click Me" android:VisualElement.Elevation="10"/>
            <BoxView Color="Red" Opacity="0.2" HeightRequest="50" />
        </Grid>
    </StackLayout>
</ContentPage>

Como alternativa, se puede consumir desde C# mediante la API fluida:

using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;
...

public class AndroidElevationPageCS : ContentPage
{
    public AndroidElevationPageCS()
    {
        ...
        var aboveButton = new Button { Text = "Button Above BoxView - Click Me" };
        aboveButton.On<Android>().SetElevation(10);

        Content = new StackLayout
        {
            Children =
            {
                new Grid
                {
                    Children =
                    {
                        new Button { Text = "Button Beneath BoxView" },
                        new BoxView { Color = Color.Red, Opacity = 0.2, HeightRequest = 50 }
                    }
                },
                new Grid
                {
                    Margin = new Thickness(0,20,0,0),
                    Children =
                    {
                        aboveButton,
                        new BoxView { Color = Color.Red, Opacity = 0.2, HeightRequest = 50 }
                    }
                }
            }
        };
    }
}

El método Button.On<Android> especifica que esta plataforma específica solo se ejecutará en Android. El método VisualElement.SetElevation, del espacio de nombres Xamarin.Forms.PlatformConfiguration.AndroidSpecific, se usa para establecer la elevación del elemento visual en un float que admite un valor NULL. Además, el método VisualElement.GetElevation se puede usar para recuperar el valor de elevación de un elemento visual.

El resultado es que la elevación de los elementos visuales se puede controlar para que los elementos visuales con valores Z más altos ocluyan los elementos visuales con valores Z inferiores. Por lo tanto, en este ejemplo, el segundo Button se representa por encima de BoxView porque tiene un valor de elevación mayor:

VisualElement elevation screenshot