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.
Observação
Embora a Button exibição defina uma Image propriedade que permite exibir uma imagem no Button, essa propriedade deve ser usada ao exibir um pequeno ícone ao lado do Button 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.
Observação
Embora seja ImageButton possível carregar um GIF animado, ele exibirá apenas o primeiro quadro do GIF.
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:
Commanddo tipoICommand, uma interface definida no namespaceSystem.Windows.Input.CommandParameterpropriedade do tipoObject.
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 doImageButton.BorderWidthé a largura da borda.CornerRadiusé o raio do canto doImageButton.
A propriedade Aspect pode ser definida como um dos membros da enumeração Aspect:
Fill- estica a imagem para preencher completa e exatamente oImageButton. Isso pode fazer com que a imagem fique distorcida.AspectFill- recorta a imagem de modo que ela preencha oImageButton, preservando a taxa de proporção.AspectFit- adiciona faixas horizontais ou verticais à imagem (se necessário) para que a imagem inteira se ajuste noImageButton, 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çãoAspect.
Observação
A ImageButton classe também tem Margin propriedades e Padding que controlam o comportamento do layout do ImageButton. Para saber mais, confira Margens e preenchimento.
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.