Adicionar e configurar controles em aplicativos de tela

  • Artigo

Adicione vários elementos de interface do usuário ao seu aplicativo de tela e configure aspectos de sua aparência e comportamento diretamente, na barra de ferramentas, na guia Propriedades ou na barra de fórmulas. Esses elementos da interface do usuário são chamados de controles e os aspectos que você configura são chamados de propriedades.

Pré-requisitos

  1. Se você ainda não tem uma licença do Power Apps, inscreva-se e depois entre.

  2. Criar um aplicativo de tela em branco.

    Você pode sempre fazer o tour mais tarde selecionando o ícone do ponto de interrogação no canto superior direito da tela e selecionando Fazer o tour de introdução.

Adicionar e selecionar um controle

Vamos adicionar uma nova tela e um controle de botão. No entanto, você pode adicionar qualquer tipo de controle.

  1. Selecione Inserir no menu de criação, depois escolha Nova tela.

  2. Escolha Em branco para adicionar uma tela em branco ao seu aplicativo. (As telas são um tipo de controle que pode conter outros tipos de controles.)

    Captura de tela que mostra como adicionar uma nova tela usando a opção de menu Inserir.

    A nova tela é chamada de Screen2 e aparece no Modo de exibição de árvore. Este painel mostra uma lista hierárquica de controles no seu aplicativo para que você possa encontrar e selecionar facilmente cada controle.

    Captura de tela que mostra a nova tela adicionada no Modo de exibição de árvore do seu aplicativo.

  3. Com a opção Screen2 selecionada, escolha Inserir novamente.

  4. Selecione o controle de Botão. O novo controle aparece em Screen2 na lista hierárquica do Modo de exibição de árvore.

    Captura de tela que mostra o novo botão na tela e o nome do controle de botão na lista em Screen2.

    Na tela, uma caixa com seis alças envolve o botão, por padrão. Essas alças envolvem qualquer controle selecionado e são usadas para dimensionar o controle.

  5. Ao selecionar a tela (fora do botão), as alças da caixa desaparecem. Para selecionar o controle novamente, selecione-o diretamente na tela ou na lista do Modo de exibição de árvore.

    Importante

    Você sempre deve selecionar um controle antes de poder configurá-lo.

Renomear um controle

  1. Na lista de controles, passe o mouse sobre o controle que você deseja renomear para revelar o menu flutuante (reticências).

  2. Selecione as reticências.

  3. Selecione Renomear. Adicione um nome exclusivo e fácil de lembrar para facilitar a criação do aplicativo.

    Captura de tela que mostra onde renomear um controle por meio do menu flutuante.

Excluir um controle

Você pode excluir um controle por meio do controle na lista do Modo de exibição de árvore ou diretamente da tela.

Excluir um controle do modo de exibição de Árvore

  1. Na lista de controles, passe o mouse sobre o controle que você deseja excluir para revelar o menu flutuante (reticências).
  2. Selecione as reticências.
  3. Selecione Excluir.

Exclua o controle da tela

Selecione o controle na tela e pressione a tecla Delete.

Reordenar telas

  1. No modo de exibição de Árvore, passe o mouse sobre uma tela que você deseja mover para cima ou para baixo para revelar o menu flutuante (reticências).

  2. Selecione as reticências e escolha Mover para cima ou Mover para baixo. Se você não vir a opção Mover para baixo, sua tela já estará no ponto mais baixo da lista.

    Captura de tela que mostra como reordenar suas telas no modo de exibição de Árvore por meio do menu flutuante de uma tela.

Observação

Quando o aplicativo é aberto, a tela na parte superior da lista de controles geralmente aparece primeiro. Porém, você pode especificar uma tela diferente definindo a propriedade OnStart como uma fórmula que inclui a função Navigate.

Mover e redimensionar um controle

Para mover um controle, selecione-o, passe o mouse sobre o centro para que a seta de quatro pontas apareça e arraste o controle para um local diferente.

