Besturingselement voor knop in PowerAppsButton control in PowerApps

Een besturingselement waarop de gebruiker kan klikken of tikken om interactie te hebben met de app.A control that the user can click or tap to interact with the app.

BeschrijvingDescription

Configureer de eigenschap OnSelect van een besturingselement Knop voor het uitvoeren van een of meer formules wanneer de gebruiker op het besturingselement klikt of tikt.Configure the OnSelect property of a Button control to run one or more formulas when the user clicks or taps the control.

Belangrijkste eigenschappenKey properties

OnSelect: de manier waarop de app reageert wanneer de gebruiker op een besturingselement tikt of klikt.OnSelect – How the app responds when the user taps or clicks a control.

Text: de tekst die wordt weergegeven in een besturingselement of die de gebruiker in een besturingselement typt.Text – Text that appears on a control or that the user types into a control.

Aanvullende eigenschappenAdditional properties

Align: de locatie van tekst in verhouding tot het horizontale midden van het besturingselement.Align – The location of text in relation to the horizontal center of its control.

AutoDisableOnSelect: hiermee wordt het besturingselement automatisch uitgeschakeld terwijl het gedrag OnSelect van toepassing is.AutoDisableOnSelect – Automatically disables the control while the OnSelect behavior is running.

BorderColor: de kleur van de rand van een besturingselement.BorderColor – The color of a control's border.

BorderStyle: hiermee wordt aangegeven of de rand van een besturingselement effen, onderbroken of gestippeld is, of dat er geen rand is.BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness: de dikte van de rand van een besturingselement.BorderThickness – The thickness of a control's border.

FocusedBorderThickness: de dikte van de rand van een besturingselement met toetsenbordfocus.FocusedBorderThickness – The thickness of a control's border when it has keyboard focus.

Color: de kleur van de tekst in een besturingselement.Color – The color of text in a control.

DisplayMode: of invoer van de gebruiker is toegestaan (Bewerken), alleen gegevens worden weergegeven (Weergeven) of is uitgeschakeld (Uitgeschakeld).DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor: de kleur van de rand van een besturingselement als de eigenschap DisplayMode is ingesteld op Uitgeschakeld.DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor: de kleur van tekst in een besturingselement als de eigenschap DisplayMode is ingesteld op Uitgeschakeld.DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill: de achtergrondkleur van een besturingselement als de eigenschap DisplayMode is ingesteld op Uitgeschakeld.DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill: de achtergrondkleur van een besturingselement.Fill – The background color of a control.

Font: de naam van de lettertypefamilie waarin de tekst wordt weergegeven.Font – The name of the family of fonts in which text appears.

FontWeight: het gewicht van de tekst in een besturingselement: Bold, Semibold, Normal of Lighter.FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height : de afstand tussen de boven- en onderrand van een besturingselement.Height – The distance between a control's top and bottom edges.

HoverBorderColor: de kleur van de rand van een besturingselement wanneer de gebruiker de muisaanwijzer op dat besturingselement plaatst.HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor: de kleur van de tekst in een besturingselement wanneer de gebruiker de muisaanwijzer op de tekst plaatst.HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill: de achtergrondkleur van een besturingselement wanneer de gebruiker de muisaanwijzer op de achtergrond plaatst.HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic: hiermee wordt aangegeven of de tekst in een besturingselement cursief is.Italic – Whether the text in a control is italic.

PaddingBottom: de afstand tussen de tekst in een besturingselement en de onderrand van het besturingselement.PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft: de afstand tussen de tekst in een besturingselement en de linkerrand van het besturingselement.PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight: de afstand tussen de tekst in een besturingselement en de rechterrand van het besturingselement.PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop: de afstand tussen de tekst in een besturingselement en de bovenrand van het besturingselement.PaddingTop – The distance between text in a control and the top edge of that control.

Pressed: true zolang een besturingselement is ingedrukt, anders false.PressedTrue while a control is being pressed, false otherwise.

PressedBorderColor: de kleur van de rand van een besturingselement wanneer de gebruiker op dat besturingselement tikt of klikt.PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor: de kleur van tekst in een besturingselement wanneer de gebruiker op dat besturingselement tikt of klikt.PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill: de achtergrondkleur van een besturingselement wanneer de gebruiker op dat besturingselement tikt of klikt.PressedFill – The background color of a control when the user taps or clicks that control.

RadiusBottomLeft: de mate van afronding van de linkerbenedenhoek van een besturingselement.RadiusBottomLeft – The degree to which the bottom-left corner of a control is rounded.

