Um controle que o usuário pode clicar ou tocar para interagir com o aplicativo.

Descrição

Configure a propriedade OnSelect de um controle Botão para executar uma ou mais fórmulas quando o usuário clica ou toca no controle.

Propriedades-chave

OnSelect – como o aplicativo responde quando o usuário toca ou clica em um controle.

Text – texto que aparece em um controle ou que o usuário digita em um controle.

Propriedades adicionais

Align – a localização do texto em relação ao centro horizontal do respectivo controle.

AutoDisableOnSelect – desabilita automaticamente o controle enquanto o comportamento OnSelect está sendo executado.

BorderColor – a cor da borda do controle.

BorderStyle – se a borda do controle é Solid, Dashed, Dotted ou None.

BorderThickness – a espessura da borda do controle.

FocusedBorderThickness – a espessura da borda de um controle quando ele tem o foco do teclado.

Color – a cor do texto em um controle.

DisplayMode – se o controle permite entrada do usuário (Edição), apenas exibe dados (Exibição) ou está desabilitado (Desabilitado).

DisabledBorderColor – a cor da borda de um controle se a propriedade DisplayMode do controle estiver definida como Desabilitado.

DisabledColor – a cor do texto em um controle se sua propriedade DisplayMode estiver definida como Desabilitado.

DisabledFill – a cor da tela de fundo de um controle se sua propriedade DisplayMode estiver definida como Desabilitado.

Fill – a cor da tela de fundo de um controle.

Font – o nome da família de fontes no qual o texto é exibido.

FontWeight – o peso do texto em um controle: Bold (negrito), Semibold, Normal ou Lighter (mais leve).

Height – a distância entre a parte superior do controle e as bordas inferiores.

HoverBorderColor – a cor da borda do controle quando o usuário mantém o ponteiro do mouse nesse controle.

HoverColor – a cor do texto em um controle quando o usuário mantém o ponteiro do mouse sobre ele.

HoverFill – a cor da tela de fundo de um controle quando o usuário mantém o ponteiro do mouse sobre ele.

Italic – se o texto em um controle está em itálico.

PaddingBottom – a distância entre o texto em um controle e a borda inferior desse controle.

PaddingLeft – a distância entre o texto em um controle e a borda esquerda desse controle.

PaddingRight – a distância entre o texto em um controle e a borda direita desse controle.

PaddingTop – a distância entre o texto em um controle e a borda superior desse controle.

PressedTrue enquanto um controle está sendo pressionado, false caso contrário.

PressedBorderColor – a cor da borda do controle quando o usuário toca ou clica nesse controle.

PressedColor – a cor do texto em um controle quando o usuário toca ou clica nesse controle.

PressedFill – a cor da tela de fundo de um controle quando o usuário toca ou clica nesse controle.

RadiusBottomLeft – o grau para o qual o canto inferior esquerdo de um controle é arredondado.

RadiusBottomRight – o grau para o qual o canto inferior direito de um controle é arredondado.

RadiusTopLeft – o grau para o qual o canto superior esquerdo de um controle é arredondado.

RadiusTopRight – o grau para o qual o canto superior direito de um controle é arredondado.

Size – o tamanho da fonte do texto que aparece em um controle.

Strikethrough – se uma linha é exibida cortando o texto que aparece em um controle.

TabIndex – personaliza a ordem de tabulação de controles em tempo de execução quando definida como um valor diferente de zero.

Tooltip – um texto explicativo aparece quando o usuário passa o mouse sobre um controle.

Underline – se uma linha é exibida sob o texto que aparece em um controle.

VerticalAlign – a localização do texto em um controle em relação ao centro vertical desse controle.

Visible – se um controle é exibido ou está oculto.

Width – a distância entre das bordas esquerda e direita de um controle.

X – a distância entre a borda esquerda de um controle e a borda esquerda de seu contêiner pai (tela, se não houver contêiner pai).

Y – a distância entre a borda superior de um controle e a borda superior de seu contêiner pai (tela, se não houver contêiner pai).

