Controlo de Botão no PowerAppsButton control in PowerApps

Um controlo em que o utilizador pode clicar ou tocar para interagir com a aplicação.A control that the user can click or tap to interact with the app.

DescriçãoDescription

Configure a propriedade OnSelect de um controlo de Botão para executar uma ou mais fórmulas quando o utilizador clica ou toca no controlo.Configure the OnSelect property of a Button control to run one or more formulas when the user clicks or taps the control.

Propriedades principaisKey properties

OnSelect – como a aplicação responde quando o utilizador toca ou clica num controlo.OnSelect – How the app responds when the user taps or clicks a control.

Texto – texto que é apresentado num controlo ou que o utilizador escreve num controlo.Text – Text that appears on a control or that the user types into a control.

Propriedades adicionaisAdditional properties

Alinhar – a localização de texto em relação ao centro horizontal do seu controlo.Align – The location of text in relation to the horizontal center of its control.

AutoDisableOnSelect – desativa automaticamente o controlo enquanto o comportamento de OnSelect está em execução.AutoDisableOnSelect – Automatically disables the control while the OnSelect behavior is running.

BorderColor – a cor do limite de um controlo.BorderColor – The color of a control's border.

BorderStyle – se o limite do controlo é Sólido, Tracejado, Com pontos ou Nenhum.BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – a espessura do limite de um controlo.BorderThickness – The thickness of a control's border.

FocusedBorderThickness – a espessura do limite de um controlo quando tem o foco do teclado.FocusedBorderThickness – The thickness of a control's border when it has keyboard focus.

Cor – a cor do texto num controlo.Color – The color of text in a control.

DisplayMode – se o controlo permite a intervenção do utilizador (Editar), apenas apresenta os dados (Visualizar) ou está desativado (Desativado).DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – a cor do limite de um controlo se a propriedade DisplayMode do controlo estiver definida como Desativado.DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – a cor do texto num controlo se a respetiva propriedade DisplayMode estiver definida como Desativado.DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – a cor de fundo de um controlo se a respetiva propriedade DisplayMode estiver definida como Desativado.DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Preenchimento – a cor de fundo de um controlo.Fill – The background color of a control.

Tipo de letra – o nome da família dos tipos de letra que aparecem no texto.Font – The name of the family of fonts in which text appears.

FontWeight – a espessura do texto num controlo: Negrito, Seminegrito, Normal ou Mais claro.FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Altura – a distância entre as margens superiores e inferiores de um controlo.Height – The distance between a control's top and bottom edges.

HoverBorderColor – a cor do limite de um controlo quando o utilizador mantém o ponteiro do rato nesse controlo.HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor – a cor do texto num controlo quando o utilizador mantém o ponteiro do rato no mesmo.HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – a cor de fundo de um controlo quando o utilizador mantém o ponteiro do rato no mesmo.HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Itálico – se o texto num controlo é itálico.Italic – Whether the text in a control is italic.

PaddingBottom – a distância entre o texto num controlo e o limite inferior desse controlo.PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – a distância entre o texto num controlo e o limite esquerdo desse controlo.PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight – a distância entre o texto num controlo e o limite direito desse controlo.PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop – a distância entre o texto num controlo e o limite superior desse controlo.PaddingTop – The distance between text in a control and the top edge of that control.

Pressedverdadeiro enquanto um controlo é premido; caso contrário, falso.PressedTrue while a control is being pressed, false otherwise.

PressedBorderColor – a cor do limite de um controlo quando o utilizador toca ou clica nesse controlo.PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor – a cor do texto num controlo quando o utilizador toca ou clica nesse controlo.PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – a cor de fundo de um controlo quando o utilizador toca ou clica nesse controlo.PressedFill – The background color of a control when the user taps or clicks that control.

RadiusBottomLeft – o grau a que o canto inferior esquerdo de um controlo é arredondado.RadiusBottomLeft – The degree to which the bottom-left corner of a control is rounded.

