Condividi tramite

Controllo Pulsante in Power Apps

  • Articolo

Controllo che permette all'utente di interagire con l'app tramite clic o tocco.

Descrizione

Configura la proprietà OnSelect di un controllo Pulsante per l'esecuzione di una o più formule quando l'utente tocca o fa clic sul controllo.

Proprietà chiave

OnSelect: azioni da eseguire quando l'utente tocca o fa clic su un controllo.

Text: testo visualizzato in un controllo o che l'utente digita in un controllo.

Proprietà aggiuntive

Align: posizione del testo in relazione al centro orizzontale del relativo controllo.

AutoDisableOnSelect: disabilita automaticamente il controllo durante l'esecuzione del comportamento OnSelect.

BorderColor: colore del bordo di un controllo.

BorderStyle: indica se il bordo di un controllo è Solid (Tinta unita), Dashed (Tratteggiato), Dotted (Punteggiato) o None (Nessuno).

BorderThickness: spessore del bordo di un controllo.

Color: colore del testo di un controllo.

DisplayMode: indica se il controllo consente l'input dell'utente (Edit), visualizza solo i dati (View) o è disabilitato (Disabled).

DisabledBorderColor: colore del bordo di un controllo se la relativa proprietà DisplayMode è impostata su Disabled.

DisabledColor: colore del testo di un controllo se la relativa proprietà DisplayMode è impostata su Disabled.

DisabledFill: colore dello sfondo di un controllo se la relativa proprietà DisplayMode è impostata su Disabled.

FocusedBorderColor: colore del bordo di un controllo quando è evidenziato.

FocusedBorderThickness: spessore del bordo di un controllo quando è evidenziato.

Fill: colore dello sfondo di un controllo.

Font: nome della famiglia di caratteri in cui viene visualizzato il testo.

FontWeight: spessore del testo di un controllo. Può essere Bold (Grassetto), Semibold (Semibold), Normal (Normale) o Lighter (Sottile).

Height: distanza tra i bordi superiore e inferiore del controllo.

HoverBorderColor: colore del bordo di un controllo quando l'utente posiziona il puntatore del mouse su di esso.

HoverColor: colore del testo di un controllo quando l'utente posiziona il puntatore del mouse su tale controllo.

HoverFill: colore dello sfondo di un controllo quando l'utente posiziona il puntatore del mouse su di esso.

Italic: indica se il testo di un controllo è in corsivo.

PaddingBottom: distanza tra il testo in un controllo e il bordo inferiore del controllo.

PaddingLeft: distanza tra il testo in un controllo e il bordo sinistro del controllo.

PaddingRight: distanza tra il testo in un controllo e il bordo destro del controllo.

PaddingTop: distanza tra il testo in un controllo e il bordo superiore del controllo.

Pressed: true mentre viene premuto un controllo, altrimenti false.

PressedBorderColor: colore del bordo di un controllo quando l'utente tocca o fa clic su tale controllo.

PressedColor: colore del testo di un controllo quando l'utente tocca o fa clic su tale controllo.

PressedFill: colore dello sfondo di un controllo quando l'utente tocca o fa clic su tale controllo.

RadiusBottomLeft: grado di arrotondamento dell'angolo inferiore sinistro di un controllo.

RadiusBottomRight: grado di arrotondamento dell'angolo inferiore destro di un controllo.

RadiusTopLeft: grado di arrotondamento dell'angolo superiore sinistro di un controllo.

RadiusTopRight: grado di arrotondamento dell'angolo superiore destro di un controllo.

Size: dimensione del carattere del testo visualizzato in un controllo.

Strikethrough: indica se viene visualizzata una riga all'interno del testo di un controllo.

TabIndex: ordine di spostamento tramite tastiera in relazione ad altri controlli.

Tooltip: testo descrittivo visualizzato quando l'utente posiziona il mouse su un controllo.

Underline: indica se il testo visualizzato nel controllo è sottolineato.

VerticalAlign: posizione del testo di un controllo in relazione al centro verticale di tale controllo.

Visible: indica se un controllo viene visualizzato o è nascosto.

Width: distanza tra i bordi sinistro e destro di un controllo.

X: distanza tra il bordo sinistro di un controllo e il bordo sinistro del contenitore padre o della schermata se non c'è un contenitore padre.

Y: distanza tra il bordo superiore di un controllo e il bordo superiore del contenitore padre o della schermata se non c'è un contenitore padre.

Navigate( ScreenName, ScreenTransitionValue )

Esempi