Funções relacionadas

Navigate( ScreenName, ScreenTransitionValue )

Exemplos

Adicionar uma fórmula básica a um botão

  1. Adicione um controle Entrada de texto e nomeie-o como Fonte.

    Não sabe como adicionar, nomear e configurar um controle?

  2. Adicione um controle de Botão, defina sua propriedade Text para “Adicionar” e defina sua propriedade OnSelect para esta fórmula:
    UpdateContext({Total:Total + Value(Source.Text)})

    Deseja obter mais informações sobre a função UpdateContext ou outras funções?

  3. Adicione um controle Rótulo, defina sua propriedade Text para Total e pressione F5.

  4. Limpe o texto padrão de Fonte, digite um número e, em seguida, clique ou toque em Adicionar.

    O controle Rótulo mostra o número que você digitou.

  5. Limpe o número de Fonte, digite outro número e, em seguida, clique ou toque em Adicionar.

    O controle Rótulo mostra a soma dos dois números que você digitou.

  6. (opcional) Repita a etapa anterior uma ou mais vezes.

  7. Para retornar ao espaço de trabalho padrão, pressione ESC (ou clique ou toque no ícone de fechamento no canto superior direito).

Configurar um botão com várias fórmulas

Adicione uma fórmula que limpa o controle Entrada de texto entre entradas.

  1. Defina a propriedade HintText da Fonte para “Insira um número”.

  2. Defina a propriedade OnSelect de Adicionar como esta fórmula:

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

    Observação: separe várias fórmulas com um ponto e vírgula ";".

  3. Defina a propriedade Default de Fonte como ClearInput.

  4. Pressione F5 e, em seguida, teste o aplicativo adicionando vários números juntos.

Adicione outro botão para redefinir o total

Adicione um segundo botão para limpar o total entre cálculos.

  1. Adicione outro controle de Botão, defina sua propriedade Text para “Limpar” e defina sua propriedade OnSelect como esta fórmula:

    UpdateContext({Total:0})

  2. Pressione F5, adicione vários números juntos e, em seguida, clique ou toque em Limpar para redefinir o total.

Alterar a aparência de um botão

Alterar a forma de um botão

Por padrão, o PowerApps cria um controle de Botão retangular com cantos arredondados. É possível fazer modificações básicas na forma de um controle de Botão definindo suas propriedades de Height, Width e Radius.

Observação: Ícones e Formas** fornece uma ampla variedade de designs e pode executar algumas das mesmas funções básicas dos controles Botão . No entanto, **Ícones e Formas não tem uma propriedade Text.

  1. Adicione um controle de Botão e defina suas propriedades Height e Width como 300 para criar um botão quadrado grande.

  2. Modifique as propriedades RadiusTopLeft, RadiusTopRight, RadiusBottomLeft e RadiusBottomRight para ajustar o grau de curvatura em cada canto. Veja alguns exemplos de formas diferentes, cada uma começando com um botão quadrado 300 x 300:

Alterar a cor de um botão ao passar o mouse sobre ele

Por padrão, a cor de preenchimento de um controle de Botão fica esmaecida em 20% ao passar o mouse sobre ele. É possível ajustar esse comportamento alterando a propriedade HoverFill, que usa a função ColorFade. Se a fórmula ColorFade for definida com um percentual positivo, a cor ficará mais clara ao passar o mouse sobre o botão, enquanto um percentual negativo fará a cor ficar mais escura.

  • Altere o percentual de ColorFade na propriedade HoverFill de um dos botões que você criou e observe os efeitos.

Também é possível especificar a cor de um controle de Botão definindo sua propriedade HoverFill como uma fórmula que contém a função ColorValue, em vez da função ColorFade, assim como em ColorValue("Red").

Observação: o valor de cor pode ser qualquer definição de cor CSS, um nome ou um valor hexa. - Substitua a função ColorFade por uma função ColorValue em um dos botões que você criou e observe os efeitos.