RadiusBottomRight – o grau a que o canto inferior direito de um controlo é arredondado.RadiusBottomRight – The degree to which the bottom-right corner of a control is rounded.

RadiusTopLeft – o grau a que o canto superior esquerdo de um controlo é arredondado.RadiusTopLeft – The degree to which the top-left corner of a control is rounded.

RadiusTopRight – o grau a que o canto superior direito de um controlo é arredondado.RadiusTopRight – The degree to which the top-right corner of a control is rounded.

Tamanho – o tamanho do tipo de letra do texto que é apresentado num controlo.Size – The font size of the text that appears on a control.

Rasurado – se é apresentada uma linha no meio do texto que aparece num controlo.Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex – personaliza a ordem dos separadores dos controlos durante o runtime, quando definido como um valor diferente de zero.TabIndex – Customizes the tab order of controls at runtime when set to a non-zero value.

Descrição – o texto explicativo que aparece quando o rato passa por cima de um controlo.Tooltip – Explanatory text that appears when the user hovers over a control.

Sublinhado – se é apresentada uma linha sob o texto que aparece num controlo.Underline – Whether a line appears under the text that appears on a control.

VerticalAlign – a localização de texto num controlo em relação ao centro vertical desse controlo.VerticalAlign – The location of text on a control in relation to the vertical center of that control.

Visível – se um controlo é apresentado ou está oculto.Visible – Whether a control appears or is hidden.

Largura – a distância entre as margens esquerda e direita de um controlo.Width – The distance between a control's left and right edges.

X – a distância entre o limite esquerdo de um controlo e o limite esquerdo do respetivo contentor principal (do ecrã, se não existir um contentor principal).X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – a distância entre o limite superior de um controlo e o limite superior do contentor principal (do ecrã, se não existir um contentor principal).Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Navigate( ScreenName, ScreenTransitionValue )Navigate( ScreenName, ScreenTransitionValue )

ExemplosExamples

Adicionar uma fórmula básica a um botãoAdd a basic formula to a button

  1. Adicione um controlo de Entrada de texto e dê-lhe o nome Origem.Add a Text input control, and name it Source.

    Não sabe como adicionar, atribuir um nome e configurar um controlo?Don't know how to add, name, and configure a control?

  2. Adicione um controlo de Botão, defina a respetiva propriedade Text como "Adicionar" e defina a respetiva propriedade OnSelect como esta fórmula:Add a Button control, set its Text property to "Add", and set its OnSelect property to this formula:
    UpdateContext({Total:Total + Value(Source.Text)}) UpdateContext({Total:Total + Value(Source.Text)})

    Pretende obter mais informações sobre a função UpdateContext ou outras funções?Want more information about the UpdateContext function or other functions?

  3. Adicione um controlo de Etiqueta, defina a respetiva propriedade Text como Total e, em seguida, prima F5.Add a Label control, set its Text property to Total, and then press F5.
  4. Apague o texto predefinido de Origem, escreva um número e, em seguida, clique ou toque em Adicionar.Clear the default text from Source, type a number in it, and then click or tap Add.

    O controlo de Etiqueta mostra o número que introduziu.The Label control shows the number that you typed.

  5. Apague o número de Origem, escreva outro número e, em seguida, clique ou toque em Adicionar.Clear the number from Source, type another number in it, and then click or tap Add.

    O controlo de Etiqueta mostra a soma dos dois números que introduziu.The Label control shows the sum of the two numbers that you typed.

  6. (opcional) Repita o passo anterior uma ou mais vezes.(optional) Repeat the previous step one or more times.
  7. Para voltar para a área de trabalho predefinida, prima Esc (ou clique ou toque no ícone de fecho no canto superior direito).To return to the default workspace, press Esc (or click or tap the close icon in the upper-right corner).

Configurar um botão com várias fórmulasConfigure a button with multiple formulas

