Pulsante

Articolo
10/29/2024

L'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) Button visualizza il testo e risponde a un tocco o a un clic che indirizza l'app a eseguire un'attività. Un Button oggetto visualizza in genere una stringa di testo breve che indica un comando, ma può anche visualizzare un'immagine bitmap o una combinazione di testo e un'immagine. Quando l'oggetto Button viene premuto con un dito o fatto clic con un mouse, avvia tale comando.

Button definisce le proprietà seguenti:

BorderColor, di tipo Color, descrive il colore del bordo del pulsante.
BorderWidth, di tipo double, definisce la larghezza del bordo del pulsante.
CharacterSpacing, di tipo double, definisce la spaziatura tra i caratteri del testo del pulsante.
Command, di tipo ICommand, definisce il comando eseguito quando viene toccato il pulsante.
CommandParameter, di tipo object, è il parametro passato a Command.
ContentLayout, di tipo ButtonContentLayout, definisce l'oggetto che controlla la posizione dell'immagine del pulsante e la spaziatura tra l'immagine e il testo del pulsante.
CornerRadius, di tipo int, descrive il raggio dell'angolo del bordo del pulsante.
FontAttributes, di tipo FontAttributes, determina lo stile del testo.
FontAutoScalingEnabled, di tipo bool, definisce se il testo del pulsante rifletterà le preferenze di ridimensionamento impostate nel sistema operativo. Il valore predefinito di questa proprietà è true.
FontFamily, di tipo string, definisce la famiglia di caratteri.
FontSize, di tipo double, definisce le dimensioni del carattere.
ImageSource, di tipo ImageSource, specifica un'immagine bitmap da visualizzare come contenuto del pulsante.
LineBreakMode, di tipo LineBreakMode, determina il modo in cui il testo deve essere gestito quando non può essere inserito in una riga.
Padding, di tipo Thickness, determina la spaziatura interna del pulsante.
Text, di tipo string, definisce il testo visualizzato come contenuto del pulsante.
TextColor, di tipo Color, descrive il colore del testo del pulsante.
TextTransform, di tipo TextTransform, definisce la combinazione di maiuscole e minuscole del testo del pulsante.

Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.

Nota

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

Definisce inoltre Button Clickedgli eventi , Pressede Released . L'evento Clicked viene generato quando un Button tocco con un dito o un puntatore del mouse viene rilasciato dalla superficie del pulsante. L'evento Pressed viene generato quando un dito preme un dito su un Buttonoggetto oppure viene premuto un pulsante del mouse con il puntatore posizionato su Button. L'evento Released viene generato quando viene rilasciato il dito o il pulsante del mouse. In genere, viene generato anche un Clicked evento contemporaneamente all'evento Released , ma se il puntatore del mouse o il dito si allontana dalla superficie di prima del Button rilascio, l'evento Clicked potrebbe non verificarsi.

Importante

Per rispondere ai tap, un Button oggetto deve avere la relativa IsEnabled proprietà impostata su true .

Creare un pulsante

Per creare un pulsante, creare un Button oggetto e gestirlo Clicked .

L'esempio XAML seguente illustra come creare un oggetto Button:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonDemos.BasicButtonClickPage"
             Title="Basic Button Click">
    <StackLayout>
        <Button Text="Click to Rotate Text!"
                VerticalOptions="Center"
                HorizontalOptions="Center"
                Clicked="OnButtonClicked" />
        <Label x:Name="label"
               Text="Click the Button above"
               FontSize="18"
               VerticalOptions="Center"
               HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

La proprietà Text specifica il testo visualizzato nel Button. L'evento Clicked è impostato su un gestore eventi denominato OnButtonClicked. Questo gestore si trova nel file code-behind:

public partial class BasicButtonClickPage : ContentPage
{
    public BasicButtonClickPage ()
    {
        InitializeComponent ();
    }

    async void OnButtonClicked(object sender, EventArgs args)
    {
        await label.RelRotateTo(360, 1000);
    }
}

In questo esempio, quando viene toccato , Button il OnButtonClicked metodo viene eseguito. L'argomento sender è l'oggetto Button responsabile di questo evento. È possibile usarlo per accedere all'oggetto Button o per distinguere tra più Button oggetti che condividono lo stesso Clicked evento. Il Clicked gestore chiama una funzione di animazione che ruota i Label 360 gradi in 1000 millisecondi:

Il codice C# equivalente per creare un Button è:

Button button = new Button
{
    Text = "Click to Rotate Text!",
    VerticalOptions = LayoutOptions.Center,
    HorizontalOptions = LayoutOptions.Center
};
button.Clicked += async (sender, args) => await label.RelRotateTo(360, 1000);

Usare l'interfaccia del comando

Un'app può rispondere ai Button tap senza gestire l'evento Clicked . Button implementa un meccanismo di notifica alternativo denominato comando o interfaccia di comando. Questo è costituito da due proprietà:

