Pulsanti

Un pulsante offre all'utente un modo per attivare un'azione immediata. Alcuni pulsanti sono specializzati per determinate attività, come spostamento, azioni ripetute o presentazione di menu.

Il framework XAML (Extensible Application Markup Language) offre un controllo standard e diversi controlli specializzati per i pulsanti.

È il controllo giusto?

Usa un controllo Button per consentire all'utente di avviare un'azione immediata, come l'invio di un modulo.

Non usare un controllo Button quando l'azione consiste nel passare a un'altra pagina. In questo caso, usa in alternativa un controllo HyperlinkButton. Per altre informazioni sui collegamenti ipertestuali, vedi Collegamenti ipertestuali.

Usa un controllo RepeatButton quando l'utente potrebbe voler attivare ripetutamente un'azione. Ad esempio, usa un controllo RepeatButton per aumentare o ridurre un valore in un contatore.

Usa un controllo DropDownButton quando il pulsante include un riquadro a comparsa contenente altre opzioni. La freccia di espansione predefinita indica visivamente che il pulsante include un riquadro a comparsa.

Usa un controllo SplitButton quando vuoi consentire all'utente di avviare un'azione immediata oppure di scegliere in modo indipendente opzioni aggiuntive.

Usa un controllo ToggleButton se vuoi che l'utente sia in grado di alternare immediatamente tra due stati che si escludono a vicenda e quando un pulsante è la soluzione ideale per le esigenze dell'interfaccia utente. A meno che l'interfaccia utente non richieda un pulsante, potrebbe essere preferibile usare un controllo AppBarToggleButton, CheckBox, RadioButtono ToggleSwitch.

Consigli

• Assicurati che lo scopo e lo stato di un pulsante siano chiari per l'utente.

• Se per la stessa decisione sono disponibili più pulsanti (come in una finestra di dialogo di conferma), presenta i pulsanti di conferma nell'ordine indicato di seguito, in cui [Esegui] e [Non eseguire] sono risposte specifiche all'istruzione principale:

  • OK/[Esegui]/Sì
    • [Non eseguire]/No
    • Annulla

• Presenta all'utente solo uno o due pulsanti alla volta, ad esempio Accept e Cancel. Se devi esporre più azioni, considera la possibilità di usare caselle di controllo o pulsanti di opzione in cui l'utente possa selezionare le azioni, con un singolo pulsante di comando per attivare tali azioni.

• Per un'azione che deve essere disponibile su più pagine all'interno dell'app, invece di duplicare il pulsante su più pagine, considera la possibilità di usare una barra inferiore dell'app.

Testo pulsante

Il contenuto di un pulsante è in genere testuale. Quando progetti il testo da visualizzare, segui questi consigli:

• Usa testo conciso, specifico e autoesplicativo che descriva chiaramente l'azione eseguita dal pulsante. Di solito il testo di un pulsante è rappresentato da un singolo verbo.

• Usa il tipo di carattere predefinito a meno che le linee guida sulla personalizzazione non indichino di usarne uno diverso.

• Per testo più breve, evita pulsanti di comando stretti e usa una larghezza minima di 120px.

• Per testo più lungo, evita pulsanti di comando larghi e limita il testo a una lunghezza massima di 26 caratteri.

• Se il contenuto di testo del pulsante è dinamico, ovvero viene localizzato, tieni presente come verrà ridimensionato il pulsante e cosa accadrà ai controlli circostanti.

Correzione necessaria: Pulsanti con riversamento del testo.
Opzione 1: Aumenta la larghezza del pulsante, raggruppa i pulsanti e usa il ritorno a capo se la lunghezza del testo è superiore a 26 caratteri.
Opzione 2: Aumenta l'altezza del pulsante e usa il ritorno a capo del testo.

Layout consigliato per un singolo pulsante

Se il layout richiede un unico pulsante, dovrà essere allineato a destra o a sinistra in base al contesto del contenitore.

• Nelle finestre di dialogo con un unico pulsante, il pulsante dovrà essere allineato a destra. Se la finestra di dialogo contiene un unico pulsante, assicurati che l'azione eseguita dal pulsante sia sicura e non distruttiva. Se usi ContentDialog e specifichi un singolo pulsante, questo verrà allineato automaticamente a destra.

  

• Se il pulsante viene visualizzato all'interno di un contenitore dell'interfaccia utente (ad esempio in un elemento notifica di tipo avviso popup, riquadro a comparsa o visualizzazione elenco), dovrai allineare a destra il pulsante all'interno del contenitore.

  

