ImageButton de Xamarin.Forms

  • Artículo

Download SampleDescargar el ejemplo

El control ImageButton muestra una imagen y responde a una pulsación o clic que indica a una aplicación que realice una tarea determinada.

La vista ImageButton combina las vistas Button y Image para crear un botón cuyo contenido es una imagen. El usuario presiona ImageButton con un dedo o hace clic en él con un mouse para indicar a la aplicación que lleve a cabo una tarea determinada. Pero a diferencia de la vista Button, la vista ImageButton no tiene ningún concepto de texto ni apariencia de texto.

Nota:

Aunque la vista Button define una propiedad Image, que le permite mostrar una imagen en Button, esta propiedad está pensada para usarse al mostrar un pequeño icono junto al texto Button.

Los ejemplos de código de esta guía se toman del ejemplo FormsGallery.

Establecimiento del origen de la imagen

ImageButton define una propiedad Source que se debe establecer en la imagen que se va a mostrar en el botón, y el origen de la imagen es un archivo, un URI, un recurso o una secuencia. Para más información sobre cómo cargar imágenes de orígenes diferentes, vea Imágenes en Xamarin.Forms.

En el siguiente ejemplo se muestra cómo crear una instancia ImageButton en XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FormsGallery.XamlExamples.ImageButtonDemoPage"
             Title="ImageButton Demo">
    <StackLayout>
        <Label Text="ImageButton"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

       <ImageButton Source="XamarinLogo.png"
                    HorizontalOptions="Center"
                    VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

La propiedad Source especifica la imagen que aparece en el elemento ImageButton. En este ejemplo se establece en un archivo local que se cargará desde cada proyecto de plataforma, lo que da como resultado las capturas de pantalla siguientes:

Basic ImageButton

De manera predeterminada, ImageButton es rectangular, pero puede asignarle esquinas redondeadas mediante la propiedad CornerRadius. Para más información sobre la apariencia de ImageButton, vea Apariencia de ImageButton.

Nota:

Aunque una instancia de ImageButton puede cargar un GIF animado, solo mostrará el primer fotograma del GIF.

En el ejemplo siguiente se muestra cómo crear una página que es funcionalmente equivalente al ejemplo de XAML anterior, pero completamente en C#:

public class ImageButtonDemoPage : ContentPage
{
    public ImageButtonDemoPage()
    {
        Label header = new Label
        {
            Text = "ImageButton",
            FontSize = 50,
            FontAttributes = FontAttributes.Bold,
            HorizontalOptions = LayoutOptions.Center
        };

        ImageButton imageButton = new ImageButton
        {
            Source = "XamarinLogo.png",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };

        // Build the page.
        Title = "ImageButton Demo";
        Content = new StackLayout
        {
            Children = { header, imageButton }
        };
    }
}

Control de los clics de ImageButton

ImageButton define un evento Clicked que se desencadena cuando el usuario pulsa ImageButton con un dedo o el puntero del mouse. El evento se desencadena cuando se suelta el dedo o el botón del mouse de la superficie de ImageButton. ImageButton debe tener su propiedad IsEnabled establecida en true para responder a las pulsaciones.

En el ejemplo siguiente se muestra cómo crear una instancia de ImageButton en XAML y controlar su evento Clicked:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FormsGallery.XamlExamples.ImageButtonDemoPage"
             Title="ImageButton Demo">
    <StackLayout>
        <Label Text="ImageButton"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

       <ImageButton Source="XamarinLogo.png"
                    HorizontalOptions="Center"
                    VerticalOptions="CenterAndExpand"
                    Clicked="OnImageButtonClicked" />

        <Label x:Name="label"
               Text="0 ImageButton clicks"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

El evento Clicked se establece en un controlador de eventos denominado OnImageButtonClicked que se encuentra en el archivo de código subyacente:

public partial class ImageButtonDemoPage : ContentPage
{
    int clickTotal;

    public ImageButtonDemoPage()
    {
        InitializeComponent();
    }

    void OnImageButtonClicked(object sender, EventArgs e)
    {
        clickTotal += 1;
        label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
    }
}

Cuando se pulsa ImageButton, se ejecuta el método OnImageButtonClicked. El argumento sender es el ImageButton responsable de este evento. Puedes usarlo para tener acceso al objeto ImageButton o para distinguir entre varios objetos ImageButton que comparten el mismo evento Clicked.

Este controlador de Clicked concreto incrementa un contador y muestra el valor del contador en un elemento Label:

Basic ImageButton Click

En el ejemplo siguiente se muestra cómo crear una página que es funcionalmente equivalente al ejemplo de XAML anterior, pero completamente en C#:

