Xamarin.Forms Esercitazione sul pulsante

Articolo
Developer (Principiante)
7 minuti per il completamento

Prima di provare questa esercitazione è necessario avere completato correttamente:

Creare la prima Xamarin.Forms guida introduttiva all'app .
Esercitazione su StackLayout.

In questa esercitazione apprenderai a:

Creare un Xamarin.FormsButton oggetto in XAML.
Rispondere alla selezione dell'elemento Button.
Modificare l'aspetto dell'elemento Button.

Si userà Visual Studio 2019 o Visual Studio per Mac per creare un'applicazione semplice che dimostri come personalizzare un oggetto Button. Gli screenshot seguenti illustrano l'applicazione finale:

Userai anche Ricaricamento rapido XAML per Xamarin.Forms visualizzare le modifiche dell'interfaccia utente senza ricompilare l'applicazione.

Creare un pulsante

6 minuti rimanenti

Visual Studio
Visual Studio per Mac

Per completare questa esercitazione è necessario Visual Studio 2019 (la versione più recente) con installato il carico di lavoro Sviluppo di applicazioni per dispositivi mobili con .NET. È inoltre necessario un Mac associato per compilare l'applicazione dell'esercitazione per iOS. Per informazioni sull'installazione della piattaforma Xamarin, vedere Installazione di Xamarin. Per informazioni sulla connessione di Visual Studio 2019 a un host di compilazione Mac, vedere Associa a Mac per lo sviluppo di Xamarin.iOS.

Avviare Visual Studio e creare una nuova app vuota Xamarin.Forms denominata ButtonTutorial.

Importante

I frammenti di codice C# e XAML in questa esercitazione richiedono che la soluzione sia denominata ButtonTutorial. Se si usa un nome diverso, si verificheranno errori di compilazione quando si copia il codice da questa esercitazione alla soluzione.

Per altre informazioni sulla libreria .NET Standard che viene creata, vedere Anatomia di un'applicazione Xamarin.Forms nell'approfondimento della Xamarin.Forms guida introduttiva.
Fare doppio clic su MainPage.xaml nel progetto ButtonTutorial in Esplora soluzioni per aprire il file. In MainPage.xaml rimuovere tutto il codice del modello e sostituirlo con il codice seguente:
```
<?xml version="1.0" encoding="utf-8"?>    
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
       <Button Text="Click me" />
   </StackLayout>
</ContentPage>
```
Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina costituita da un Button in uno StackLayout. La proprietà Button.Text specifica il testo visualizzato nel Button.
Nella barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS remoto o dell'emulatore Android prescelto:

Si noti che per impostazione predefinita un controllo Button tende a occupare tutto lo spazio consentito, in questo caso l'intera larghezza del relativo padre (StackLayout).

In Visual Studio arrestare l'applicazione.

Per completare questa esercitazione è necessario Visual Studio per Mac, la versione più recente, con installato il supporto della piattaforma Android e iOS. Sarà necessario anche Xcode, la versione più recente. Per altre informazioni sull'installazione della piattaforma Xamarin, vedere Installazione di Xamarin.

Avviare Visual Studio per Mac e creare una nuova app vuota Xamarin.Forms denominata ButtonTutorial.

Importante

I frammenti di codice C# e XAML in questa esercitazione richiedono che la soluzione sia denominata ButtonTutorial. Se si usa un nome diverso, si verificheranno errori di compilazione quando si copia il codice da questa esercitazione alla soluzione.

Per altre informazioni sulla libreria .NET Standard che viene creata, vedere Anatomia di un'applicazione Xamarin.Forms nell'approfondimento della Xamarin.Forms guida introduttiva.
Fare doppio clic su MainPage.xaml nel progetto ButtonTutorial nel riquadro della soluzione per aprire il file. In MainPage.xaml rimuovere tutto il codice del modello e sostituirlo con il codice seguente:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
       <Button Text="Click me" />
   </StackLayout>
