Sombras paralelas de ImageButton en Android

  • Artículo

Download SampleDescargar el ejemplo

Esta funcionalidad específica de la plataforma Android se usa para habilitar una sombra paralela en un control ImageButton. Se consume en XAML estableciendo la propiedad enlazable ImageButton.IsShadowEnabled en true, junto con una serie de propiedades enlazables opcionales adicionales que controlan la sombra paralela:

<ContentPage ...
             xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core">
    <StackLayout Margin="20">
       <ImageButton ...
                    Source="XamarinLogo.png"
                    BackgroundColor="GhostWhite"
                    android:ImageButton.IsShadowEnabled="true"
                    android:ImageButton.ShadowColor="Gray"
                    android:ImageButton.ShadowRadius="12">
            <android:ImageButton.ShadowOffset>
                <Size>
                    <x:Arguments>
                        <x:Double>10</x:Double>
                        <x:Double>10</x:Double>
                    </x:Arguments>
                </Size>
            </android:ImageButton.ShadowOffset>
        </ImageButton>
        ...
    </StackLayout>
</ContentPage>

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

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

var imageButton = new Xamarin.Forms.ImageButton { Source = "XamarinLogo.png", BackgroundColor = Color.GhostWhite, ... };
imageButton.On<Android>()
           .SetIsShadowEnabled(true)
           .SetShadowColor(Color.Gray)
           .SetShadowOffset(new Size(10, 10))
           .SetShadowRadius(12);

Importante

Una sombra paralela se dibuja como parte del fondo del control ImageButton, y el fondo solo se dibuja si se establece la propiedad BackgroundColor. Por lo tanto, no se dibujará una sombra paralela si la propiedad ImageButton.BackgroundColor no está establecida.

El método ImageButton.On<Android> especifica que esta plataforma específica solo se ejecutará en Android. El método ImageButton.SetIsShadowEnabled, en el espacio de nombres Xamarin.Forms.PlatformConfiguration.AndroidSpecific, se usa para controlar si una sombra paralela está habilitada en ImageButton. Además, se pueden invocar los métodos siguientes para controlar la sombra paralela:

  • SetShadowColor: establece el color de la sombra paralela. El color predeterminado es Color.Default.
  • SetShadowOffset: establece el desplazamiento de la sombra paralela. El desplazamiento cambia la dirección en la que se dibuja la sombra y se especifica como un valor Size. Los valores de estructura Size se expresan en unidades independientes del dispositivo, siendo el primer valor la distancia a la izquierda (valor negativo) o a la derecha (valor positivo), y el segundo valor es la distancia superior (valor negativo) o inferior (valor positivo). El valor predeterminado de esta propiedad es (0,0, 0,0), lo que hace que la sombra se muestre alrededor de cada lado de ImageButton.
  • SetShadowRadius: establece el radio de desenfoque usado para representar la sombra paralela. El valor de radio predeterminado es 10,0.

Nota:

El estado de una sombra paralela se puede consultar llamando a los métodos GetIsShadowEnabled, GetShadowColor, GetShadowOffset y GetShadowRadius.

El resultado es que se puede habilitar una sombra paralela en ImageButton:

ImageButton with drop shadow