Xamarin.Forms Botão de imagem

O ImageButton exibe uma imagem e responde a um toque ou clique que direciona um aplicativo para executar uma tarefa específica.

A ImageButton exibição combina a exibição e Image a Button exibição para criar um botão cujo conteúdo é uma imagem. O usuário pressiona o ImageButton botão com um dedo ou clica com o mouse para direcionar o aplicativo para realizar uma tarefa específica. No entanto, ao contrário da Button exibição, a ImageButton exibição não tem conceito de texto e aparência do texto.

Configurando a origem da imagem

ImageButton define uma Source propriedade que deve ser definida como a imagem a ser exibida no botão, com a origem da imagem sendo um arquivo, um URI, um recurso ou um fluxo. Para obter mais informações sobre como carregar imagens de diferentes origens, consulte Imagens em Xamarin.Forms.

O exemplo a seguir mostra como criar uma instância de ImageButton em 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>

A propriedade Source especifica a imagem que aparece no ImageButton. Neste exemplo, ele é definido como um arquivo local que será carregado de cada projeto de plataforma, resultando nas seguintes capturas de tela:

Por padrão, o ImageButton é retangular, mas você pode dar a ele cantos arredondados usando a CornerRadius propriedade. Para obter mais informações sobre ImageButton a aparência, consulte Aparência do ImageButton.

O exemplo a seguir mostra como criar uma página que seja funcionalmente equivalente ao exemplo XAML anterior, mas inteiramente em 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 }
        };
    }
}

Manipulando cliques do ImageButton

ImageButton Define um Clicked evento que é acionado quando o usuário toca no com um dedo ou ponteiro do ImageButton mouse. O evento é acionado quando o dedo ou o botão do mouse é liberado da superfície do ImageButton. O ImageButton deve ter sua IsEnabled propriedade definida como true para responder a toques.

O exemplo a seguir mostra como instanciar um ImageButton em XAML e manipular seu 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>

O Clicked evento é definido como um manipulador de eventos chamado OnImageButtonClicked que está localizado no arquivo code-behind:

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")}";
    }
}

Quando o ImageButton é tocado, o método OnImageButtonClicked é executado. O argumento sender é o ImageButton responsável por esse evento. Você pode usar isso para acessar o objeto ImageButton ou para distinguir entre vários objetos ImageButton que compartilham o mesmo evento Clicked.

Esse manipulador específico Clicked incrementa um contador e exibe o valor do contador em um Label:

O exemplo a seguir mostra como criar uma página que seja funcionalmente equivalente ao exemplo XAML anterior, mas inteiramente em 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")}";
    }
}

Desativando o ImageButton

Às vezes, um aplicativo está em um estado específico em que um clique específico ImageButton não é uma operação válida. Nesses casos, o ImageButton deve ser desabilitado, definindo sua propriedade IsEnabled como false.

Usando a interface de comando

É possível que um aplicativo responda a ImageButton toques sem manipular o Clicked evento. O ImageButton implementa um mecanismo de notificação alternativo chamado interface de comando ou comandos. Isso consiste em duas propriedades:

• Command do tipo ICommand, uma interface definida no namespace System.Windows.Input.
• CommandParameter propriedade do tipo Object.

Essa abordagem é adequada em conexão com a vinculação de dados e, particularmente, ao implementar a arquitetura MVVM (Model-View-ViewModel).

Para obter mais informações sobre como usar a interface de comando, consulte Usando a interface de comando no guia Botão .

Pressionando e soltando o ImageButton

Além de evento Clicked, ImageButton também define eventos Pressed e Released. O Pressed evento ocorre quando um dedo pressiona um ImageButton, ou um botão do mouse é pressionado com o ponteiro posicionado sobre o ImageButton. O Released evento ocorre quando o dedo ou o botão do mouse é liberado. Geralmente, o Clicked evento também é disparado ao mesmo tempo que o Released evento, mas se o ponteiro do dedo ou do mouse deslizar para longe da superfície do ImageButton antes de ser liberado, o Clicked evento pode não ocorrer.

Para obter mais informações sobre esses eventos, consulte Pressionando e soltando o botão no painel Button .

Aparência do ImageButton

Além das propriedades que ImageButton herdam da View classe, ImageButton também define várias propriedades que afetam sua aparência:

• Aspect é como a imagem será dimensionada para caber na área de exibição.
• BorderColor é a cor de uma área ao redor do ImageButton.
• BorderWidth é a largura da borda.
• CornerRadius é o raio do canto do ImageButton.

A propriedade Aspect pode ser definida como um dos membros da enumeração Aspect:

• Fill - estica a imagem para preencher completa e exatamente o ImageButton. Isso pode fazer com que a imagem fique distorcida.
• AspectFill - recorta a imagem de modo que ela preencha o ImageButton, preservando a taxa de proporção.
• AspectFit - adiciona faixas horizontais ou verticais à imagem (se necessário) para que a imagem inteira se ajuste no ImageButton, com espaço em branco adicionado na parte superior/inferior ou nas laterais, dependendo se a imagem é larga ou alta. Esse é o valor padrão da enumeração Aspect.

Estados visuais ImageButton

ImageButton tem um Pressed VisualState que pode ser usado para iniciar uma alteração visual no ImageButton quando pressionado pelo usuário, desde que esteja habilitado.

O exemplo XAML a seguir mostra como definir um estado visual para o 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>

O Pressed VisualState especifica que, quando o ImageButton for pressionado, sua Scale propriedade será alterada de seu valor padrão de 1 para 0,8. O Normal VisualState especifica que quando o ImageButton estiver em estado normal, sua propriedade Scale será definida como 1. Portanto, o efeito geral é que quando o ImageButton é pressionado, ele é redimensionado para ser um pouco menor, e quando o ImageButton é liberado, ele é redimensionado para seu tamanho padrão.

Para obter mais informações sobre estados visuais, consulte O Xamarin.Forms Gerenciador de Estado Visual.