RadiusBottomRight: de mate van afronding van de rechterbenedenhoek van een besturingselement.RadiusBottomRight – The degree to which the bottom-right corner of a control is rounded.

RadiusTopLeft: de mate van afronding van de linkerbovenhoek van een besturingselement.RadiusTopLeft – The degree to which the top-left corner of a control is rounded.

RadiusTopRight: de mate van afronding van de rechterbovenhoek van een besturingselement.RadiusTopRight – The degree to which the top-right corner of a control is rounded.

Size: de tekengrootte van de tekst die in een besturingselement wordt weergegeven.Size – The font size of the text that appears on a control.

Strikethrough: hiermee wordt aangegeven of een streep door de tekst van een besturingselement wordt weergegeven.Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex: past de tabvolgorde van besturingselementen tijdens runtime aan wanneer hier een andere waarde dan nul is ingesteld.TabIndex – Customizes the tab order of controls at runtime when set to a non-zero value.

Tooltip: beschrijvende tekst die wordt weergegeven wanneer de gebruiker een besturingselement aanwijst.Tooltip – Explanatory text that appears when the user hovers over a control.

Underline: hiermee wordt aangegeven of onder de tekst in een besturingselement een streep wordt weergegeven.Underline – Whether a line appears under the text that appears on a control.

VerticalAlign: de locatie van de tekst in een besturingselement in verhouding tot het verticale midden van dat besturingselement.VerticalAlign – The location of text on a control in relation to the vertical center of that control.

Visible: hiermee wordt aangegeven of een besturingselement zichtbaar of verborgen is.Visible – Whether a control appears or is hidden.

Width: de afstand tussen de linker- en rechterrand van een besturingselement.Width – The distance between a control's left and right edges.

X: de afstand tussen de linkerrand van een besturingselement en de linkerrand van de bovenliggende container (het scherm als er geen bovenliggende container is).X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y: de afstand tussen de bovenrand van een besturingselement en de bovenrand van de bovenliggende container (het scherm als er geen bovenliggende container is).Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Navigate( Schermnaam, Schermovergang )Navigate( ScreenName, ScreenTransitionValue )

VoorbeeldenExamples

Een eenvoudige formule toevoegen aan een knopAdd a basic formula to a button

  1. Voeg een besturingselement Tekstinvoer toe en geef het de naam Bron.Add a Text input control, and name it Source.

    Weet u niet hoe u een besturingselement kunt toevoegen, een naam kunt geven of kunt configureren?Don't know how to add, name, and configure a control?

  2. Voeg een besturingselement Knop toe en stel de eigenschap Text van de knop in op 'Toevoegen' en de eigenschap OnSelect op deze formule:Add a Button control, set its Text property to "Add", and set its OnSelect property to this formula:
    UpdateContext({Totaal:Total + Value(Bron.Text)}) UpdateContext({Total:Total + Value(Source.Text)})

    Wilt u meer informatie over de functie UpdateContext of een andere functie?Want more information about the UpdateContext function or other functions?

  3. Voeg een besturingselement Label toe, stel de eigenschap Text in op Totaal en druk vervolgens op F5.Add a Label control, set its Text property to Total, and then press F5.
  4. Verwijder de standaardtekst uit Bron, typ een getal in en klik of tik op Toevoegen.Clear the default text from Source, type a number in it, and then click or tap Add.

    Het besturingselement Label bevat het getal dat u hebt opgegeven.The Label control shows the number that you typed.

  5. Verwijder het standaardnummer uit Bron, typ een nieuw getal in en klik of tik op Toevoegen.Clear the number from Source, type another number in it, and then click or tap Add.

    Het besturingselement Label bevat het totaal van de twee getallen die u hebt ingevoerd.The Label control shows the sum of the two numbers that you typed.

  6. (optioneel) Herhaal de vorige stap een of meer keer.(optional) Repeat the previous step one or more times.
  7. Als u wilt terugkeren naar de standaardwerkruimte, drukt u op Esc (of klikt of tikt u op het sluitpictogram in de rechterbovenhoek).To return to the default workspace, press Esc (or click or tap the close icon in the upper-right corner).

Een knop met meerdere formules configurerenConfigure a button with multiple formulas

Voeg een formule toe die het besturingselement Tekstinvoer tussen vermeldingen wist.Add a formula that clears the Text input control between entries.

  1. Stel de eigenschap HintText van Bron in op 'Een waarde invoeren'.Set the HintText property of Source to "Enter a number".
  2. Stel de eigenschap OnSelect van Toevoegen in op deze formule:Set the OnSelect property of Add to this formula:

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

    Opmerking: Scheid meerdere formules met puntkomma's ';'.Note: Separate multiple formulas with a semi-colon “;”.

  3. Stel de eigenschap Default van Bron in op ClearInput.Set the Default property of Source to ClearInput.
  4. Druk op F5 en test de app vervolgens door verschillende cijfers tegelijkertijd toe te voegen.Press F5, and then test the app by adding several numbers together.

