Exercício – Escrever um aplicativo WPF

  • 15 minutos

Screenshot that shows the UWP, WPF, and Windows Forms logo.

O WPF (Windows Presentation Foundation) no Visual Studio fornece aos desenvolvedores uma interface de API para a criação de aplicativos para computadores desktop, bloco de notas e tablet. O WPF se baseia no avançado sistema de elementos gráficos DirectX e fornece muitos excelentes recursos e efeitos de interface do usuário com pouco esforço de programação.

Nesta unidade, vamos:

  • Usar o Visual Studio para criar um projeto WPF.
  • Adicionar elementos de interface do usuário e de código ao projeto para criar uma variação divertida de um programa "Olá, Mundo". O texto "Olá!" e a borda mudam de cor aleatoriamente sempre que você seleciona o botão Diga olá.
  • Aprender a definir propriedades e criar eventos.

Observação

Estamos considerando que você já tenha configurado seu computador com o Windows e o Visual Studio, conforme descrito no módulo de aprendizagem Introdução ao desenvolvimento para Windows 10.

Tutorial do "Diga olá" do WPF

Criar o projeto

  1. Abra o Visual Studio e selecione Arquivo>Novo>Projeto no menu. Selecione C# como a linguagem do projeto. Em seguida, selecione o tipo de projeto Aplicativo WPF e, no campo Nome, insira um nome amigável, como Diga olá. Selecione Avançar quando terminar.

    Screenshot that shows the Configure your new project window for a WPF App with the Next button selected.

  2. Escolha sua versão do .NET e selecione Criar.

  3. Quando o projeto é aberto, é importante verificar se os painéis Gerenciador de Soluções e Propriedades foram abertos. Eles estão localizados, por padrão, no lado direito da janela do Visual Studio. Se eles não estiverem visíveis, abra o menu Exibição e selecione os dois.

  4. No Gerenciador de Soluções, verifique se são exibidos os nomes dos dois arquivos com os quais estamos trabalhando: MainWindow.xaml e o arquivo code-behind dele, MainWindows.xaml.cs. Selecione MainWindow.xaml para abri-lo.

    Screenshot that shows the MainPage.xaml and MainPage.xaml.cs files in a red box in Solution Explorer.

Projetar a interface do usuário

  1. Se a Caixa de Ferramentas não estiver aberta, selecione o menu Exibir e Caixa de Ferramentas. Na Caixa de ferramentas, selecione Controles comuns do WPF.

    Screenshot that shows the Toolbox menu in Visual Studio with Button and TextBox in red boxes.

  2. Arraste um Botão para a parte inferior do layout do designer. Em seguida, arraste uma TextBox para a parte superior do layout e arraste seus cantos um pouco para fora para que ela fique semelhante a esta:

    Screenshot that shows a button dragged onto the design layout.

    Observação

    Observe como as entradas de botão e de TextBox são adicionadas a <Grid> na definição XAML exibida abaixo do layout.

  3. Em seguida, queremos atualizar o texto que aparece na barra de título da janela. Selecione a Janela no layout do designer para que suas propriedades fiquem visíveis no painel Propriedades e, em seguida, altere o Título para Diga olá.

  4. Agora queremos definir algumas propriedades nos novos elementos de interface do usuário. Selecione o botão de modo que suas propriedades apareçam no painel Propriedades. Altere o Nome para algo simples, como SayHelloButton e altere o Conteúdo nas propriedades Comum para Diga olá.

    Screenshot that shows the Name and Content properties set in the Properties window.

  5. É necessário anexar um evento ao botão. Selecione o próprio botão, embora isso só funcione quando o layout de designer está no estado necessário. Uma maneira mais segura de inserir um evento é abrir os eventos disponíveis para esse item da interface do usuário. Para fazer isso, selecione o ícone de relâmpago mostrado aqui no painel Propriedades e, em seguida, selecione a entrada para o evento Clicar. Isso cria automaticamente o evento nomeado SayHelloButton_Click, adiciona a entrada de código apropriada no arquivo MainWindow.xaml.cs e abre o arquivo.

    Screenshot that shows the Events pane selected in the Properties window, and the Click event in a red box.

  6. Ainda não vamos inserir nenhum código, portanto, selecione MainWindow.xaml na exibição principal. Por enquanto, continuamos trabalhando na interface do usuário.

  7. Selecione a caixa de texto que você criou no designer para exibir suas propriedades. Faremos algumas alterações nas propriedades da caixa de texto. Se os eventos estiverem sendo exibidos no painel Propriedades, selecione o ícone de chave inglesa ao lado do nome para voltar às propriedades nomeadas.

  8. Altere a entrada Nome para textBox1 e, em seguida, nas propriedades de Layout, altere a Largura e a Altura para 360 e 80, respectivamente.

    Screenshot that shows the Layout properties of Width and Height set in the Properties window.

  9. Recolha a seção Layout.

  10. Na lista de tamanhos de Texto, altere o tamanho do ponto para 36, que fica interessante e visível.

    Screenshot that shows the Name set as textBox1 in the properties, and the Tex tab open with 36px selected as the text size.

  11. A guia de fonte, rotulada com um A, é aberta por padrão na seção Texto. Selecione o ícone de parágrafo e altere o alinhamento para Centro.

    Screenshot that shows the paragraph tab under the Text menu selected, and Center selected as the paragraph justification.

  12. Recolha a seção Texto e expanda Aparência. Selecione a seta para baixo na parte inferior da lista de propriedades de aparência para exibir a lista completa. Altere para 1 a espessura das bordas esquerda e superior e para 8 a das bordas direita e inferior. Agora a caixa tem um efeito de sombra.

    Screenshot that shows the Appearance menu expanded in the Properties window, with the BorderThickness settings in a red box.

  13. Recolha Aparência e expanda Comum. Insira o texto da caixa de texto: algo amigável, como Olá!.

    Screenshot that shows the Common menu expanded in the Properties window, with Hello there entered in the Text property.

