Tutorial: Criar uma aplicação WPF com .NET

Neste tutorial, aprende a usar o Visual Studio para criar uma aplicação Windows Presentation Foundation (WPF). Com o Visual Studio, adicionas controlos às janelas e geres eventos. No final deste tutorial, você tem um aplicativo simples que adiciona nomes a uma caixa de listagem.

Neste tutorial, você:

Crie um novo aplicativo WPF.
Adicione controles a uma janela.
Manipule eventos de controle para fornecer funcionalidade do aplicativo.
Execute o aplicativo.

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

Concluído aplicativo de exemplo para WPF tutorial

Pré-requisitos

Visual Studio 2026
- Selecione a carga de trabalho de desenvolvimento de aplicações de ambiente de trabalho .NET
- Selecione o componente individual .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.

Abra o Visual Studio.
Selecione Criar um novo projeto.
Na caixa Procurar modelos , escreva wpf e espere que apareçam os resultados da pesquisa.
Na lista suspensa de código , escolha C# ou Visual Basic .
Na lista de modelos, selecione WPF Application e depois selecione Próximo.

Importante

Não selecione o modelo Aplicação WPF (.NET Framework ).

A imagem a seguir mostra modelos de projeto C# e Visual Basic .NET. Se aplicou o filtro da linguagem de código , o modelo correspondente é listado.
Na janela Configurar o seu novo projeto , defina o nome do projeto para Nomes e selecione Próximo.

Também pode guardar o seu projeto numa pasta diferente ajustando o caminho de Localização .
Finalmente, na janela de informação adicional , selecione .NET 10.0 (Suporte a Longo Prazo) para a definição Framework e depois selecione Criar.

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

Partes importantes do Visual Studio

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

Os componentes importantes do Visual Studio 2026 que deve conhecer ao criar um projeto WPF para .NET.

Explorador de Soluções

Todos os teus ficheiros de projeto, código, janelas e recursos aparecem nesta janela.
Propriedades

Esta janela mostra as definições de propriedades que pode configurar com base no contexto do item selecionado. Por exemplo, se selecionar um item no Explorador de Soluções, as definições relacionadas com o ficheiro são apresentadas. Se um objeto no Designer for selecionado, as propriedades do controlo ou janela são exibidas.
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 controlo à superfície atual, clique duas vezes num controlo ou arraste e solte o controlo para o designer. Em vez disso, é comum usar a janela do editor de código XAML para criar uma interface do usuário (UI), enquanto usa a janela do designer XAML para visualizar os resultados.
Designer XAML

Este é o designer de um documento XAML. É interativo e você pode arrastar e soltar objetos do Toolbox. Ao selecionar e mover itens no designer, você pode compor visualmente a interface do usuário para seu aplicativo.

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

Quando você seleciona itens no designer, a janela Properties exibe as propriedades e os atributos sobre esse objeto.
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 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 são visíveis, as alterações em um são refletidas no outro. Ao navegar com o cursor de texto no editor de código, a janela de Propriedades exibe as propriedades e os atributos desse objeto.

Examine o XAML

Depois de criar o seu projeto, o editor de código XAML abre-se. Mostra uma quantidade mínima de código XAML para mostrar a janela. Se o editor não estiver aberto, clique duas vezes no MainWindow.xaml item na janela Explorador 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>

Importante

Se estiveres a programar no Visual Basic, o XAML é ligeiramente diferente, especificamente o x:Class=".." atributo. XAML no Visual Basic usa o nome da classe do objeto e omite o namespace para a classe.

Para entender melhor o XAML, vamos decompô-lo. XAML é simplesmente XML que o WPF processa para criar uma interface. Para entender XAML, você deve, no mínimo, estar familiarizado com os conceitos básicos de XML.

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

Namespaces XML

Um namespace XML fornece estrutura ao XML. Determina que conteúdo XML podes declarar no ficheiro.

O atributo principal xmlns importa o espaço de nomes XML para todo o ficheiro. Neste caso, mapeia 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 para os objetos declarados pelo seu projeto, aqueles declarados no namespace de código 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 é a classe Names.MainWindow em C# e MainWindow no Visual Basic.
Atributo Title

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

Alterar a janela

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

Primeiro, execute a aplicação pressionando a tecla F5 ou selecionando Debug>Start Debugging no menu.

Vê a janela padrão gerada pelo modelo, sem quaisquer controlos, e com o título MainWindow:
Altere o título da janela definindo o Title como Names.

Altere o tamanho da janela definindo o Height como 180 e Width como 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

WPF fornece um poderoso sistema de layout com muitos controles de layout diferentes. Os controles de layout ajudam a colocar e dimensionar controles filho e podem até mesmo fazê-lo automaticamente. O controlo de layout padrão fornecido neste XAML é o controlo <Grid> .

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

O controle de grelha coloca os seus controlos filiais 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 te dá muita flexibilidade na colocação dos controlos.

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

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

Esta configuração afasta a grade das bordas da janela e torna-a visualmente mais agradável.

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>

Selecione a grelha no editor de código XAML ou no designer XAML. O designer XAML mostra cada linha e coluna:

Adicionar o primeiro controlo

Agora que a grelha está configurada, pode começar a adicionar controlos. Primeiro, adicione o controlo da etiqueta.