public class ImageButtonDemoPage : ContentPage
{
    Label label;
    int clickTotal = 0;

    public ImageButtonDemoPage()
    {
        Label header = new Label
        {
            Text = "ImageButton",
            FontSize = 50,
            FontAttributes = FontAttributes.Bold,
            HorizontalOptions = LayoutOptions.Center
        };

        ImageButton imageButton = new ImageButton
        {
            Source = "XamarinLogo.png",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };
        imageButton.Clicked += OnImageButtonClicked;

        label = new Label
        {
            Text = "0 ImageButton clicks",
            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };

        // Build the page.
        Title = "ImageButton Demo";
        Content = new StackLayout
        {
            Children =
            {
                header,
                imageButton,
                label
            }
        };
    }

    void OnImageButtonClicked(object sender, EventArgs e)
    {
        clickTotal += 1;
        label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
    }
}

Deshabilitación de ImageButton

A veces, una aplicación está en un estado concreto en el que un determinado clic de ImageButton no es una operación válida. En tales casos, se debe deshabilitar el objeto ImageButton estableciendo su propiedad IsEnabled en false.

Uso de la interfaz de comandos

Es posible que una aplicación responda a pulsaciones de ImageButton sin controlar el evento Clicked. El ImageButton implementa un mecanismo de notificación alternativo denominado interfaz comando o de comandos. Esta consta de dos propiedades:

Este enfoque es adecuado en conexión con el enlace de datos y, especialmente, al implementar la arquitectura Modelo-Vista-Modelo de vista (MVVM).

Para más información sobre el uso de la interfaz de comandos, vea Uso de la interfaz de comandos en la guía de Button.

Pulsación y liberación de ImageButton

Además del evento Clicked, ImageButton también define los eventos Pressed y Released. El evento Pressed se produce cuando un dedo presiona ImageButton, o bien cuando se presiona un botón del mouse con el puntero situado sobre ImageButton. El evento Released se produce cuando se suelta el dedo o el botón del mouse. Por lo general, el evento Clicked también se desencadena al mismo tiempo que el evento Released, pero si el dedo o el puntero del mouse se aleja de la superficie de ImageButton antes de ser liberado, es posible que no se produzca el evento Clicked.

Para más información sobre estos eventos, veaPulsación y liberación del botón en la guía de Button.

Apariencia de ImageButton

Además de las propiedades que ImageButton hereda de la clase View, ImageButton también define varias propiedades que afectan a su apariencia:

  • Aspect es cómo se escalará la imagen para ajustarla al área de visualización.
  • BorderColor es el color de un área que rodea a ImageButton.
  • BorderWidth es el ancho del borde.
  • CornerRadius es el radio de esquina de ImageButton.

La propiedad Aspect se debe establecer en uno de los miembros de la enumeración Aspect.

  • Fill: ajusta la imagen para rellenar completa y exactamente el ImageButton. Esto puede hacer que la imagen se distorsione.
  • AspectFill: recorta la imagen para que rellene el ImageButton y conserve la relación de aspecto.
  • AspectFit: aplica el formato letterbox a la imagen (si es necesario) para que la imagen quepa en el ImageButton, con un espacio en blanco agregado a la parte superior o inferior o a los laterales, en función de si la imagen es ancha o alta. Se trata del valor predeterminado de la enumeración Aspect.

Nota:

La clase ImageButton también tiene propiedades Margin y Padding que controlan el comportamiento de diseño de ImageButton. Para obtener más información, vea Márgenes y relleno.

Estados visuales de ImageButton

ImageButton tiene un elemento PressedVisualState que se puede usar para iniciar un cambio visual en ImageButton cuando lo presiona el usuario, siempre que esté habilitado.

En el ejemplo XAML siguiente se muestra cómo definir un estado visual para el estado Pressed:

<ImageButton Source="XamarinLogo.png"
             ...>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
                <VisualState.Setters>
                    <Setter Property="Scale"
                            Value="1" />
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="Pressed">
                <VisualState.Setters>
                    <Setter Property="Scale"
                            Value="0.8" />
                </VisualState.Setters>
            </VisualState>

        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</ImageButton>

PressedVisualState especifica que cuando se presiona ImageButton, su propiedad Scale se cambiará del valor predeterminado de 1 a 0,8. NormalVisualState especifica que cuando ImageButton está en un estado normal, su propiedad Scale se establecerá en 1. Por lo tanto, el efecto general es que, cuando se presiona ImageButton, se vuelve a escalar para que sea ligeramente más pequeño y, cuando se libera ImageButton, se vuelve a escalar a su tamaño predeterminado.

Para más información sobre los estados visuales, vea Administrador de estado visual de Xamarin.Forms.