Xamarin.Forms Imagebutton

Exemplo de download Baixar o exemplo

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 Button exibição Image e a exibição para criar um botão cujo conteúdo é uma imagem. O usuário pressiona o com um dedo ou clica nele com um mouse para direcionar o ImageButton aplicativo para executar uma tarefa específica. No entanto, ao contrário Button da exibição, ImageButton a exibição não tem nenhum conceito de aparência de texto e texto.

Observação

Embora a exibição defina uma propriedade ButtonButton Xamarin_Forms _Button_Image" data-linktype="absolute-path">, que permite exibir uma imagem no , essa propriedade destina-se a ser usada ao exibir um pequeno ícone ao lado Image do ButtonButton texto.

Os exemplos de código neste guia são retirados do exemplo FormsGallery.

Definindo a origem da imagem

ImageButton define uma 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 Source um fluxo. Para obter mais informações sobre como carregar imagens de fontes diferentes, consulte Images in Xamarin.Forms .

O exemplo a seguir mostra como insinuar ImageButton um 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 Source propriedade 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:

Basic ImageButton

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

Observação

Embora um ImageButton possa carregar um GIF animado, ele exibirá apenas o primeiro quadro do GIF.

O exemplo a seguir mostra como criar uma página que é funcionalmente equivalente ao exemplo de XAML anterior, mas totalmente 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 imageButton

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

O exemplo a seguir mostra como insinuar ImageButton um 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 que está localizado no arquivo OnImageButtonClicked 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 sender argumento é o responsável por esse ImageButton evento. Você pode usar isso para acessar o ImageButton objeto ou para distinguir entre vários objetos que compartilham o mesmo ImageButtonClicked evento.

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

em Imagem BásicaButton Cliqueem Imagem

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

Desabilitando o ImageButton

Às vezes, um aplicativo está em um estado específico em que um ImageButton clique específico não é uma operação válida. Nesses casos, o ImageButton deve ser desabilitado definindo sua IsEnabled propriedade 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 de interface de ImageButtonou comando. Isso consiste em duas propriedades:

Essa abordagem é adequada em conexão com a associação de dados e, especialmente, 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 liberando o ImageButton

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

Para obter mais informações sobre esses eventos, consulte Pressionando e liberando o botão no guia Botão.

Aparência imageButton

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

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

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

Observação

A ImageButton classe também Xamarin_Forms ImageButton _View_Margin" data-linktype="absolute-path">MarginPadding propriedades ImageButton que controlam o comportamento de layout do . Para saber mais, confira Margens e preenchimento.

Estados visuais ImageButton

ImageButtontem um que pode ser usado para iniciar uma alteração visual para o quando pressionado pelo usuário, desde PressedVisualState que ele está ImageButton habilitado.

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

O especifica que, quando o é pressionado, sua propriedade PressedVisualState _VisualElement_Scale Xamarin_Forms ImageButtonPressed data-linktype="absolute-path="absolute-path">será alterada de seu valor padrão de 1 para Scale 0,8. O NormalVisualState especifica que, quando ImageButton o estiver em um estado normal, sua Scale propriedade será definida como 1. Portanto, o efeito geral é que, quando o é pressionado, ele é redimensionado para ser um pouco menor e, quando o é liberado, ele é redimensionado para seu ImageButtonImageButton tamanho padrão.

Para obter mais informações sobre estados visuais, consulte The Xamarin.Forms Visual State Manager .