Tutorial: Criar um novo aplicativo WPF com .NET

  • Artigo

Neste breve tutorial, você aprenderá a criar um novo aplicativo Windows Presentation Foundation (WPF) com o Visual Studio. Depois que o aplicativo inicial for gerado, você aprenderá como adicionar controles e como lidar com eventos. Ao final deste tutorial, você terá um aplicativo simples que adiciona nomes a uma caixa de listagem.

Importante

A documentação do Guia da Área de Trabalho para .NET 7 e .NET 6 está em construção.

Neste tutorial, você aprenderá a:

  • Criar um novo aplicativo WPF
  • Adicionar controles a um formulário
  • Manipular eventos de controle para fornecer funcionalidade do aplicativo
  • Executar o aplicativo

Aqui está uma visualização do aplicativo que você criará ao seguir este tutorial:

Finished sample app for WPF tutorial

Pré-requisitos

Dica

Use o Visual Studio 2022 versão 17.4 ou posterior e instale os componentes individuais do .NET 7 e do .NET 6. O suporte para o .NET 7 foi adicionado no Visual Studio 2022 versão 17.4.

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.

    Create a new WPF project in Visual Studio 2022 for .NET. 6

  3. Na caixa Procurar modelos, escreva wpf e, em seguida, prima Enter.

  4. Na lista suspensa de linguagem de código, escolha C# ou Visual Basic.

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

    Importante

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

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

    Search for the WPF template in Visual Studio 2022 for .NET. 6

  6. Na janela Configurar seu novo projeto, faça o seguinte:

    1. Na caixa Nome do projeto, digite Nomes.
    2. Marque a caixa de seleção Colocar solução e projeto no mesmo diretório .
    3. Opcionalmente, escolha um Local diferente para salvar seu código.
    4. Selecione o botão Avançar.

    Configure new WPF project in Visual Studio 2022 for .NET 6

  7. Na janela Informações adicionais, selecione .NET 6.0 (suporte de longo prazo) para Target Framework. Selecione o botão Criar.

    Select target framework for new WPF project in Visual Studio 2022 for .NET 6

  1. Abra o Visual Studio.

  2. Selecione Criar um novo projeto.

    Create a new WPF project in Visual Studio 2022 for .NET 7.

  3. Na caixa Procurar modelos, escreva wpf e, em seguida, prima Enter.

  4. Na lista suspensa de linguagem de código, escolha C# ou Visual Basic.

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

    Importante

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

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

    Search for the WPF template in Visual Studio 2022 for .NET. 7

  6. Na janela Configurar seu novo projeto, faça o seguinte:

    1. Na caixa Nome do projeto, digite Nomes.
    2. Marque a caixa de seleção Colocar solução e projeto no mesmo diretório .
    3. Opcionalmente, escolha um Local diferente para salvar seu código.
    4. Selecione o botão Avançar.

    Configure new WPF project in Visual Studio 2022 for .NET 7

  7. Na janela Informações adicionais, selecione .NET 7.0 (suporte a termo padrão) para Target Framework. Selecione o botão Criar.

    Select target framework for new WPF project in Visual Studio 2022 for .NET 7

Depois que o aplicativo é gerado, o Visual Studio deve abrir o painel de designer XAML para a janela padrão, MainWindow. Se o designer não estiver visível, clique duas vezes no arquivo MainWindow.xaml no painel Gerenciador de Soluções para abri-lo.

Partes importantes do Visual Studio

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

The important components of Visual Studio you should know when creating a WPF project for .NET

  1. Gerenciador de Soluções

    Todos os seus arquivos de projeto, código, janelas, recursos, aparecerão neste painel.

  2. Propriedades

    Este painel mostra as configurações de propriedade que você pode definir com base no item selecionado. Por exemplo, se você selecionar um item no Gerenciador de Soluções, verá as configurações de propriedade relacionadas ao arquivo. Se você selecionar um objeto no Designer, verá as configurações desse item.

  3. Caixa de ferramentas

    A caixa de ferramentas contém todos os controles que você pode adicionar a um formulário. Para adicionar um controle ao formulário atual, clique duas vezes em um controle ou arraste e solte o controle.

  4. Designer XAML

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

    Quando o designer e o editor estão visíveis, as alterações em um são refletidas no outro. Quando você seleciona itens no designer, o painel Propriedades exibe as propriedades e os 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 inferir os valores de 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 no outro. À medida que você navega pelo cursor de texto no editor de códigos, o painel Propriedades exibe as propriedades e os atributos sobre esse objeto.