• Nelle pagine contenenti un singolo pulsante (ad esempio, un pulsante Apply nella parte inferiore di una pagina delle impostazioni), dovrai allineare a sinistra il pulsante. In questo modo, il pulsante risulterà allineato al resto del contenuto della pagina.

  

Pulsanti Indietro

Il pulsante Indietro è un elemento dell'interfaccia utente fornito dal sistema che consente lo spostamento all'indietro tramite lo stack Indietro o la cronologia di navigazione dell'utente. Non devi necessariamente creare un pulsante Indietro personalizzato, ma potrebbe essere necessario eseguire alcune operazioni per consentire una buona esperienza di spostamento indietro. Per altre informazioni, vedi Cronologia di spostamento e spostamento indietro per le app di Windows.

Esempi

In questo esempio vengono usati tre pulsanti, Salva, Non salvare e Annulla, in una finestra di dialogo che chiede agli utenti se vogliono salvare il lavoro.

Piattaforma UWP e WinUI 2

I controlli DropDownButton, SplitButton e ToggleSplitButton per le app UWP sono inclusi come parte di WinUI 2. Per maggiori informazioni, incluse le istruzioni per l'installazione, vedere WinUI 2. Le API per questi controlli sono presenti negli spazi dei nomi Windows.UI.Xaml.Controls e lo spazio dei nomi Microsoft.UI.Xaml.Controls.

È consigliabile usare la versione più recente di WinUI 2 per ottenere gli stili e i modelli più recenti per tutti i controlli. WinUI 2.2 o versioni successive include un nuovo modello per questi controlli che usa angoli arrotondati. Per altre informazioni, vedere Raggio dell'angolo.

Per usare il codice in questo articolo con WinUI 2, usare un alias in XAML (si usa muxc) per rappresentare le API della libreria dell'interfaccia utente di Windows incluse nel progetto. Per altre informazioni, vedere Attività iniziali di WinUI 2.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:DropDownButton />
<muxc:SplitButton />
<muxc:ToggleSplitButton />

Creare un pulsante

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

Questo esempio mostra un pulsante che risponde a un clic.

Crea il pulsante in XAML.

<Button Content="Subscribe" Click="SubscribeButton_Click"/>

In alternativa, puoi crearlo nel codice.

Button subscribeButton = new Button();
subscribeButton.Content = "Subscribe";
subscribeButton.Click += SubscribeButton_Click;

// Add the button to a parent container in the visual tree.
stackPanel1.Children.Add(subscribeButton);

Gestisci l'evento Click.

private async void SubscribeButton_Click(object sender, RoutedEventArgs e)
{
    // Call app specific code to subscribe to the service. For example:
    ContentDialog subscribeDialog = new ContentDialog
    {
        Title = "Subscribe to App Service?",
        Content = "Listen, watch, and play in high definition for only $9.99/month. Free to try, cancel anytime.",
        CloseButtonText = "Not Now",
        PrimaryButtonText = "Subscribe",
        SecondaryButtonText = "Try it"
    };

    ContentDialogResult result = await subscribeDialog.ShowAsync();
}

Interazione del pulsante

Quando tocchi un controllo Button con un dito o uno stilo o premi il pulsante sinistro del mouse mentre il puntatore si trova su di esso, il pulsante genera l'evento Click. Se un pulsante ha lo stato attivo, l'evento Click viene generato anche quando premi INVIO o la BARRA SPAZIATRICE.

In genere non è possibile gestire eventi PointerPressed di basso livello su un oggetto Button perché per il pulsante è previsto il comportamento di Click. Per altre informazioni, vedi Panoramica degli eventi e degli eventi indirizzati.

Puoi cambiare il modo in cui un pulsante genera l'evento Click modificando la proprietà ClickMode. Il valore predefinito di ClickMode è Release, ma puoi anche impostare la proprietà ClickMode di un pulsante su Hover o Press. Se il valore di ClickMode è Hover, l'evento Click non può essere generato con la tastiera o il tocco.

Contenuto del pulsante

Button è un controllo di contenuto della classe ContentControl. La proprietà del contenuto XAML è Content, che consente una sintassi simile alla seguente per XAML: <Button>A button's content</Button>. Puoi impostare qualsiasi oggetto come contenuto del pulsante. Se il contenuto è un oggetto UIElement, ne viene eseguito il rendering nel pulsante. Se il contenuto è un altro tipo di oggetto, nel pulsante viene visualizzata la rappresentazione di stringa.

Il contenuto di un pulsante è in genere testuale. Quando si progetta il testo, seguire le indicazioni di testo Button elencate in precedenza.

