Anterior

Seguinte

Exercício - Escrevendo um aplicativo WPF

Concluído

Windows Presentation Foundation (WPF) no Visual Studio fornece aos desenvolvedores uma interface de API para criar aplicativos para desktop, bloco de notas e tablets. O WPF é construído sobre o poderoso sistema gráfico DirectX e fornece muitos recursos e efeitos excelentes da interface do usuário com pouco esforço de programação.

Nesta unidade, nós:

• Use o Visual Studio para criar um projeto WPF.
• Adicione elementos de interface do usuário e código ao projeto para criar uma variação divertida de um programa "hello world". O texto "Olá!" e a borda mudam de cor aleatoriamente cada vez que você seleciona o botão Diga olá .
• Saiba como definir propriedades e criar eventos.

Nota

Supomos que você tenha configurado seu computador com o Windows e o Visual Studio, conforme descrito no módulo Aprenda Introdução ao desenvolvimento do Windows 10.

WPF "Diga olá" tutorial

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.

   

2. Selecione sua versão .NET e, em seguida, selecione Criar.

3. Quando o projeto é aberto, é uma boa ideia certificar-se de que os painéis Gerenciador de Soluções e Propriedades estão abertos. Eles estão localizados, por padrão, no lado direito da janela do Visual Studio. Se não estiverem visíveis, abra o menu Ver e selecione ambos.

4. No Gerenciador de Soluções, verifique se você pode ver os nomes dos dois arquivos em que estamos trabalhando: MainWindow.xaml e seu arquivo code-behind , MainWindows.xaml.cs. Selecione MainWindow.xaml para abri-lo.

   

Projetar a interface do usuário

1. Se a Caixa de Ferramentas não estiver aberta, selecione o menu Exibir e, em seguida, selecione Caixa de Ferramentas. Na Caixa de Ferramentas, selecione Controles WPF Comuns.

   

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 fique parecido com o que você vê aqui:

   

   Nota

   Observe como as entradas button e 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 Dizer olá.

4. Agora queremos definir algumas propriedades nos novos elementos da interface do usuário. Selecione o botão para que suas propriedades apareçam no painel Propriedades . Altere o Nome para algo simples como SayHelloButton e altere o Conteúdo nas propriedades Common para Say hello.

   

5. Precisamos anexar um evento ao botão. Você pode selecionar o botão em si, mas isso só funciona se o layout do designer estiver no estado necessário. Uma maneira mais certa de inserir um evento é abrir os eventos disponíveis para esse item da interface do usuário. Para fazer isso, selecione o ícone de raio mostrado aqui no painel Propriedades e, em seguida, simplesmente selecione a entrada para o evento Click . Isso cria automaticamente a SayHelloButton_Click de eventos nomeada, adiciona a entrada de código apropriada no arquivo MainWindow.xaml.cs e abre o arquivo para você.

   

6. Ainda não inserimos nenhum código, então selecione MainWindow.xaml na exibição principal. Continuamos a trabalhar na interface do usuário por enquanto.

7. Selecione a caixa de texto que você criou no designer para exibir suas propriedades. Vamos fazer 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 retornar às propriedades nomeadas.

8. Altere a entrada Name para textBox1 e, em seguida, nas propriedades Layout, altere Width e Height para 360 e 80, respectivamente.

   

9. Feche a seção Layout .

10. Na lista Tamanho do texto, altere o tamanho do ponto para 36: algo agradável e visível!

    

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

    

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

    

13. Recolher Aparência e expanda Comum. Digite o texto para a caixa de texto: algo amigável como Olá lá!.

    

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

Nota

Você pode editar o XAML diretamente, alterando valores numéricos ou até mesmo adicionando elementos inteiros da interface do usuário. Não faremos isso neste tutorial.

Escreva o código por trás

1. Agora podemos passar da interface do usuário para o código do nosso 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 a seguinte aparência:

   public partial class MainWindow : Window
   {
       public MainWindow()
       {
           InitializeComponent();
       }
   
       private void SayHelloButton_Click(object sender, RoutedEventArgs e)
       {
   
       }
   }
   

2. Vamos nos certificar de que temos todas as instruções de uso necessárias. Certifique-se de ter os mostrados aqui e adicione-os se não tiver. Depois de terminar de editar o arquivo, você pode, opcionalmente, remover quaisquer instruções de uso desnecessárias que o Visual Studio incluiu quando criou o projeto. (Os namespaces não utilizados aparecem em cinza.)

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

3. O aplicativo renderiza o texto de saudação em uma cor aleatória cada vez 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 RGB. Copie e cole este código, ou digite-o você mesmo, para que sua classe MainWindow tenha esta aparência:

   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. Finalmente, precisamos chamar GetRandomBytes a partir do evento de clique do botão, criar uma cor aleatória a partir da matriz de bytes retornada e, em seguida, alterar as propriedades da caixa de texto para essa cor. Seu método de SayHelloButton_Click concluído deve ter a seguinte 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. Leve um segundo ou dois para verificar o seu código. Se algo está sublinhado em vermelho, algo não está certo. Pode ser uma palavra com erros ortográficos ou um pedaço de código onde não deveria estar.

Executar

Vamos compilar e executar o programa!

1. No Visual Studio, no menu Depurar, selecione Iniciar sem Depuração (ou Iniciar Depuração, embora não estejamos fazendo nenhuma depuração neste tutorial) ou apenas selecione a tecla F5. Se você inseriu tudo corretamente, você verá um aplicativo em execução semelhante a este:

   

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

Se é isso que você vê, bem feito! Você terminou este tutorial. Caso contrário, reexamine cuidadosamente suas configurações de código e propriedade da interface do usuário para algo que deu errado.

Continuar