Examinar o XAML

Depois que seu projeto é criado, o editor de código XAML fica visível com 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 no 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>

Vamos detalhar esse código XAML para entendê-lo melhor. XAML é simplesmente XML que pode ser processado pelos compiladores que o WPF usa. Ele descreve a interface do usuário do WPF e interage com o código .NET. Para entender o XAML, você deve, no mínimo, estar familiarizado com os conceitos básicos de XML.

A raiz <Window> do documento representa o tipo de objeto que está sendo descrito pelo arquivo XAML. Há oito atributos declarados, e eles geralmente pertencem a três categorias:

  • Namespaces

    Um namespace XML fornece estrutura para o XML, determinando qual conteúdo XML pode ser declarado no arquivo.

    O atributo main xmlns importa o namespace XML para o arquivo inteiro e, nesse 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 declara o xmlns:local prefixo local e mapeia para os objetos declarados pelo seu projeto, aqueles declarados Names no namespace de código.

  • Atributo x:Class

    Esse atributo mapeia o para o tipo definido pelo seu código: o <Window>arquivo MainWindow.xaml.cs ou MainWindow.xaml.vb que é a Names.MainWindow classe.

  • Atributo Title

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

Alterar a janela

Primeiro, execute o projeto e veja a saída padrão. Você verá uma janela que aparece, sem nenhum controle, e um título de MainWindow:

A blank WPF app

Para nosso aplicativo de exemplo, essa janela é muito grande e a barra de título não é descritiva. Altere o título e o tamanho da janela alterando os atributos apropriados no XAML para os seguintes valores:

<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 controle de layout padrão fornecido a você neste XAML é o <Grid> controle.

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

O <Grid> controle define linhas e colunas nas quais seus controles estarão. Uma grade sempre tem uma única linha e coluna declaradas, ou seja, a grade por padrão é uma única célula. Isso realmente não lhe dá muita flexibilidade na colocação de controles.

Antes de adicionarmos as novas linhas e colunas, adicione um novo atributo ao <Grid> elemento: Margin="10". Isso insere a grade da janela e faz com que pareça um pouco mais agradável.

Em seguida, 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 grade no editor de código XAML ou no designer XAML, você verá que o designer XAML mostra cada linha e coluna:

A WPF app with the margin set on a grid

Adicionar o primeiro controle

Agora que a grade foi criada, podemos começar a adicionar controles a ela. Primeiro, comece com o controle de rótulo. Crie um novo <Label> elemento dentro do <Grid> elemento, após as definições de linha e coluna, e atribua-lhe um valor de cadeia de caracteres de 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 conteúdo, outros não. O conteúdo de um controle é mapeado para a Content propriedade. Definindo o conteúdo por meio da sintaxe do atributo XAML, você usaria este formato: <Label Content="Names" />. Ambas as formas realizam a mesma coisa, definindo o conteúdo do rótulo para exibir o texto Names.

No entanto, temos um problema, o rótulo ocupa metade da janela, pois foi atribuído automaticamente à primeira linha e coluna da grade. Para a nossa primeira linha, não precisamos de muito espaço porque só vamos usar essa linha para o rótulo. Altere o Height atributo do primeiro <RowDefinition> de * para Auto. O Auto valor dimensiona automaticamente a linha de grade para o tamanho de seu conteúdo, neste caso, o controle de rótulo.

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

Observe que o designer agora mostra a etiqueta ocupando uma pequena quantidade da altura disponível. Agora há mais espaço para a próxima fila ocupar. A maioria dos controles define algum tipo de valor de altura e largura que eles devem ocupar que pareça melhor para eles. Por exemplo, o controle label tem um valor de altura que garante que você possa lê-lo.

