Tutorial: Criar um aplicativo WPF com o .NET

Neste tutorial, você aprenderá a usar o Visual Studio para criar um aplicativo WPF (Windows Presentation Foundation). Com o Visual Studio, você adiciona controles a janelas e manipula eventos. Ao final deste tutorial, você tem um aplicativo simples que adiciona nomes a uma caixa de listagem.

Neste tutorial, você:

Aqui está uma visualização do aplicativo criado ao seguir este tutorial:

Pré-requisitos

• Visual Studio 2026
  • Selecione a carga de trabalho de desenvolvimento da área de trabalho do .NET
  • Selecione o componente individual do .NET 10

Criar um aplicativo WPF

A primeira etapa para criar um novo aplicativo é abrir o Visual Studio e gerar o aplicativo a partir de um modelo.

1. Abra o Visual Studio.

2. Selecione Criar um novo projeto.

   

3. Na caixa Pesquisar modelos , digite wpf e aguarde a exibição dos resultados da pesquisa.

4. No menu suspenso da linguagem de código, escolha C# ou Visual Basic.

5. Na lista de modelos, selecione Aplicativo WPF e selecione Avançar.

   Importante

   Não selecione o modelo do Aplicativo WPF (.NET Framework).

   A imagem a seguir mostra modelos de projeto .NET do C# e do Visual Basic. Se você aplicou o filtro de linguagem de código , o modelo correspondente será listado.

   

6. Na janela Configurar seu novo projeto , defina o nome do projeto como Nomes e selecione Avançar.

   Você também pode salvar seu projeto em uma pasta diferente ajustando o caminho local .

   

7. Por fim, na janela Informações adicionais , selecione .NET 10.0 (Suporte de Longo Prazo) para a configuração da Estrutura e selecione Criar.

   

Depois que o Visual Studio gera o aplicativo, ele abre a janela do designer XAML para a janela padrão, MainWindow. Se o designer não estiver visível, clique duas vezes no arquivo MainWindow.xaml na janela do Gerenciador de Soluções para abrir o designer.

Partes importantes do Visual Studio

O suporte ao WPF no Visual Studio tem cinco componentes importantes com os quais você interage ao criar um aplicativo:

1. Gerenciador de Soluções

   Todos os arquivos, código, janelas e recursos do projeto são exibidos nesta janela.

2. Propriedades

   Esta janela mostra as configurações de propriedade que você pode configurar com base no contexto do item selecionado. Por exemplo, se você selecionar um item no Gerenciador de Soluções, as configurações relacionadas ao arquivo serão exibidas. Se um objeto no Designer estiver selecionado, as propriedades do controle ou da janela serão exibidas.

3. Caixa de Ferramentas

   A caixa de ferramentas contém todos os controles que você pode adicionar a uma superfície de design. Para adicionar um controle à superfície atual, clique duas vezes em um controle ou arraste e solte o controle para o designer. Em vez disso, é comum usar a janela do editor de código XAML para criar uma interface do usuário (interface do usuário), enquanto usa a janela do designer XAML para visualizar os resultados.

4. Designer XAML

   Este é o designer de um documento XAML. Ele é interativo e você pode arrastar e soltar objetos da Caixa de Ferramentas. Selecionando e movendo itens no designer, você pode compor visualmente a interface do usuário para seu aplicativo.

   Quando o designer e o editor estão visíveis, as alterações em um são refletidas na outra.

   Quando você seleciona itens no designer, a janela Propriedades exibe as propriedades e atributos sobre esse objeto.

5. Editor de código XAML

   Este é o editor de código XAML para um documento XAML. O editor de código XAML é uma maneira de criar sua interface do usuário manualmente sem um designer. O designer pode definir automaticamente as propriedades em um controle quando o controle é adicionado no designer. O editor de código XAML oferece muito mais controle.

   Quando o designer e o editor estão visíveis, as alterações em um são refletidas na outra. À medida que você navega pelo cursor de texto no editor de código, a janela Propriedades exibe as propriedades e os atributos sobre esse objeto.

Examinar o XAML

