Compartilhar via

Tutorial: Criar um novo 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 ao Windows para projetar a interface do usuário do aplicativo e manipular eventos de entrada desses controles para interagir com o usuário. Ao 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 a funcionalidade do aplicativo.
  • Execute o aplicativo.

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

Aplicativo de exemplo concluído para o tutorial do WPF

Pré-requisitos

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.

    Uma captura de tela da caixa de diálogo iniciar do Visual Studio 2022. O botão

  3. Na caixa Pesquisar modelos , digite wpf e pressione Enter.

  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 , somente o modelo para esse idioma será mostrado.

    O termo 'wpf' está em uma caixa de pesquisa e é realçado com uma seta vermelha. Dois modelos na lista de resultados são realçados com caixas vermelhas, C# e Visual Basic. O botão

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

    1. Na caixa nome do projeto, insiraNomes.
    2. Marque a solução Place e o projeto na mesma caixa de seleção de diretório .
    3. Opcionalmente, escolha um local diferente para salvar seu código.
    4. Selecione o botão Avançar.

    Uma captura de tela da caixa de diálogo

  7. Na janela Informações adicionais , selecione .NET 9.0 (Suporte a Termos Padrão) para o Target Framework. Selecione o botão Criar.

    Uma captura de tela da caixa de diálogo 'Informações adicionais' do Visual Studio 2022. A caixa suspensa 'Framework' tem '.NET 9.0 (Suporte a Termos Padrão)' selecionado e realçado com uma seta vermelha. O botão 'Criar' também é realçado com uma caixa vermelha.

Depois que o aplicativo for gerado, o Visual Studio deverá abrir 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:

Os componentes importantes do Visual Studio que você deve saber ao criar um projeto do WPF para .NET

  1. Gerenciador de Soluções

    Todos os arquivos de projeto, código, janelas, recursos, aparecem nesta janela.

  2. Propriedades

    Esta janela mostra as configurações de propriedade que você pode configurar 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 do elemento. Em relação à imagem anterior, a barra de título da janela foi selecionada no designer.

  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 no controle ou arraste e solte o controle na superfície. 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 que o 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 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>

Importante

Se você estiver codificando no Visual Basic, o XAML será ligeiramente diferente, especificamente o x:Class=".." atributo. O XAML no Visual Basic usa o nome da classe do objeto e omite o namespace para a classe.

Para entender melhor o XAML, vamos dividi-lo. XAML é simplesmente XML que é processado pelo WPF 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. Há oito atributos declarados e geralmente pertencem a três categorias:

  • Namespaces XML

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

    O atributo principal xmlns importa o namespace XML para todo o arquivo 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 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 declarado 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 exibida, sem controles e um título de MainWindow:

    Um aplicativo WPF em branco

  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 a você 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 à grade quantos controles filho ou outros controles de layout desejar. 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. Isso realmente não lhe dá 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 designer XAML, você verá que o designer XAML mostra cada linha e coluna:

    Um aplicativo WPF com a margem definida em uma grade

Adicionar o primeiro controle

Agora que a grade foi configurada, podemos começar a adicionar controles a ela. Primeiro, comece com o controle de rótulos.

  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 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 o conteúdo, outros não. O conteúdo de um controle é mapeado à propriedade Content. Definindo o conteúdo por meio da sintaxe do atributo XAML, você usaria este formato: <Label Content="Names" />. Ambas as maneiras realizam a mesma coisa, definindo o conteúdo do rótulo para exibir o texto Names.

    Observe que o rótulo ocupa metade da janela, pois ele foi posicionado automaticamente para a primeira linha e coluna da grade. Para nossa primeira linha, não precisamos de muito espaço porque só usaremos 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>

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

    Um aplicativo WPF com a margem definida em uma grade e um controle de rótulo na primeira linha

Posicionamento do controle

Vamos falar sobre o posicionamento do controle. O rótulo criado na seção anterior foi 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 utiliza o poderoso sistema de propriedades fornecido pelo WPF.

O controle de grade define novas propriedades que os controles filho podem anexar a si mesmos. As propriedades de fato não existem no próprio controle; elas estão disponíveis para o controle uma vez que ele é adicionado ao grid.

A grade define duas propriedades para determinar o posicionamento do controle filho nas linhas e colunas: Grid.Row e Grid.Column. Se essas propriedades forem omitidas do controle, estará implícito que elas tenham os valores padrão de 0, portanto, o controle será 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 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 é 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 é nomeado, ele pode ser referenciado no code-behind. O nome é atribuído ao controle com 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

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

O StackPanel difere da grade na forma como os controles são posicionados. Embora você diga à grade onde deseja que os controles estejam com as Grid.Row propriedades e Grid.Column as propriedades anexadas, o painel de pilha funciona automaticamente estabelecendo cada um de seus controles filho sequencialmente. 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>

    O Margin atributo foi usado anteriormente na grade, mas colocamos 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, nosso aplicativo não tem nenhuma lógica para realmente ser funcional. Em seguida, precisamos 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 criamos tem um Click evento que é gerado quando o usuário pressiona o botão. Você pode assinar esse evento e adicionar código para adicionar um nome à caixa de listagem. Os atributos XAML são usados para se inscrever em eventos da mesma forma que são usados para definir propriedades.

  1. Localize o <Button> controle.

  2. Definir 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

Agora que o evento é tratado, execute o aplicativo. A janela é exibida e você pode inserir um nome na caixa de texto e adicioná-la clicando no botão.

Executando um WPF (Windows Presentation Foundation) para o aplicativo .NET.

Conteúdo relacionado

  • Last updated on