</ContentPage>
```
Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina costituita da un Button in uno StackLayout. La proprietà Button.Text specifica il testo visualizzato nel Button.
Nella barra degli strumenti di Visual Studio per Mac premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS o dell'emulatore Android prescelto:

Si noti che per impostazione predefinita un controllo Button tende a occupare tutto lo spazio consentito, in questo caso l'intera larghezza del relativo padre (StackLayout).

In Visual Studio per Mac arrestare l'applicazione.

Gestire i clic

4 minuti rimanenti

Visual Studio
Visual Studio per Mac

In MainPage.xaml modificare la dichiarazione Button in modo che imposti un gestore per l'evento Clicked:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Questo codice imposta l'evento Clicked su un gestore eventi denominato OnButtonClicked che verrà creato nel passaggio successivo.
In Esplora soluzioni, nel progetto ButtonTutorial, espandere MainPage.xaml e fare doppio clic su MainPage.xaml.cs per aprirlo. In MainPage.xaml.cs aggiungere il gestore eventi OnButtonClicked alla classe:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
Con il tocco su Button viene eseguito il metodo OnButtonClicked. L'argomento sender è l'oggetto Button responsabile dell'attivazione dell'evento Clicked e può essere usato per accedere all'oggetto Button. Questo gestore dell'evento aggiorna il testo visualizzato dall'elemento Button.

Nota

Oltre all'evento Clicked, Button definisce anche gli eventi Pressed e Released. Per altre informazioni, vedere Pressione e rilascio del pulsante nella Xamarin.Forms guida pulsante .
Nella barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS remoto o dell'emulatore Android prescelto. Fare clic sull'elemento Button e osservare che il testo mostrato da esso cambia:

Per altre informazioni sulla gestione dei clic dei pulsanti, vedere Gestione dei clic dei pulsanti nella Xamarin.Forms guida pulsante .

In MainPage.xaml modificare la dichiarazione Button in modo che imposti un gestore per l'evento Clicked:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Questo codice imposta l'evento Clicked su un gestore eventi denominato OnButtonClicked che verrà creato nel passaggio successivo.
Nel riquadro della soluzione, nel progetto ButtonTutorial, espandere MainPage.xaml e fare doppio clic su MainPage.xaml.cs per aprirlo. In MainPage.xaml.cs aggiungere il gestore eventi OnButtonClicked alla classe:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
Con il tocco su Button viene eseguito il metodo OnButtonClicked. L'argomento sender è l'oggetto Button responsabile dell'attivazione dell'evento Clicked e può essere usato per accedere all'oggetto Button. Questo gestore dell'evento aggiorna il testo visualizzato dall'elemento Button.

Nota

Oltre all'evento Clicked, Button definisce anche gli eventi Pressed e Released. Per altre informazioni, vedere Pressione e rilascio del pulsante nella Xamarin.Forms guida pulsante .
Nella barra degli strumenti di Visual Studio per Mac premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS o dell'emulatore Android prescelto. Fare clic sull'elemento Button e osservare che il testo mostrato da esso cambia:

Per altre informazioni sulla gestione dei clic dei pulsanti, vedere Gestione dei clic dei pulsanti nella Xamarin.Forms guida pulsante .

Salvare aspetto

2 minuti rimanenti

Visual Studio
Visual Studio per Mac

In MainPage.xaml modificare la dichiarazione Button per modificarne l'aspetto visivo:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Questo codice imposta le proprietà che modificano l'aspetto visivo di Button. La proprietà TextColor imposta il colore del testo di Button, mentre la proprietà BackgroundColor imposta il colore dello sfondo del testo. La proprietà BorderColor imposta il colore di un'area che circonda Button, mentre la proprietà BorderWidth imposta la larghezza del bordo. Per impostazione predefinita, Button è rettangolare ma è possibile arrotondarne gli angoli impostando la proprietà CornerRadius su un valore appropriato. Inoltre, le dimensioni di Button vengono modificate impostando le relative proprietà WidthRequest e HeightRequest.
Se l'applicazione è ancora in esecuzione, salvare le modifiche apportate al file e l'interfaccia utente dell'applicazione verrà aggiornata automaticamente nel simulatore o nell'emulatore. In caso contrario, sulla barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS remoto o dell'emulatore Android prescelto. Si noti che l'aspetto di Button è stato modificato:

In Visual Studio arrestare l'applicazione.

Per altre informazioni sull'impostazione dell'aspetto Button , vedere Aspetto del pulsante nella Xamarin.Forms guida pulsante .

In MainPage.xaml modificare la dichiarazione Button per modificarne l'aspetto visivo:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Questo codice imposta le proprietà che modificano l'aspetto visivo di Button. La proprietà TextColor imposta il colore del testo di Button, mentre la proprietà BackgroundColor imposta il colore dello sfondo del testo. La proprietà BorderColor imposta il colore di un'area che circonda Button, mentre la proprietà BorderWidth imposta la larghezza del bordo. Per impostazione predefinita, Button è rettangolare ma è possibile arrotondarne gli angoli impostando la proprietà CornerRadius su un valore appropriato. Inoltre, le dimensioni di Button vengono modificate impostando le relative proprietà WidthRequest e HeightRequest.
Se l'applicazione è ancora in esecuzione, salvare le modifiche apportate al file e l'interfaccia utente dell'applicazione verrà aggiornata automaticamente nel simulatore o nell'emulatore. In caso contrario, sulla barra degli strumenti di Visual Studio per Mac premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS o dell'emulatore Android prescelto. Si noti che l'aspetto di Button è stato modificato:

In Visual Studio per Mac arrestare l'applicazione.

Per altre informazioni sull'impostazione dell'aspetto Button , vedere Aspetto del pulsante nella Xamarin.Forms guida pulsante .

Condividi tramite

Xamarin.Forms Esercitazione sul pulsante

Creare un pulsante

Gestire i clic

Salvare aspetto

Congratulazioni!

Passaggi successivi

Condividi tramite

Xamarin.Forms Esercitazione sul pulsante

Creare un pulsante

Gestire i clic

Salvare aspetto

Congratulazioni!

Passaggi successivi

Collegamenti correlati