Command di tipo ICommand, un'interfaccia definita nello spazio dei System.Windows.Input nomi .
CommandParameter proprietà di tipo Object.

Questo approccio è particolarmente adatto in relazione all'associazione dati e in particolare quando si implementa il modello Model-View-ViewModel (MVVM). In un'applicazione MVVM il modello di visualizzazione definisce le proprietà di tipo ICommand che vengono quindi connesse agli Button oggetti con data binding. .NET MAUI definisce Command anche le classi e Command<T> che implementano l'interfaccia ICommand e supportano il modello di visualizzazione nella definizione delle proprietà di tipo ICommand. Per altre informazioni sui comandi, vedere Comando.

L'esempio seguente illustra una classe viewmodel molto semplice che definisce una proprietà di tipo double denominata Numbere due proprietà di tipo ICommand denominate MultiplyBy2Command e DivideBy2Command:

public class CommandDemoViewModel : INotifyPropertyChanged
{
    double number = 1;

    public event PropertyChangedEventHandler PropertyChanged;

    public ICommand MultiplyBy2Command { get; private set; }
    public ICommand DivideBy2Command { get; private set; }

    public CommandDemoViewModel()
    {
        MultiplyBy2Command = new Command(() => Number *= 2);
        DivideBy2Command = new Command(() => Number /= 2);
    }

    public double Number
    {
        get
        {
            return number;
        }
        set
        {
            if (number != value)
            {
                number = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Number"));
            }
        }
    }
}

In questo esempio le due ICommand proprietà vengono inizializzate nel costruttore della classe con due oggetti di tipo Command. I Command costruttori includono una piccola funzione (denominata argomento del execute costruttore) che raddoppia o metà il valore della Number proprietà.

L'esempio XAML seguente usa la CommandDemoViewModel classe :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ButtonDemos"
             x:Class="ButtonDemos.BasicButtonCommandPage"
             Title="Basic Button Command">
    <ContentPage.BindingContext>
        <local:CommandDemoViewModel />
    </ContentPage.BindingContext>

    <StackLayout>
        <Label Text="{Binding Number, StringFormat='Value is now {0}'}"
               FontSize="18"
               VerticalOptions="Center"
               HorizontalOptions="Center" />
        <Button Text="Multiply by 2"
                VerticalOptions="Center"
                HorizontalOptions="Center"
                Command="{Binding MultiplyBy2Command}" />
        <Button Text="Divide by 2"
                VerticalOptions="Center"
                HorizontalOptions="Center"
                Command="{Binding DivideBy2Command}" />
    </StackLayout>
</ContentPage>

In questo esempio, l'elemento Label e due Button oggetti contengono associazioni alle tre proprietà della CommandDemoViewModel classe . Man mano che vengono toccati i due Button oggetti, i comandi vengono eseguiti e il numero cambia valore. Il vantaggio di questo approccio rispetto Clicked ai gestori è che tutta la logica che coinvolge la funzionalità di questa pagina si trova nel modello di visualizzazione anziché nel file code-behind, ottenendo una migliore separazione dell'interfaccia utente dalla logica di business.

È anche possibile che gli Command oggetti controllino l'abilitazione e la disabilitazione degli Button oggetti. Si supponga, ad esempio, di voler limitare l'intervallo di valori numerici compresi tra 2¹⁰ e 2-10. È possibile aggiungere un'altra funzione al costruttore (denominato canExecute argomento) che restituisce true se Button deve essere abilitato:

public class CommandDemoViewModel : INotifyPropertyChanged
{
    ···
    public CommandDemoViewModel()
    {
        MultiplyBy2Command = new Command(
            execute: () =>
            {
                Number *= 2;
                ((Command)MultiplyBy2Command).ChangeCanExecute();
                ((Command)DivideBy2Command).ChangeCanExecute();
            },
            canExecute: () => Number < Math.Pow(2, 10));

        DivideBy2Command = new Command(
            execute: () =>
            {
                Number /= 2;
                ((Command)MultiplyBy2Command).ChangeCanExecute();
                ((Command)DivideBy2Command).ChangeCanExecute();
            },
            canExecute: () => Number > Math.Pow(2, -10));
    }
    ···
}

In questo esempio, le chiamate al metodo di Command sono necessarie in modo che il Command metodo possa chiamare il canExecute metodo e determinare se deve Button essere disabilitato o ChangeCanExecute meno. Con questa modifica del codice, man mano che il numero raggiunge il limite, l'oggetto Button è disabilitato.

È anche possibile associare due o più Button elementi alla stessa ICommand proprietà. Gli Button elementi possono essere distinti usando la CommandParameter proprietà di Button. In questo caso, si vuole usare la classe generica Command<T> . L'oggetto CommandParameter viene quindi passato come argomento ai execute metodi e canExecute . Per altre informazioni, vedere Comando.

Premere e rilasciare il pulsante