Depois de criar seu projeto, o editor de código XAML será aberto. Ele mostra uma quantidade mínima de código XAML para exibir a janela. Se o editor não estiver aberto, clique duas vezes no item MainWindow.xaml na janela do Gerenciador de Soluções . Você deve ver XAML semelhante ao exemplo a seguir:

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

Para entender melhor o XAML, vamos dividi-lo. XAML é simplesmente XML que o WPF processa para criar uma interface do usuário. Para entender o XAML, você deve, no mínimo, estar familiarizado com as noções básicas do XML.

A raiz <Window> do documento representa o tipo de objeto descrito pelo arquivo XAML. O arquivo declara oito atributos e geralmente pertencem a três categorias:

• Namespaces XML

  Um namespace XML fornece estrutura para o XML. Ele determina qual conteúdo XML você pode declarar no arquivo.

  O atributo principal xmlns importa o namespace XML para todo o arquivo. Nesse caso, o mapeamento é feito para os tipos declarados pelo WPF. Os outros namespaces XML declaram um prefixo e importam outros tipos e objetos para o arquivo XAML. Por exemplo, o namespace xmlns:local declara o prefixo local e mapeia os objetos declarados pelo seu projeto, aqueles declarados no código do namespace Names.

• Atributo x:Class

  Esse atributo mapeia o <Window> para o tipo definido pelo seu código: o arquivo MainWindow.xaml.cs ou MainWindow.xaml.vb, que corresponde à classe Names.MainWindow em C# e MainWindow em Visual Basic.

• Atributo Title

  Qualquer atributo normal que você declarar no objeto XAML define uma propriedade desse objeto. Nesse caso, o Title atributo define a Window.Title propriedade.

Alterar a janela

Para nosso aplicativo de exemplo, essa janela é muito grande e a barra de título não é descritiva. Vamos corrigir isso.

1. Primeiro, execute o aplicativo pressionando a tecla F5 ou selecionando Depurar>Iniciar Depuração no menu.

   Você verá a janela padrão gerada pelo modelo, sem controles e um título de MainWindow:

   

2. Altere o título da janela configurando Title para Names.

3. Altere o tamanho da janela definindo Height para 180 e Width para 260.

   <Window x:Class="Names.MainWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:local="clr-namespace:Names"
           mc:Ignorable="d"
           Title="Names" Height="180" Width="260">
       <Grid>
           
       </Grid>
   </Window>
   

Preparar o layout

O WPF fornece um sistema de layout avançado com muitos controles de layout diferentes. Os controles de layout ajudam a posicionar e dimensionar subcontroles e podem até mesmo fazer isso automaticamente. O controle de layout padrão fornecido neste XAML é o <Grid> controle.

O controle de grade permite definir linhas e colunas, assim como uma tabela, e colocar controles dentro dos limites de uma combinação de linha e coluna específica. Você pode adicionar qualquer número de controles filho ou outros controles de layout à grade. Por exemplo, você pode colocar outro <Grid> controle em uma combinação de linha e coluna específica, e essa nova grade pode definir mais linhas e colunas e ter seus próprios filhos.

O controle de grade coloca seus controles filho em linhas e colunas. Uma grade sempre tem uma única linha e coluna declarada, ou seja, a grade por padrão é uma única célula. Essa configuração padrão não oferece muita flexibilidade na colocação de controles.

Ajuste o layout da grade para os controles necessários para este aplicativo.

1. Adicione um novo atributo ao <Grid> elemento: Margin="10".

   Essa configuração desloca a grade das bordas da janela, tornando-a um pouco mais estética.

2. Defina duas linhas e duas colunas, dividindo a grade em quatro células:

   <Grid Margin="10">
       
       <Grid.RowDefinitions>
           <RowDefinition Height="*" />
           <RowDefinition Height="*" />
       </Grid.RowDefinitions>
   
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="*" />
       </Grid.ColumnDefinitions>
       
   </Grid>
   

3. Selecione a grade no Editor de Código XAML ou no XAML Designer. O designer XAML mostra cada linha e coluna:

   

Adicionar o primeiro controle