Mova o controle.

Para redimensionar um controle, selecione-o, passe o mouse sobre qualquer alça na caixa de seleção para que a seta de duas pontas apareça e arraste a alça.

Arraste o controle.

Observação

Como este tópico descreve mais adiante, você também pode mover e redimensionar um controle modificando qualquer combinação de suas propriedades X, Y, Height e Width na barra de fórmulas.

Configurar um controle no painel Propriedades

Usando o painel Propriedades, específico para o controle selecionado, você pode especificar uma ampla variedade de opções.

Por exemplo, se você selecionar um controle de botão, poderá substituir o valor do texto exibido por meio do painel Propriedades do controle.

Captura de tela que mostra como alterar o texto de exibição em um controle de botão por meio do painel Propriedades.

Observação

Como alternativa, você pode alterar o texto de exibição modificando sua propriedade de Texto na barra de fórmulas.

Configurar um controle na barra de fórmulas

Você pode configurar um controle selecionando uma propriedade na lista de propriedades e especificando um valor na barra de fórmulas. O preenchimento automático pode ser útil na barra de fórmulas para ver os valores que você pode usar para um controle.

Alterar a cor da fonte de um controle

Por exemplo, se você quiser alterar a cor da fonte do texto do controle. Você vê muitas opções de cores.

Captura de tela que mostra as opções de controle que você pode definir na barra de fórmulas para um controle.

Alterar a posição na tela de um controle

Você pode definir as coordenadas X e Y para a posição do controle usando a barra de fórmulas. A definição de coordenadas na barra de fórmulas proporciona maior precisão no posicionamento do controle.

Por exemplo, se você selecionar X ou Y na lista de propriedades e especificar um número na barra de fórmulas, verá o controle se mover para essa coordenada. Nesse caso, o botão se move para a posição 100 no eixo X, supondo que o lado esquerdo da tela seja o ponto zero.

Captura de tela que mostra onde definir a coordenada X na barra de fórmulas.

Alterar o tamanho do controle

Você pode redimensionar um controle selecionando Altura ou Largura na lista de propriedades e especificando um número diferente na barra de fórmulas.

Captura de tela que mostra como alterar a altura de um controle por meio da barra de fórmulas.

Alterar o texto de exibição do controle

Você pode alterar o texto de exibição de controle selecionando Texto na lista de propriedades e especificando qualquer combinação de uma cadeia de caracteres literal, uma expressão ou uma fórmula na barra de fórmulas.

Cadeia de caracteres literal

Uma cadeia de caracteres literal é colocada entre aspas e aparece conforme você a digita. "Hello, world" é uma cadeia de caracteres literal.

Captura de tela que mostra onde adicionar uma cadeia de caracteres literal na barra de fórmulas para o texto de exibição de um controle.

Observação

Quando você adiciona texto maior que a largura do controle, o controle não altera sua largura para acomodar o texto. Você deve alterar manualmente o tamanho do controle para ajustar o texto.

Expressão

Uma expressão geralmente é baseada na propriedade de outro controle. Screen2.Height é uma expressão que mostra a altura de Screen2 onde o texto de exibição é mostrado para um controle de botão.

Captura de tela que mostra como adicionar uma propriedade de controle como texto de exibição para outro controle.

Usando uma expressão, por exemplo, você pode definir uma imagem ou ícone em segundo plano como preenchimento do botão.

Fórmula

Uma fórmula inclui uma ou mais funções. A função Now retorna a data e a hora atuais no fuso horário local e a função Text formata valores como datas, horas e moeda.

Por exemplo, você pode exibir a data e a hora em um Rótulo:

Captura de tela que mostra como criar uma função Text() que exibe uma versão reduzida de DateTime.

As fórmulas geralmente são muito mais complexas que esse exemplo, para que possam atualizar dados, classificá-los, filtrá-los e executar outras operações. Para obter mais informações, consulte a referência de fórmulas.