A WPF app with the margin set on a grid and a label control in the first row

Posicionamento do controle

Vamos falar sobre posicionamento de controle. O rótulo criado na seção acima foi colocado automaticamente na linha 0 e na coluna 0 da grade. A numeração de linhas e colunas começa em 0 e aumenta em 1 para cada nova linha ou coluna. O controle não sabe nada sobre a grade, e o controle não define nenhuma propriedade para controlar seu posicionamento dentro da grade. O controle poderia até ter sido colocado dentro de algum outro controle de layout que tem seu próprio conjunto de regras definindo como colocar controles.

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 grade aproveita o poderoso sistema de propriedades fornecido pelo WPF. A grade define novas propriedades que os controles filho podem declarar e usar. As propriedades não existem no controle em si, elas são anexadas pela grade quando o controle é adicionado à grade.

A grade define duas propriedades para determinar o posicionamento de linha e coluna de um controle filho: Grid.Row e Grid.Column. Se essas propriedades forem omitidas do controle, será implícito que elas têm os valores padrão de 0, portanto, o controle será colocado na linha 0 e na coluna 0 da grade. Tente alterar o <Label> posicionamento do controle definindo o Grid.Column atributo como 1:

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

Observe como seu rótulo agora foi movido para a segunda coluna. Você pode usar as Grid.Row propriedades e Grid.Column anexadas para colocar os próximos controles que criaremos. 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. A caixa de listagem estará em linha 1 e coluna 0. Também daremos a esse controle o nome de lstNames. Depois que um controle é nomeado, ele pode ser referenciado no code-behind. O nome é atribuído ao controle com o x:Name atributo.

<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

Os dois últimos controles que adicionaremos são uma caixa de texto e um botão, que o usuário usará para inserir um nome a ser adicionado à caixa de listagem. No entanto, em vez de tentar criar mais linhas e colunas para a grade, colocaremos esses controles no <StackPanel> controle de layout.

O painel de pilha difere da grade em como os controles são colocados. Enquanto você informa à grade onde deseja que os controles estejam com as Grid.Row propriedades e anexadas, o painel de pilha funciona automaticamente colocando o primeiro controle e Grid.Column , em seguida, colocando o próximo controle depois dele, continuando até que todos os controles tenham sido colocados. Ele "empilha" cada controle abaixo do outro.

Crie o <StackPanel> controle após a caixa de listagem e coloque-o na coluna 1de linha 1 de grade . Adicione outro atributo nomeado Margin com um valor de 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>

O Margin atributo foi usado anteriormente na grade, mas colocamos apenas um único valor, 10. Agora usamos um valor de no painel de 5,0,0,0 pilha. A margem é um Thickness tipo e pode interpretar ambos os valores. Uma espessura define o espaço ao redor 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.

Em seguida, crie um <TextBox> e <Button> controle no <StackPanel>.

<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á completo. No entanto, nosso aplicativo não tem nenhuma lógica para realmente ser funcional. Em seguida, precisamos conectar os eventos de controle ao código e fazer com que o aplicativo realmente faça algo.

Adicionar código para o evento Click

O <Button> que criamos tem um Click evento que é gerado quando o usuário pressiona o botão. Você pode se inscrever neste evento e adicionar código para adicionar um nome à caixa de listagem. Assim como você define uma propriedade em um controle adicionando um atributo XAML, você pode usar um atributo XAML para assinar um evento. 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>

Agora você precisa gerar o código do manipulador. Clique com o botão direito do mouse e ButtonAddName_Click selecione Ir para definição. Essa ação gera um método no code-behind para você que corresponde ao nome do manipulador inserido.

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:

  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

Agora que o evento foi codificado, você pode executar o aplicativo pressionando a tecla F5 ou selecionando Depurar>Iniciar Depuração no menu. A janela é exibida e você pode inserir um nome na caixa de texto e, em seguida, adicioná-lo clicando no botão.

Running a Windows Presentation Foundation (WPF) for .NET app.

Próximas etapas

Saiba mais sobre o Windows Presentation Foundation