Puoi anche personalizzare gli elementi visivi che costituiscono l'aspetto del pulsante. Puoi ad esempio sostituire il testo con un'icona oppure aggiungere un'icona al testo.

In questo esempio, un oggetto StackPanel contenente testo e un'immagine viene impostato come contenuto di un pulsante.

<Button x:Name="Button2" Click="Button_Click" Width="80" Height="90">
    <StackPanel>
        <Image Source="/Assets/Slices.png" Height="52"/>
        <TextBlock Text="Slices" Foreground="Black" HorizontalAlignment="Center"/> 
    </StackPanel>
</Button>

Il pulsante ha questo aspetto.

Creare un pulsante di ripetizione

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

Un controllo RepeatButton è un pulsante che genera ripetutamente eventi Click da quando viene premuto fino a quando viene rilasciato. Imposta la proprietà Delay per specificare il tempo che deve attendere RepeatButton da quando viene premuto fino a quando inizia a ripetere l'azione di clic. Imposta la proprietà Interval per specificare il tempo tra le ripetizioni dell'azione di clic. I tempi per entrambe le proprietà sono specificati in millisecondi.

L'esempio seguente mostra due controlli RepeatButton i cui rispettivi eventi Click vengono usati per aumentare e ridurre il valore visualizzato in un blocco di testo.

<StackPanel>
    <RepeatButton Width="100" Delay="500" Interval="100" Click="Increase_Click">Increase</RepeatButton>
    <RepeatButton Width="100" Delay="500" Interval="100" Click="Decrease_Click">Decrease</RepeatButton>
    <TextBlock x:Name="clickTextBlock" Text="Number of Clicks:" />
</StackPanel>

private static int _clicks = 0;
private void Increase_Click(object sender, RoutedEventArgs e)
{
    _clicks += 1;
    clickTextBlock.Text = "Number of Clicks: " + _clicks;
}

private void Decrease_Click(object sender, RoutedEventArgs e)
{
    if(_clicks > 0)
    {
        _clicks -= 1;
        clickTextBlock.Text = "Number of Clicks: " + _clicks;
    }
}

Creare un pulsante a discesa

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

DropDownButton è un pulsante che mostra una freccia di espansione per indicare visivamente la presenza di un riquadro a comparsa associato che contiene altre opzioni. Ha lo stesso comportamento di un controllo Button standard con un riquadro a comparsa. Solo l'aspetto è diverso.

Il pulsante a discesa eredita l'evento Click, ma in genere non viene usato. In alternativa viene usata la proprietà Flyout per associare un riquadro a comparsa e richiamare azioni con le opzioni di menu del riquadro a comparsa. Il riquadro a comparsa viene aperto automaticamente quando viene fatto clic sul pulsante. Assicurati di specificare la proprietà Placement del riquadro a comparsa per garantirne la visualizzazione nella posizione desiderata in relazione al pulsante. L'algoritmo di posizionamento predefinito potrebbe non determinare il posizionamento previsto in tutte le situazioni. Per altre info sui riquadri a comparsa, vedi Riquadri a comparsa e menu a comparsa e barra dei menu.

Esempio: pulsante a discesa

Questo esempio mostra come creare un pulsante a discesa con un riquadro a comparsa contenente i comandi per l'allineamento del paragrafo in un controllo RichEditBox. Per il codice e altre informazioni, vedi Casella di modifica RTF.

<DropDownButton ToolTipService.ToolTip="Alignment">
    <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="14" Text="&#xE8E4;"/>
    <DropDownButton.Flyout>
        <MenuFlyout Placement="BottomEdgeAlignedLeft">
            <MenuFlyoutItem Text="Left" Icon="AlignLeft" Tag="left"
                            Click="AlignmentMenuFlyoutItem_Click"/>
            <MenuFlyoutItem Text="Center" Icon="AlignCenter" Tag="center"
                            Click="AlignmentMenuFlyoutItem_Click"/>
            <MenuFlyoutItem Text="Right" Icon="AlignRight" Tag="right"
                            Click="AlignmentMenuFlyoutItem_Click"/>
        </MenuFlyout>
    </DropDownButton.Flyout>
</DropDownButton>

private void AlignmentMenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    var option = ((MenuFlyoutItem)sender).Tag.ToString();

    Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
    if (selectedText != null)
    {
        // Apply the alignment to the selected paragraphs.
        var paragraphFormatting = selectedText.ParagraphFormat;
        if (option == "left")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Left;
        }
        else if (option == "center")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Center;
        }
        else if (option == "right")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Right;
        }
    }
}