Adicione uma fórmula que limpe o controlo de Entrada de texto entre as entradas.Add a formula that clears the Text input control between entries.

  1. Defina a propriedade HintText de Origem como "Introduzir um número".Set the HintText property of Source to "Enter a number".
  2. Defina a propriedade OnSelect de Adicionar como esta fórmula: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: ""})

    Nota: separe várias fórmulas com ponto e vírgula ";".Note: Separate multiple formulas with a semi-colon “;”.

  3. Defina a propriedade Default de Origem como ClearInput.Set the Default property of Source to ClearInput.
  4. Prima F5 e, em seguida, teste a aplicação, adicionando vários números em conjunto.Press F5, and then test the app by adding several numbers together.

Adicionar outro botão para repor o totalAdd another button to reset the total

Adicione um segundo botão para limpar o total entre os cálculos.Add a second button to clear the total between calculations.

  1. Adicione outro controlo de Botão, defina a respetiva propriedade Text como "Limpar" e defina a respetiva propriedade OnSelect como esta fórmula: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. Prima F5, adicione vários números em conjunto e, em seguida, clique ou toque em Limpar para repor o total.Press F5, add several numbers together, and then click or tap Clear to reset the total.

Alterar o aspeto de um botãoChange a button's appearance

Alterar a forma de um botãoChange a button's shape

Por predefinição, o PowerApps cria um controlo de Botão retangular com os cantos arredondados.By default, PowerApps creates a rectangular Button control with rounded corners. Pode fazer modificações básicas à forma de um controlo de Botão, definindo as respetivas propriedades Height, Width e Radius.You can make basic modifications to the shape of a Button control by setting its Height, Width, and Radius properties.

Nota: os Ícones e Formas fornecem uma grande variedade de designs e podem executar algumas das mesmas funções básicas que os controlos de Botão executam.Note: Icons and Shapes provide a wide variety of designs and can perform some of the same basic functions that Button controls do. No entanto, os Ícones e Formas não têm uma propriedade Text.However, Icons and Shapes don’t have a Text property.

  1. Adicione um controlo de Botão e defina as respetivas propriedades Height e Width como 300 para criar um botão quadrado grande.Add a Button control, and set its Height and Width properties to 300 to make a large square button.
  2. Modifique as propriedades RadiusTopLeft, RadiusTopRight, RadiusBottomLeft e RadiusBottomRight para ajustar a quantidade de curvatura em cada canto.Modify the RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, and RadiusBottomRight properties to adjust the amount of curvature on each corner. Seguem-se alguns exemplos de formas diferentes, cada uma delas começando com um botão quadrado com 300 x 300:Here are some examples of different shapes, each one starting from a 300 x 300 square button:

Alterar a cor de um botão quando passa com o rato sobre o mesmoChange a button's color when you hover over it

Por predefinição, a cor de preenchimento de um controlo de Botão esbate-se 20% quando passa com o rato sobre o mesmo.By default, the fill color of a Button control will dim by 20% when you hover over it with a mouse. Pode ajustar este comportamento, alterando a propriedade HoverFill, que utiliza a função ColorFade.You can adjust this behavior by changing the HoverFill property, which uses the ColorFade function. Se definir a fórmula ColorFade como uma percentagem positiva, a cor torna-se mais clara quando passa com o rato sobre o botão, enquanto que uma percentagem negativa torna a cor mais escura.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.

  • Altere a percentagem de ColorFade na propriedade HoverFill de um dos botões que criou e observe os efeitos.Change the ColorFade percentage in the HoverFill property of one of the buttons that you created, and observe the effects.

Também pode especificar a cor de um controlo de Botão, definindo a respetiva propriedade HoverFill como uma fórmula que contém a função ColorValue em vez da função ColorFade, tal como em ColorValue("Vermelho").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").

Nota: o valor de cor pode ser qualquer definição de cor CSS, ou um nome ou um valor hexadecimal.Note: The color value can be any CSS color definition, either a name or a hex value.

  • Substitua a função ColorFade por uma função ColorValue num dos botões que criou e observe os efeitos.Replace the ColorFade function with a ColorValue function in one of the buttons that you created, and observe the effects.