Aggiungere una formula di base a un pulsante

  1. Aggiungi un controllo Input di testo e denominalo Source.

    Non sai come aggiungere un controllo, assegnargli un nome e configurarlo?

  2. Aggiungi un controllo Pulsante e quindi impostane la proprietà Text su "Aggiungi" e la proprietà OnSelect sulla formula seguente:
    UpdateContext({Total:Total + Value(Source.Text)})

    Sono necessarie altre informazioni sulla funzione UpdateContext o su altre funzioni?

  3. Aggiungi un controllo Etichetta, imposta la relativa proprietà Text nella barra della formula su Valore (totale), quindi premi F5.

  4. Cancella il testo predefinito da Origine, digita un numero, quindi tocca o fai clic su Aggiungi.

    Il controllo Etichetta mostrerà il numero digitato.

  5. Cancella il numero da Origine, digita un altro numero, quindi tocca o fai clic su Aggiungi.

    Il controllo Etichetta mostra la somma dei due numeri digitati.

  6. (facoltativo) Ripeti il passaggio precedente una o più volte.

  7. Per tornare all'area di lavoro predefinita, premi ESC oppure tocca o fai clic sull'icona di chiusura nell'angolo superiore destro.

Configurare un pulsante con più formule

Aggiungi una formula che cancella il controllo Input di testo tra le voci.

  1. Imposta la proprietà HintText di Origine su "Immettere un numero".

  2. Imposta la proprietà OnSelect di Aggiungi su questa formula:

    UpdateContext({Total:Total + Value(Source.Text)});
    UpdateContext({ClearInput: ""})

    Nota

    Separa più formule con un punto e virgola ";".

  3. Imposta la proprietà Default di Origine su ClearInput.

  4. Premi F5 e quindi testa l'app aggiungendo contemporaneamente diversi numeri.

Aggiungere un altro pulsante per reimpostare il totale

Aggiungi un secondo pulsante per cancellare il totale tra i calcoli.

  1. Aggiungi un controllo Pulsante e quindi impostane la proprietà Text su "Deseleziona" e la proprietà OnSelect su questa formula:

    UpdateContext({Total:0})

  2. Premi F5, aggiungi diversi numeri insieme, quindi tocca o fai clic su Deseleziona per reimpostare il totale.

Modificare l'aspetto di un pulsante

Modificare la forma di un pulsante

Per impostazione predefinita, Power Apps crea un controllo Pulsante rettangolare con angoli arrotondati. Puoi apportare modifiche di base alla forma di un controllo Pulsante impostando le relative proprietà Height, Width e Radius.

Nota

Icone e forme forniscono un'ampia gamma di scelte e possono eseguire alcune delle stesse funzioni di base eseguite dai controlli Pulsante. Icone e forme tuttavia non dispongono di una proprietà Text.

  1. Aggiungi un controllo Pulsante e imposta le relative proprietà Height e Width su 300 per creare un pulsante quadrato di grandi dimensioni.

  2. Modifica le proprietà RadiusTopLeft, RadiusTopRight, RadiusBottomLeft e RadiusBottomRight per regolare il livello di curvatura a ogni angolo. Di seguito sono riportati alcuni esempi di forme diverse, ognuna creata usando un pulsante quadrato 300 x 300:

Modificare il colore di un pulsante al passaggio del mouse

Per impostazione predefinita, il colore di riempimento di un controllo Pulsante verrà attenuato del 20% al passaggio del mouse. Puoi modificare questo comportamento cambiando la proprietà HoverFill che usa la funzione ColorFade. Se imposti la formula ColorFade su una percentuale positiva, il colore diventa più chiaro al passaggio del mouse, mentre una percentuale negativa rende il colore più scuro.

  • Modifica la percentuale di ColorFade della proprietà HoverFill di uno dei pulsanti creati e osserva gli effetti.

Puoi anche specificare il colore di un controllo Pulsante impostando la relativa proprietà HoverFill su una formula che contiene la funzione ColorValue anziché la funzione ColorFade, come in ColorValue("Rosso").

Nota

Il valore del colore può essere una qualsiasi definizione di colore CSS, ovvero un nome o un valore esadecimale.

  • Sostituisci la funzione ColorFade con una funzione ColorValue in uno dei pulsanti creati e osserva gli effetti.

Linee guida per l'accessibilità

Contrasto dei colori

Supporto lettore schermo

  • Text deve essere presente.

Supporto per la tastiera

  • Il valore di TabIndex deve essere uguale o superiore a zero, in modo che gli utenti della tastiera possano passare a questo controllo.
  • Gli indicatori di attivazione devono essere chiaramente visibili. A questo scopo, usa FocusedBorderColor e FocusedBorderThickness.

Nota

Puoi indicarci le tue preferenze di lingua per la documentazione? Partecipa a un breve sondaggio. (il sondaggio è in inglese)

Il sondaggio richiederà circa sette minuti. Non viene raccolto alcun dato personale (Informativa sulla privacy).