Creare un pulsante di menu combinato

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

Un controllo SplitButton è composto da due parti che possono essere richiamate separatamente. Una parte funziona come pulsante standard e richiama un'azione immediata. L'altra parte richiama un riquadro a comparsa che contiene altre opzioni tra cui scegliere.

Il comportamento tipico per un pulsante di menu combinato è il seguente:

• Quando l'utente seleziona la parte del pulsante, viene gestito l'evento Click per richiamare l'opzione attualmente selezionata nell'elenco a discesa.

• Quando l'elenco a discesa è aperto, la chiamata degli elementi dell'elenco viene gestita per modificare l'opzione selezionata e quindi richiamarla. È importante richiamare l'elemento riquadro a comparsa perché l'evento Click del pulsante non si verifica quando viene usato l'input tocco.

Esempio: pulsante di menu combinato

Questo esempio mostra come creare un pulsante di menu combinato che consente di modificare il colore in primo piano del testo selezionato in un controllo RichEditBox. Per il codice e altre informazioni, vedi Casella di modifica RTF. Come valore predefinito per la proprietà Placement, il riquadro a comparsa del pulsante di menu combinato usa BottomEdgeAlignedLeft. Non è possibile eseguire l'override di questo valore.

<SplitButton ToolTipService.ToolTip="Foreground color"
             Click="BrushButtonClick">
    <Border x:Name="SelectedColorBorder" Width="20" Height="20"/>
    <SplitButton.Flyout>
        <Flyout x:Name="BrushFlyout">
            <!-- Set SingleSelectionFollowsFocus="False"
                 so that keyboard navigation works correctly. -->
            <GridView ItemsSource="{x:Bind ColorOptions}"
                      SelectionChanged="BrushSelectionChanged"
                      SingleSelectionFollowsFocus="False"
                      SelectedIndex="0" Padding="0">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Rectangle Fill="{Binding}" Width="20" Height="20"/>
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="Margin" Value="2"/>
                        <Setter Property="MinWidth" Value="0"/>
                        <Setter Property="MinHeight" Value="0"/>
                    </Style>
                </GridView.ItemContainerStyle>
            </GridView>
        </Flyout>
    </SplitButton.Flyout>
</SplitButton>

public sealed partial class MainPage : Page
{
    // Color options that are bound to the grid in the split button flyout.
    private List<SolidColorBrush> ColorOptions = new List<SolidColorBrush>();
    private SolidColorBrush CurrentColorBrush = null;

    public MainPage()
    {
        this.InitializeComponent();

        // Add color brushes to the collection.
        ColorOptions.Add(new SolidColorBrush(Colors.Black));
        ColorOptions.Add(new SolidColorBrush(Colors.Red));
        ColorOptions.Add(new SolidColorBrush(Colors.Orange));
        ColorOptions.Add(new SolidColorBrush(Colors.Yellow));
        ColorOptions.Add(new SolidColorBrush(Colors.Green));
        ColorOptions.Add(new SolidColorBrush(Colors.Blue));
        ColorOptions.Add(new SolidColorBrush(Colors.Indigo));
        ColorOptions.Add(new SolidColorBrush(Colors.Violet));
        ColorOptions.Add(new SolidColorBrush(Colors.White));
    }

    private void BrushButtonClick(object sender, object e)
    {
        // When the button part of the split button is clicked,
        // apply the selected color.
        ChangeColor();
    }

    private void BrushSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        // When the flyout part of the split button is opened and the user selects
        // an option, set their choice as the current color, apply it, then close the flyout.
        CurrentColorBrush = (SolidColorBrush)e.AddedItems[0];
        SelectedColorBorder.Background = CurrentColorBrush;
        ChangeColor();
        BrushFlyout.Hide();
    }

    private void ChangeColor()
    {
        // Apply the color to the selected text in a RichEditBox.
        Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
        if (selectedText != null)
        {
            Windows.UI.Text.ITextCharacterFormat charFormatting = selectedText.CharacterFormat;
            charFormatting.ForegroundColor = CurrentColorBrush.Color;
            selectedText.CharacterFormat = charFormatting;
        }
    }
}

Creare un pulsante di menu combinato con interruttore

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

Un controllo ToggleSplitButton è composto da due parti che possono essere richiamate separatamente. Una parte funziona come un interruttore che è possibile attivare o disattivare. L'altra parte richiama un riquadro a comparsa che contiene altre opzioni tra cui scegliere.

