Condividi tramite

Xamarin.Forms ImageButton

  • Articolo

ImageButton visualizza un'immagine e risponde a un tocco o a un clic che indirizza un'applicazione a eseguire una determinata attività.

La ImageButton visualizzazione combina la visualizzazione e Image la Button visualizzazione per creare un pulsante il cui contenuto è un'immagine. L'utente preme ImageButton con un dito o lo fa clic con un mouse per indirizzare l'applicazione a eseguire una determinata attività. Tuttavia, a differenza della Button visualizzazione, la ImageButton visualizzazione non ha alcun concetto di testo e aspetto del testo.

Nota

Mentre la Button visualizzazione definisce una Image proprietà , che consente di visualizzare un'immagine in Button, questa proprietà deve essere usata quando si visualizza un'icona piccola accanto al Button testo.

Impostazione dell'origine dell'immagine

ImageButton definisce una Source proprietà che deve essere impostata sull'immagine da visualizzare nel pulsante, con l'origine dell'immagine come un file, un URI, una risorsa o un flusso. Per altre informazioni sul caricamento di immagini da origini diverse, vedere Immagini in Xamarin.Forms.

L'esempio seguente illustra come creare un'istanza ImageButton di in 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 proprietà specifica l'immagine visualizzata in ImageButton. In questo esempio è impostato su un file locale che verrà caricato da ogni progetto di piattaforma, ottenendo gli screenshot seguenti:

ImageButton di base

Per impostazione predefinita, è ImageButton rettangolare, ma è possibile assegnargli angoli arrotondati usando la CornerRadius proprietà . Per altre informazioni sull'aspetto ImageButton , vedere Aspetto imagebutton.

Nota

Mentre un ImageButton oggetto può caricare una GIF animata, visualizzerà solo il primo fotogramma della GIF.

L'esempio seguente illustra come creare una pagina equivalente funzionalmente all'esempio XAML precedente, ma interamente in 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 }
        };
    }
}

Gestione dei clic di ImageButton

ImageButton definisce un Clicked evento generato quando l'utente tocca ImageButton con un dito o un puntatore del mouse. L'evento viene generato quando il dito o il pulsante del mouse viene rilasciato dalla superficie di ImageButton. La ImageButton proprietà deve essere IsEnabled impostata su per true rispondere ai tap.

L'esempio seguente illustra come creare un'istanza di in ImageButton XAML e gestire il relativo 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>

L'evento Clicked è impostato su un gestore eventi denominato OnImageButtonClicked che si trova nel file 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")}";
    }
}

Con il tocco su ImageButton viene eseguito il metodo OnImageButtonClicked. L'argomento sender è il responsabile di ImageButton questo evento. È possibile usarlo per accedere all'oggetto ImageButton o per distinguere tra più ImageButton oggetti che condividono lo stesso Clicked evento.

Questo particolare Clicked gestore incrementa un contatore e visualizza il valore del contatore in un Labeloggetto :

Clic su ImageButton di base

L'esempio seguente illustra come creare una pagina equivalente funzionalmente all'esempio XAML precedente, ma interamente in 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")}";
    }
}

Disabilitazione di ImageButton

In alcuni casi un'applicazione si trova in uno stato specifico in cui un particolare ImageButton clic non è un'operazione valida. In questi casi, l'oggetto ImageButton deve essere disabilitato impostando la relativa IsEnabled proprietà su false.

Uso dell'interfaccia del comando

È possibile che un'applicazione risponda ai ImageButton tap senza gestire l'evento Clicked . ImageButton implementa un meccanismo di notifica alternativo denominato comando o interfaccia di comando. Questo è costituito da due proprietà:

Questo approccio è adatto in relazione al data binding e in particolare quando si implementa l'architettura MVVM (Model-View-ViewModel).

Per altre informazioni sull'uso dell'interfaccia del comando, vedere Uso dell'interfaccia di comando nella guida button .

Pressione e rilascio di ImageButton

Oltre all'evento Clicked, ImageButton definisce anche gli eventi Pressed e Released. L'evento Pressed si verifica quando un dito preme su un ImageButtonoggetto o quando viene premuto un pulsante del mouse con il puntatore posizionato su ImageButton. L'evento Released si verifica quando viene rilasciato il dito o il pulsante del mouse. In genere, l'evento Clicked viene generato contemporaneamente all'evento Released , ma se il puntatore del mouse o il dito si allontana dalla superficie dell'oggetto ImageButton prima del rilascio, l'evento Clicked potrebbe non verificarsi.

Per altre informazioni su questi eventi, vedere Pressione e rilascio del pulsante nella guida pulsante .

Aspetto ImageButton

Oltre alle proprietà che ImageButton ereditano dalla View classe , ImageButton definisce anche diverse proprietà che ne influiscono sull'aspetto:

  • Aspect è il modo in cui l'immagine verrà ridimensionata per adattarsi all'area di visualizzazione.
  • BorderColor è il colore di un'area che circonda l'oggetto ImageButton.
  • BorderWidth è la larghezza del bordo.
  • CornerRadius è il raggio dell'angolo dell'oggetto ImageButton.

La Aspect proprietà può essere impostata su uno dei membri dell'enumerazione Aspect :

  • Fill - estende completamente l'immagine e riempie esattamente l'oggetto ImageButton. Ciò può comportare la distorsione dell'immagine.
  • AspectFill - ritaglia l'immagine in modo che riempia l'oggetto ImageButton mantenendo le proporzioni.
  • AspectFit - la casella di lettere inserisce l'immagine (se necessario) in modo che l'intera immagine si adatti ImageButtona , con spazio vuoto aggiunto all'angolo superiore/inferiore o ai lati a seconda che l'immagine sia larga o alta. Questo è il valore predefinito dell'enumerazione Aspect .

Nota

La ImageButton classe dispone Margin inoltre di proprietà e Padding che controllano il comportamento del layout dell'oggetto ImageButton. Per altre informazioni, vedere l'articolo sulle proprietà Margin e Padding.

Stati di visualizzazione ImageButton

ImageButton dispone di un oggetto Pressed VisualState che può essere usato per avviare una modifica visiva a ImageButton quando viene premuto dall'utente, purché sia abilitato.

L'esempio XAML seguente illustra come definire uno stato di visualizzazione per lo Pressed stato:

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

Specifica Pressed VisualState che, quando ImageButton viene premuto , la relativa Scale proprietà verrà modificata dal valore predefinito da 1 a 0,8. Normal VisualState Specifica che quando l'oggetto ImageButton è in uno stato normale, la relativa Scale proprietà verrà impostata su 1. Di conseguenza, l'effetto complessivo è che, quando ImageButton viene premuto, viene ridimensionato leggermente più piccolo e, quando ImageButton viene rilasciato, viene ridimensionato in base alle dimensioni predefinite.

Per altre informazioni sugli stati di visualizzazione, vedere Xamarin.Forms Visual State Manager.