Você está quase terminando de ajustar os elementos de interface do usuário para seu aplicativo. A entrada <Grade> do arquivo XAML deve ter a seguinte aparência:

Screenshot that shows an example of the the XAML file, with a Button and TextBox element inside the Grid element. All of the Button and Textbox properties are displayed.

Observação

Edite o XAML diretamente, alterando valores numéricos ou até mesmo adicionando elementos inteiros de interface do usuário. Não faremos isso neste tutorial.

Escrever o code-behind

  1. Agora podemos passar da interface do usuário para o código do aplicativo. É hora de reabrir o arquivo MainWindow.xaml.cs. Selecione o arquivo acima da exibição principal ou no Gerenciador de Soluções. A classe MainWindow deve ter esta aparência:

    public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {

    }
}

  2. Vamos garantir que todas as instruções using necessárias estejam presentes. Verifique se os seguintes itens estão presentes, caso contrário, adicione-os. Após terminar de editar o arquivo, você também pode remover todas as instruções using desnecessárias que o Visual Studio incluiu quando criou o projeto. (Os namespaces não usados aparecem em cinza).

    using System;
using System.Windows;
using System.Windows.Media;

  3. O aplicativo renderiza o texto "Olá!" em uma cor aleatória sempre que o botão é selecionado. Portanto, precisamos adicionar um objeto Random de nível de classe e o método GetRandomBytes que preenche aleatoriamente os valores que usamos como configurações de RGB. Copie e cole este código ou digite-o, para que a classe MainWindow fique assim:

    public partial class MainWindow : Window
{
    private Random rand;

    public MainWindow()
    {
        InitializeComponent();
        rand = new Random();
    }

    private byte[] GetRandomBytes(int n)
    {
        // Fill an array of bytes of length "n" with random numbers.
        var randomBytes = new byte[n];
        rand.NextBytes(randomBytes);
        return randomBytes;
    }

    private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {

    }
}

  4. Por fim, precisamos chamar GetRandomBytes do evento de clique no botão, criar uma cor aleatória da matriz de bytes retornada e, em seguida, alterar as propriedades da caixa de texto para essa cor. O método SayHelloButton_Click concluído deverá ter esta aparência:

        private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {
        byte[] rgb = GetRandomBytes(3);

        // Create a solid color brush using the three random numbers.
        var randomColorBrush = new SolidColorBrush(Color.FromArgb(255, rgb[0], rgb[1], rgb[2]));

        // Set both the text color and the text box border to the random color.
        textBox1.BorderBrush = randomColorBrush;
        textBox1.Foreground = randomColorBrush;
    }

  5. Dedique alguns segundos para verificar o código. Se algo estiver sublinhado em vermelho, isso indicará que há algum erro. Pode ser uma palavra com ortografia incorreta ou uma parte do código em um local errado.

Executar

Vamos compilar e executar o programa.

  1. No Visual Studio, no menu Depurar, selecione Iniciar sem depuração (ou Iniciar depuração, apesar de que não faremos nenhuma depuração neste tutorial), ou apenas selecione a tecla F5. Se você tiver inserido tudo corretamente, verá um aplicativo em execução semelhante a este:

    Screenshot that shows the app running. Hello there displays with red text in a red box with the Say hello button below it.

  2. Selecione o botão Diga olá repetidamente para ver o texto Olá! e a borda mudarem para cores aleatórias.

Se isso for o que você vê, parabéns! Você concluiu este tutorial. Caso contrário, reexamine cuidadosamente as configurações de propriedades do código e da interface do usuário para encontrar algo que tenha passado despercebido.