Agora que a grade está configurada, você pode começar a adicionar controles a ela. Primeiro, adicione o controle de rótulo.

1. Crie um novo <Label> elemento dentro do <Grid> elemento, após as definições de linha e coluna. Defina o conteúdo do elemento como o valor da cadeia de caracteres Names.

   <Grid Margin="10">
   
       <Grid.RowDefinitions>
           <RowDefinition Height="*" />
           <RowDefinition Height="*" />
       </Grid.RowDefinitions>
   
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="*" />
       </Grid.ColumnDefinitions>
   
       <Label>Names</Label>
   
   </Grid>
   

   O <Label>Names</Label> define o conteúdo Names. Alguns controles entendem como lidar com o conteúdo, outros não. O conteúdo de um controle é mapeado à propriedade Content. Se você definir o conteúdo por meio da sintaxe do atributo XAML, use este formato: <Label Content="Names" />. Ambas as maneiras realizam a mesma coisa, definindo o conteúdo do rótulo para exibir o texto Names.

   O rótulo ocupa metade da janela, pois foi posicionado automaticamente na primeira linha e coluna da grade. Para a primeira linha, você não precisa de muito espaço porque só usará essa linha para o rótulo.

2. Altere o Height atributo do primeiro <RowDefinition> de * para Auto.

   O Auto valor dimensiona automaticamente a linha da grade para o tamanho de seu conteúdo, nesse caso, o controle de etiqueta.

   <Grid.RowDefinitions>
       <RowDefinition Height="Auto" />
       <RowDefinition Height="*" />
   </Grid.RowDefinitions>
   

   O designer agora mostra o rótulo ocupando uma pequena quantidade da altura disponível. Há mais espaço para a próxima linha ocupar.

   

Posicionamento do controle

Vamos falar sobre o posicionamento do controle. O rótulo criado na seção anterior é colocado automaticamente na linha 0 e coluna 0 da grade. A numeração de linhas e colunas começa em 0 e incrementa em 1. O controle não sabe nada sobre a grade e o controle não define nenhuma propriedade para controlar seu posicionamento dentro da grade.

Como você indica a um controle para usar uma linha ou coluna diferente quando o controle não tem conhecimento da grade? Propriedades anexadas! O grid aproveita o sistema de propriedades fornecido pelo WPF.

O controle de grade define novas propriedades que os controles filho podem anexar a si mesmos. As propriedades não existem no próprio controle, mas ficam disponíveis para o controle depois que ele é adicionado à grade.

A grade define duas propriedades para determinar o posicionamento do controle filho nas linhas e colunas: Grid.Row e Grid.Column. Se você omitir essas propriedades do controle, os valores padrão serão 0. Portanto, o controle é colocado em linha 0 e coluna 0 da grade. Tente alterar o posicionamento do <Label> controle definindo o Grid.Column atributo como 1:

<Label Grid.Column="1">Names</Label>

Observe que o rótulo foi movido para a segunda coluna. Você pode usar as propriedades anexadas Grid.Row e Grid.Column para posicionar os próximos controles que você criará. Por enquanto, porém, restaure o rótulo para a coluna 0.

Criar a caixa de listagem de nomes

Agora que a grade é dimensionada corretamente e o rótulo criado, adicione um controle de caixa de listagem na linha abaixo do rótulo.

1. Declare o <ListBox /> controle dentro do <Label> controle.

2. Defina a propriedade Grid.Row como 1.

3. Defina a propriedade x:Name como lstNames.

   Depois que um controle for nomeado, você poderá referenciá-lo no código subjacente. Atribua o nome ao controle usando o x:Name atributo.

Veja a aparência do XAML:

<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>
    <ListBox Grid.Row="1" x:Name="lstNames" />

</Grid>

Adicionar os controles restantes

Adicione uma caixa de texto e um botão. O usuário usa esses controles para inserir um nome para adicionar à caixa de listagem. Em vez de criar mais linhas e colunas na grade para organizar esses controles, coloque esses controles no <StackPanel> controle de layout.