L'evento Pressed viene generato quando un dito preme un dito su un Buttonoggetto oppure viene premuto un pulsante del mouse con il puntatore posizionato su Button. L'evento Released viene generato quando viene rilasciato il dito o il pulsante del mouse. In genere, viene generato anche un Clicked evento contemporaneamente all'evento Released , ma se il puntatore del mouse o il dito si allontana dalla superficie di prima del Button rilascio, l'evento Clicked potrebbe non verificarsi.

L'esempio XAML seguente mostra un Label oggetto e un Button oggetto con gestori collegati per gli Pressed eventi e Released :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonDemos.PressAndReleaseButtonPage"
             Title="Press and Release Button">
    <StackLayout>
        <Button Text="Press to Rotate Text!"
                VerticalOptions="Center"
                HorizontalOptions="Center"
                Pressed="OnButtonPressed"
                Released="OnButtonReleased" />
        <Label x:Name="label"
               Text="Press and hold the Button above"
               FontSize="18"
               VerticalOptions="Center"
               HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

Il file code-behind anima l'oggetto Label quando si verifica un Pressed evento, ma sospende la rotazione quando si verifica un Released evento:

public partial class PressAndReleaseButtonPage : ContentPage
{
    IDispatcherTimer timer;
    Stopwatch stopwatch = new Stopwatch();

    public PressAndReleaseButtonPage()
    {
        InitializeComponent();

        timer = Dispatcher.CreateTimer();
        timer.Interval = TimeSpan.FromMilliseconds(16);
        timer.Tick += (s, e) =>
        {
            label.Rotation = 360 * (stopwatch.Elapsed.TotalSeconds % 1);
        };
    }

    void OnButtonPressed(object sender, EventArgs args)
    {
        stopwatch.Start();
        timer.Start();
    }

    void OnButtonReleased(object sender, EventArgs args)
    {
        stopwatch.Stop();
        timer.Stop();
    }
}

Il risultato è che l'unico Label ruota mentre un dito è in contatto con , Buttone si arresta quando il dito viene rilasciato.

Stati di visualizzazione pulsante

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

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

<Button Text="Click me!"
        ...>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroupList>
            <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>
                <VisualState x:Name="PointerOver" />            
            </VisualStateGroup>
        </VisualStateGroupList>
    </VisualStateManager.VisualStateGroups>
</Button>

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

Importante

Affinché un Button oggetto restituisca lo Normal stato, deve VisualStateGroup anche definire uno PointerOver stato. Se si usano gli stili ResourceDictionary creati dal modello di progetto dell'app MAUI .NET, si avrà già uno stile implicito Button che definisce lo PointerOver stato.

Per altre informazioni sugli stati di visualizzazione, vedere Stati di visualizzazione.

Usare bitmap con pulsanti

La Button classe definisce una ImageSource proprietà che consente di visualizzare una piccola immagine bitmap in Button, da sola o in combinazione con il testo. È anche possibile specificare la disposizione del testo e dell'immagine. La ImageSource proprietà è di tipo ImageSource, il che significa che le bitmap possono essere caricate da un file, una risorsa incorporata, un URI o un flusso.

Le bitmap non vengono ridimensionate per adattarsi a un oggetto Button. Le dimensioni migliori sono in genere comprese tra 32 e 64 unità indipendenti dal dispositivo, a seconda delle dimensioni desiderate per la bitmap.

È possibile specificare la modalità di disposizione delle proprietà e ImageSource nell'oggetto Button utilizzando la ContentLayout proprietà di Button.Text Questa proprietà è di tipo ButtonContentLayoute il relativo costruttore ha due argomenti:

Membro dell'enumerazione ImagePosition : Left, Top, Righto Bottom che indica la modalità di visualizzazione della bitmap rispetto al testo.
Valore double per la spaziatura tra la bitmap e il testo.

In XAML puoi creare e Button impostare la ContentLayout proprietà specificando solo il membro di enumerazione, la spaziatura o entrambi in qualsiasi ordine separato da virgole:

<Button Text="Button text"
        ImageSource="button.png"
        ContentLayout="Right, 20" />

Il codice C# equivalente è il seguente:

Button button = new Button
{
    Text = "Button text",
    ImageSource = new FileImageSource
    {
        File = "button.png"
    },
    ContentLayout = new Button.ButtonContentLayout(Button.ButtonContentLayout.ImagePosition.Right, 20)
};

Nota

Se un Button oggetto contiene testo e un'immagine potrebbe non essere possibile adattare tutto il contenuto all'interno del pulsante, quindi è consigliabile ridimensionare manualmente l'immagine per ottenere il layout desiderato.

Disabilitare un pulsante

In alcuni casi un'app entra in uno stato in cui un Button clic non è un'operazione valida. In questi casi, l'oggetto Button può essere disabilitato impostando la relativa IsEnabled proprietà su false.

Condividi tramite