Xamarin.Forms Imagebutton

Artículo
12/02/2021
6 minutos para leer

Ejemplo de descarga Descarga del ejemplo

ImageButton muestra una imagen y responde a una pulsación o un clic que indica a una aplicación que lleve a cabo una tarea determinada.

La ImageButton vista combina la vista y la vista para crear un botón cuyo contenido es una ButtonImage imagen. El usuario presiona con un dedo o hace clic en él con un mouse para dirigir la aplicación ImageButton para llevar a cabo una tarea determinada. Sin embargo, a Button diferencia de la vista, la vista no ImageButton tiene ningún concepto de apariencia de texto y texto.

Nota:

Aunque la vista define una propiedad Button Xamarin_Forms Button _Button_Image" data-linktype="absolute-path">, que permite mostrar una imagen en , esta propiedad está pensada para usarse al mostrar un icono pequeño junto al ImageButtonButton texto.

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

Establecimiento del origen de la imagen

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

En el ejemplo siguiente se muestra cómo crear una instancia de 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 Source propiedad especifica la imagen que aparece en 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:

De forma predeterminada, es rectangular, pero puede darle ImageButton esquinas redondeadas mediante la CornerRadius propiedad . Para obtener más información sobre ImageButton la apariencia, vea ImageButton

Nota:

Aunque un 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 sea funcionalmente equivalente al ejemplo 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 clics de ImageButton

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

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

<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 Clicked evento se establece en un controlador de eventos denominado que se encuentra en el archivo de código OnImageButtonClicked 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 sender argumento es el responsable de este ImageButton evento. Puede usarlo para acceder al objeto o para distinguir ImageButton entre varios objetos que ImageButton comparten el mismo Clicked evento.

Este controlador Clicked determinado incrementa un contador y muestra el valor del contador en Label :

básicaButton Haga clic en Imagen

En el ejemplo siguiente se muestra cómo crear una página que sea funcionalmente equivalente al ejemplo 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 determinado en el que un clic determinado ImageButton no es una operación válida. En esos casos, ImageButton debe deshabilitarse estableciendo su IsEnabled propiedad en false .

Uso de la interfaz de comandos

Es posible que una aplicación responda a las ImageButton pulsaciones sin controlar el Clicked evento. implementa ImageButton un mecanismo de notificación alternativo denominado comando ImageButtoninterfaz de comandos. Consta de dos propiedades:

Command de tipo ICommand , una interfaz definida en el espacio de nombres System.Windows.Input .
CommandParameter propiedad de tipo Object .

Este enfoque es adecuado en relación con el enlace de datos y, especialmente, al implementar la arquitectura Model-View-ViewModel (MVVM).

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

Presionar y liberar imageButton

Además del evento Clicked, ImageButton también define los eventos Pressed y Released. El evento tiene lugar cuando un dedo presiona un control o se presiona un botón del mouse con el PressedImageButton puntero situado sobre ImageButton . El Released evento tiene lugar cuando se libera el dedo o el botón del mouse. Por lo general, el evento también se desencadena al mismo tiempo que el evento, pero si el dedo o el puntero del mouse se deslizan fuera de la superficie de antes de liberarse, es posible que el evento no se ClickedReleasedImageButtonClicked produzca.

Para obtener más información sobre estos eventos, vea Presionar y soltar el botón en la Guía del botón.

Apariencia de ImageButton

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

Aspect es cómo se escalará la imagen para ajustarla al área de presentació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 Aspect propiedad se puede establecer en uno de los miembros de la Aspect enumeración :

_Aspect_Fill" data-linktype="absolute-path">: extiende la imagen para rellenar completamente Fill y exactamente ImageButton . Esto puede dar lugar a que la imagen esté distorsionada.
Xamarin_Forms _Aspect_AspectFill" data-linktype="absolute-path">: recorta la imagen para que se llene y se conserve la relación AspectFillImageButton de aspecto.
Xamarin_Forms _Aspect_AspectFit" data-linktype="absolute-path">- letterboxes the image (if necessary) so that the entire AspectFit image fits into the , with blank ImageButton space added to the top/bottom or sides depending on whether the image is wide or tall. Este es el valor predeterminado de la Aspect enumeración .

Nota:

La ImageButton clase también tiene Xamarin_Forms ImageButton _View_Margin" data-linktype="absolute-path">MarginPaddingImageButton y propiedades que controlan el comportamiento de diseño de . Para obtener más información, vea Márgenes y relleno.

Estados visuales imageButton

ImageButtontiene un que se puede usar para iniciar un cambio visual en cuando el usuario lo presiona, siempre que PressedVisualStateImageButton esté habilitado.

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

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

especifica que, cuando se presiona , su propiedad PressedVisualStateImageButton Xamarin_Forms Pressed _VisualElement_Scale" data-linktype="absolute-path">se cambiará de su valor predeterminado de 1 a Scale 0,8. especifica NormalVisualState que cuando el objeto está en un ImageButton estado normal, su propiedad se Scale establecerá en 1. Por lo tanto, el efecto general es que, cuando se presiona , se vuelve a escalar para que sea ligeramente más pequeño y, cuando se libera, se vuelve a escalar a su ImageButtonImageButton tamaño predeterminado.

Para obtener más información sobre los estados visuales, vea The Xamarin.Forms Visual State Manager .

Ejemplo de FormsGallery

Xamarin.Forms Imagebutton

Valore su experiencia

Establecimiento del origen de la imagen

Control de clics de ImageButton

Deshabilitación de ImageButton

Uso de la interfaz de comandos

Presionar y liberar imageButton

Apariencia de ImageButton

Estados visuales imageButton

Vínculos relacionados