Un pulsante di menu combinato con interruttore viene in genere usato per abilitare o disabilitare una funzionalità quando questa offre più opzioni selezionabili dall'utente. In un editor di documenti, ad esempio, potrebbe essere usato per abilitare o disabilitare elenchi e sceglierne lo stile usando l'elenco a discesa.

Differenze rispetto a ToggleButton

A differenza di ToggleButton, ToggleSplitButton non ha uno stato indeterminato. Di conseguenza, è consigliabile tenere presenti queste differenze:

• ToggleSplitButton non ha una proprietà IsThreeState o un evento Indeterminate.
• La proprietà ToggleSplitButton.IsChecked è semplicemente un valore booleano, non un valore<Nullable>.
• ToggleSplitButton ha solo l'evento IsCheckedChanged. Non ha eventi Checked e Unchecked separati.

Esempio: pulsante di menu combinato con interruttore

L'esempio seguente mostra come un pulsante di menu combinato con interruttore può essere usato per abilitare o disabilitare la formattazione di un elenco e modificare lo stile dell'elenco in un controllo RichEditBox. Per il codice e altre informazioni, vedi Casella di modifica RTF. Come valore predefinito per la proprietà Placement, il riquadro a comparsa del pulsante di menu combinato con interruttore usa BottomEdgeAlignedLeft. Non è possibile eseguire l'override di questo valore.

<ToggleSplitButton x:Name="ListButton"
                   ToolTipService.ToolTip="List style"
                   Click="ListButton_Click"
                   IsCheckedChanged="ListStyleButton_IsCheckedChanged">
    <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="14" Text="&#xE8FD;"/>
    <ToggleSplitButton.Flyout>
        <Flyout>
            <ListView x:Name="ListStylesListView"
                      SelectionChanged="ListStylesListView_SelectionChanged"
                      SingleSelectionFollowsFocus="False">
                <StackPanel Tag="bullet" Orientation="Horizontal">
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE7C8;"/>
                    <TextBlock Text="Bullet" Margin="8,0"/>
                </StackPanel>
                <StackPanel Tag="alpha" Orientation="Horizontal">
                    <TextBlock Text="A" FontSize="24" Margin="2,0"/>
                    <TextBlock Text="Alpha" Margin="8"/>
                </StackPanel>
                <StackPanel Tag="numeric" Orientation="Horizontal">
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xF146;"/>
                    <TextBlock Text="Numeric" Margin="8,0"/>
                </StackPanel>
                <TextBlock Tag="none" Text="None" Margin="28,0"/>
            </ListView>
        </Flyout>
    </ToggleSplitButton.Flyout>
</ToggleSplitButton>

private void ListStyleButton_IsCheckedChanged(ToggleSplitButton sender, ToggleSplitButtonIsCheckedChangedEventArgs args)
{
    // Use the toggle button to turn the selected list style on or off.
    if (((ToggleSplitButton)sender).IsChecked == true)
    {
        // On. Apply the list style selected in the drop down to the selected text.
        var listStyle = ((FrameworkElement)(ListStylesListView.SelectedItem)).Tag.ToString();
        ApplyListStyle(listStyle);
    }
    else
    {
        // Off. Make the selected text not a list,
        // but don't change the list style selected in the drop down.
        ApplyListStyle("none");
    }
}

private void ListStylesListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var listStyle = ((FrameworkElement)(e.AddedItems[0])).Tag.ToString();

    if (ListButton.IsChecked == true)
    {
        // Toggle button is on. Turn it off...
        if (listStyle == "none")
        {
            ListButton.IsChecked = false;
        }
        else
        {
            // or apply the new selection.
            ApplyListStyle(listStyle);
        }
    }
    else
    {
        // Toggle button is off. Turn it on, which will apply the selection
        // in the IsCheckedChanged event handler.
        ListButton.IsChecked = true;
    }
}

private void ApplyListStyle(string listStyle)
{
    Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
    if (selectedText != null)
    {
        // Apply the list style to the selected text.
        var paragraphFormatting = selectedText.ParagraphFormat;
        if (listStyle == "none")
        {  
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.None;
        }
        else if (listStyle == "bullet")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.Bullet;
        }
        else if (listStyle == "numeric")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.Arabic;
        }
        else if (listStyle == "alpha")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.UppercaseEnglishLetter;
        }
        selectedText.ParagraphFormat = paragraphFormatting;
    }
}

Scaricare il codice di esempio

• Esempio di Raccolta WinUI: questo campione mostra tutti i controlli XAML in un formato interattivo.

Articoli correlati

• Classe Button
• Pulsanti di opzione
• Caselle di controllo
• Interruttori