Een andere knop toevoegen om het totaal opnieuw in te stellenAdd another button to reset the total

Voeg een tweede knop toe om het totaal tussen de berekeningen te wissen.Add a second button to clear the total between calculations.

  1. Voeg nog een besturingselement Knop toe, stel de eigenschap Text in op 'Wissen' en stel de bijbehorende eigenschap OnSelect in op deze formule:Add another Button control, set its Text property to "Clear", and set its OnSelect property to this formula:

    UpdateContext({Total:0})UpdateContext({Total:0})

  2. Druk op F5, voeg verschillende nummers tegelijkertijd toe en klik of tik op Wissen om het totaal te wissen.Press F5, add several numbers together, and then click or tap Clear to reset the total.

De weergave van een knop wijzigenChange a button's appearance

De vorm van een knop wijzigenChange a button's shape

Het besturingselement Knop is in PowerApps standaard rechthoekig met afgeronde hoeken.By default, PowerApps creates a rectangular Button control with rounded corners. U kunt eenvoudige wijzigingen aanbrengen aan de vorm van het besturingselement Knop door de eigenschappen Height, Width en Radius in te stellen.You can make basic modifications to the shape of a Button control by setting its Height, Width, and Radius properties.

Opmerking: pictogrammen en vormen bieden een groot aantal verschillende ontwerpen kunnen een aantal basisfuncties van het besturingselement Knop uitvoeren.Note: Icons and Shapes provide a wide variety of designs and can perform some of the same basic functions that Button controls do. Pictogrammen en vormen hebben de eigenschap Text echter niet.However, Icons and Shapes don’t have a Text property.

  1. Voeg het besturingselement Knop toe en stel de eigenschappen Height en Width in op 300 om een grote vierkante knop te maken.Add a Button control, and set its Height and Width properties to 300 to make a large square button.
  2. Wijzig de eigenschappen RadiusTopLeft, RadiusTopRight, RadiusBottomLeft en RadiusBottomRight om de ronding van elke hoek aan te passen.Modify the RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, and RadiusBottomRight properties to adjust the amount of curvature on each corner. Hier volgen enkele voorbeelden van verschillende vormen, die allemaal beginnen als een vierkante knop van 300 x 300:Here are some examples of different shapes, each one starting from a 300 x 300 square button:

De kleur van de knop wijzigen wanneer u de muisaanwijzer erop houdtChange a button's color when you hover over it

Standaard wordt de opvulkleur van het besturingselement Knop met 20% gedimd wanneer u de muisaanwijzer erop houdt.By default, the fill color of a Button control will dim by 20% when you hover over it with a mouse. U kunt dit gedrag aanpassen door de eigenschap HoverFill te wijzigen. Deze maakt gebruik van de functie ColorFade.You can adjust this behavior by changing the HoverFill property, which uses the ColorFade function. Als u de formule voor de ColorFade instelt op een positief percentage, wordt de kleur lichter wanneer u de muisaanwijzer op de knop houdt. Een negatief percentage zorgt ervoor dat de kleur donker wordt.If you set the ColorFade formula to a positive percentage, the color becomes lighter when you hover over the button, while a negative percentage makes the color darker.

  • Wijzig het percentage van ColorFade in de eigenschap HoverFill van een van de knoppen die u hebt gemaakt en bekijk wat het effect is.Change the ColorFade percentage in the HoverFill property of one of the buttons that you created, and observe the effects.

U kunt ook de kleur van een besturingselement Knop opgeven door de eigenschap HoverFill in te stellen in een formule met de functie ColorValue in plaats van de functie ColorFade, bijvoorbeeld ColorValue("Red").You can also specify the color of a Button control by setting its HoverFill property to a formula that contains the ColorValue function instead of the ColorFade function, as in ColorValue("Red").

Opmerking: De kleurwaarde moet een CSS-kleurdefinitie zijn. Dit kan een naam of hexadecimale waarde zijn.Note: The color value can be any CSS color definition, either a name or a hex value.

  • Vervang de functie ColorFade door de functie ColorValue in een van de knoppen die u hebt gemaakt en bekijk wat het effect is.Replace the ColorFade function with a ColorValue function in one of the buttons that you created, and observe the effects.