O StackPanel difere do Grid na maneira como posiciona os controles. Embora você use as Grid.Row propriedades anexadas e Grid.Column para informar à grade onde deseja posicionar os controles, o painel em pilha funciona automaticamente. Ele dispõe sequencialmente cada um de seus elementos de controle filho. Ele "empilha" cada controle após o outro.

1. Declare o <StackPanel> controle dentro do <ListBox> controle.

2. Defina a propriedade Grid.Row como 1.

3. Defina a propriedade Grid.Column como 1.

4. Defina o Margin para 5,0,0,0.

   <Grid.RowDefinitions>
       <RowDefinition Height="Auto" />
       <RowDefinition Height="*" />
   </Grid.RowDefinitions>
   
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*" />
       <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>
   
   <Label>Names</Label>
   <ListBox Grid.Row="1" x:Name="lstNames" />
   
   <StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
       
   </StackPanel>
   

   Anteriormente, você usava o Margin atributo na grade, mas colocava apenas um único valor. 10 Essa margem tem um valor de 5,0,0,0, que é muito diferente de 10. A propriedade margin é um Thickness tipo e pode interpretar ambos os valores. Uma espessura define o espaço em torno de cada lado de um quadro retangular, esquerdo, superior, direito, inferior, respectivamente. Se o valor da margem for um único valor, ele usará esse valor para todos os quatro lados.

5. Dentro do <StackPanel> controle, crie um <TextBox /> controle.

   1. Defina a propriedade x:Name como txtName.

6. Por fim, depois do <TextBox>, ainda dentro do <StackPanel>, crie um controle <Button>.

   1. Defina a propriedade x:Name como btnAdd.
   2. Defina o Margin para 0,5,0,0.
   3. Defina o conteúdo como Add Name.

Veja a aparência do XAML:

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0">Add Name</Button>
</StackPanel>

O layout da janela está concluído. No entanto, o aplicativo não tem nenhuma lógica para realmente ser funcional. Em seguida, você precisa conectar os eventos de controle para codificar e fazer com que o aplicativo realmente faça algo.

Adicionar código para o evento Clique

O <Button> que você criou tem um Click evento que o aplicativo gera quando o usuário pressiona o botão. Assine este evento e adicione código para adicionar um nome à caixa de listagem. Use atributos XAML para assinar eventos, assim como você os usa para definir propriedades.

1. Localize o <Button> controle.

2. Defina o Click atributo como ButtonAddName_Click.

   <StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
       <TextBox x:Name="txtName" />
       <Button x:Name="btnAdd" Margin="0,5,0,0" Click="ButtonAddName_Click">Add Name</Button>
   </StackPanel>
   

3. Gere o código do manipulador de eventos. Clique com o botão direito do mouse ButtonAddName_Click e selecione Ir para Definição.

   Essa ação gera um método no code-behind que corresponde ao nome do manipulador fornecido.

   private void ButtonAddName_Click(object sender, RoutedEventArgs e)
   {
   
   }
   

   Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)
   
   End Sub
   

4. Em seguida, adicione o seguinte código para executar estas três etapas:

   1. Verifique se a caixa de texto contém um nome.
   2. Valide se o nome inserido na caixa de texto ainda não existe.
   3. Adicione o nome à caixa de listagem.

   private void ButtonAddName_Click(object sender, RoutedEventArgs e)
   {
       if (!string.IsNullOrWhiteSpace(txtName.Text) && !lstNames.Items.Contains(txtName.Text))
       {
           lstNames.Items.Add(txtName.Text);
           txtName.Clear();
       }
   }
   

   Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)
       If Not String.IsNullOrWhiteSpace(txtName.Text) And Not lstNames.Items.Contains(txtName.Text) Then
           lstNames.Items.Add(txtName.Text)
           txtName.Clear()
       End If
   End Sub
   

Executar o aplicativo

Depois de manipular o evento, execute o aplicativo. A janela é exibida e você pode inserir um nome na caixa de texto. Adicione o nome selecionando o botão.

Conteúdo relacionado

• Saiba mais sobre o Windows Presentation Foundation
• Visão geral do XAML