Crie um novo elemento <Label> dentro do elemento <Grid>, após as definições de linha e coluna. Defina o conteúdo do elemento para o valor da cadeia 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 controlo está associado à propriedade Content. Se definir o conteúdo através da sintaxe dos atributos 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.

A etiqueta ocupa metade da janela, pois foi posicionada automaticamente na primeira linha e coluna da grelha. Para a primeira fila, não precisas de muito espaço porque só vais usar essa fila para a etiqueta.
Altere o atributo Height do primeiro <RowDefinition> de * para Auto.

O valor Auto dimensiona automaticamente a linha da grelha para o tamanho do seu conteúdo, neste caso, o controlo de etiqueta.
```
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
```
O designer mostra agora a etiqueta a ocupar uma pequena parte da altura disponível. Há mais espaço para a fila seguinte ocupar.

Colocação do controlo

Vamos falar sobre o posicionamento do controle. A etiqueta que criaste na secção anterior é automaticamente colocada na linha 0 e na coluna 0 da grelha. A numeração de linhas e colunas começa em 0 e aumenta 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ê diz a um controle para usar uma linha ou coluna diferente quando o controle não tem conhecimento da grade? Propriedades anexadas! A grelha aproveita o sistema de propriedades fornecido pelo WPF.

O controlo de grelha define novas propriedades que os controlos filhos podem anexar a si mesmos. As propriedades não existem realmente no controlo em si, mas tornam-se disponíveis para o controlo quando este é adicionado à grelha.

A grade define duas propriedades para determinar o posicionamento de linha e coluna de um controle filho: Grid.Row e Grid.Column. Se omitir estas propriedades no controlo, os valores padrão são 0. Assim, o controlo é colocado em fila 0 e coluna 0 da grelha. Tente alterar o posicionamento do controle <Label> definindo o atributo Grid.Column como 1:

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

Observe que o rótulo foi movido para a segunda coluna. Podes usar as Grid.Row propriedades e Grid.Column anexadas para colocar os próximos controlos que vais criar. Por enquanto, porém, restaure o rótulo para a coluna 0.

Criar a caixa de listagem de nomes

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

Declare o controle <ListBox /> abaixo do controle <Label>.
Defina a propriedade Grid.Row como 1.
Defina a propriedade x:Name como lstNames.

Depois de atribuir um nome a um controlo, pode referenciá-lo no código subjacente. Atribui o nome ao controlo usando o x:Name atributo.

Veja como o XAML deve parecer:

<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 utilizador utiliza estes controlos para inserir um nome a adicionar à caixa da lista. Em vez de criar mais linhas e colunas na grelha para organizar estes controlos, coloque estes controlos no controlo de layout <StackPanel>.

O StackPanel difere do Grid na forma como coloca os controles. Enquanto usas as propriedades anexadas Grid.Row e Grid.Column para indicar à grelha onde queres os controlos, o painel de empilhamento funciona automaticamente. Dispõe cada um dos seus controlos filhos sequencialmente. Ele "empilha" cada controle após o outro.

Declare o controle <StackPanel> abaixo do controle <ListBox>.
Defina a propriedade Grid.Row como 1.
Defina a propriedade Grid.Column como 1.
Defina o Margin como 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 usaste o Margin atributo na grelha, mas só colocaste um único valor, 10. Esta margem tem um valor de 5,0,0,0, que é muito diferente de 10. A propriedade margin é do tipo Thickness e pode interpretar ambos os valores. Uma espessura define o espaço em torno de cada lado de uma moldura retangular, esquerda, superior, direita, inferior, respectivamente. Se o valor da margem for um valor único, ele usará esse valor para os quatro lados.
Dentro do controlo <StackPanel>, crie um controlo <TextBox />.
1. Defina a propriedade x:Name como txtName.
Por fim, após a <TextBox>, ainda dentro do <StackPanel>, crie um controlo <Button>.
1. Defina a propriedade x:Name como btnAdd.
2. Defina o Margin como 0,5,0,0.
3. Defina o conteúdo como Add Name.

Veja como o XAML deve parecer:

<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>

A disposição da janela está concluída. No entanto, a aplicação não tem lógica para ser realmente funcional. Depois, tens de ligar os eventos de controlo ao código e fazer com que a aplicação realmente faça alguma coisa.

Adicionar código para o evento Click

O <Button> que criaste tem um Click evento que a aplicação levanta quando o utilizador carrega no botão. Subscreva este evento e adicione um código para adicionar um nome à caixa da lista. Usa atributos XAML para subscrever eventos, tal como os usas para definir propriedades.

Localize o controle <Button>.

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>

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

Esta ação gera um método no code-behind que corresponde ao nome do handler que forneceste.
```
private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{

}
```
```
Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)

End Sub
```

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

Certifique-se de que a caixa de texto contém um nome.
Valide se o nome inserido na caixa de texto ainda não existe.
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 tratar do evento, abre a aplicação. A janela aparece, e podes introduzir um nome na caixa de texto. Adicione o nome selecionando o botão.

Executando aplicação WPF para .NET no Visual Studio 2026.

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

Feedback

Esta página foi útil?

Last updated on 2025-12-28