Getting Started with Windows Presentation Foundation

  • Artigo

Este tutorial oferece uma introdução simples sobre o desenvolvimento de um Windows Presentation Foundation (WPF) aplicativo que inclui os elementos que são comuns à maioria WPF aplicativos: Extensible Application Markup Language (XAML) marcação, code-behind, definições de aplicativos, controles, layout, vinculação de dados e estilos.

Este tópico contém as seguintes seções.

  • Resumo
  • Pré-requisitos
  • Crie os arquivos de código do aplicativo
  • Compilando e executando o aplicativo
  • Adicione layout
  • Adicione controles
  • Adicione uma imagem e título
  • Adicione código para tratar eventos
  • Crie a interface do usuário para ExpenseReportPage
  • Adicione código para aplicar um estilo a um controle
  • Vincule dados a um controle
  • Conecte dados a controles
  • Adicione estilos aos dados usando modelos de dados
  • Práticas recomendadas
  • O Que Mais Há
  • Tópicos relacionados

Resumo

Este tutorial orienta-o durante o desenvolvimento de um simples aplicativo WPF usando as seguintes etapas.

  • Definindo marcação XAML para criar a aparência da interface do usuário (UI) do aplicativo.

  • Escrevendo código para criar o comportamento do aplicativo.

  • Criando uma definição de aplicativo para gerenciar o aplicativo.

  • Adicionando controles e layout para compor a UI do aplicativo.

  • Criando estilos para criar uma aparência consistente em toda a UI de um aplicativo.

  • Vinculando a UI a dados para preencher a UI a partir de dados e para manter os dados e a UI sincronizadas.

Ao final do tutorial, você terá criado um aplicativo Windows autônomo que permite que os usuários exibam os relatórios de despesa para pessoas selecionadas. O aplicativo será ser composto de várias páginas WPF que são hospedadas em uma janela com estilo de navegador.

O código de exemplo que é usado para criar este tutorial está disponível tanto em C# quanto em Microsoft Visual Basic .NET; consulte Introdução Paraos ParaplicParativos CriParando Windows PresentParation FoundParation.

Pré-requisitos

Para criar o aplicativo que é desenvolvido durante este tutorial, você precisará ter tanto o Microsoft .NET Framework quanto o Windows Software Development Kit (SDK) instalados.

Quando eles estiverem instalados, você poderá criar o aplicativo a partir de uma janela de comando (embora você possa usar uma Ambiente de Desenvolvimento Integrado (IDE) como Microsoft Visual Studio se desejar). Para compilar a partir do prompt de comando, você precisará usar a janela de comando que é instalada com o Windows Software Development Kit (SDK). Você pode encontrá-la no seguinte local de menu:

  • Menu Iniciar | Todos os Programas | Microsoft Windows SDK | CMD Shell

Como alternativa, você pode abrir o prompt de comando Windows usando as seguintes etapas:

  1. No menu Iniciar, selecione Executar.

  2. Digite o seguinte:

    C:\WINDOWS\system32\cmd.exe /E:ON /V:ON /T:0E /K "C:\Program Files\Microsoft SDKs\Windows\v6.0\Bin\SetEnv.Cmd"

  3. Pressione OK.

Observe que SetEnv.cmd configura o ambiente que você precisa para compoilar aplicativos WPF a partir do prompt de comando.

Crie os arquivos de código do aplicativo

Nesta etapa, você cria a infraestrutura do aplicativo, que inclui uma definição de aplicativo, duas páginas, e uma imagem.

  1. Criar um novo XAML arquivo de marcação chamado App.xaml. Esse arquivo define um WPF aplicativo e também usá-lo para especificar o UI Para exibir automaticamente quando o aplicativo é iniciado; nesse caso, home page.xaml (criado na próxima etapa). A sua marcação XAML deve ser algo assim:

    <Application 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  StartupUri="HomePage.xaml">
</Application>

  2. Crie um novo arquivo de marcação XAML chamado HomePage.xaml, que será a primeira página a ser exibida quando o aplicativo é iniciado. HomePage.xaml mostrará uma lista de pessoas a partir da qual um usuário pode selecionar uma pessoa cujo relatório de despesas será exibido. Adicione um elemento Page a HomePage.xaml, com a seguinte configuração:

    • O barra de título do navegador é "ExpenseIt".

    • A largura do navegador é 550 pixels independentes de dispositivo.

    • A altura do navegador é 350 pixels independentes de dispositivo.

    • O título da página é "ExpenseIt - Home".

    A sua marcação XAML deve ser algo assim:

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">
</Page>

  3. criar um novo arquivo de código chamado home page.xaml.cs. Este arquivo será um arquivo code-behind que contém código para manipular eventos declarados em home page.xaml. Seu código deve ter esta aparência:

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class HomePage : Page
    {
        public HomePage()
        {
            InitializeComponent();
        }
    }
}

  4. Criar um novo XAML arquivo de marcação chamado ExpenseReportPage.xaml. Adicionar um Pageelemento e o conjunto "ExpenseIt - Exibir relatório de despesas" sistema autônomo o título de página. Essa página mostrará o relatório de despesas para a pessoa que está selecionada na home page.xaml. A sua marcação XAML deve ser algo assim:

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">
</Page>

  5. Criar um novo arquivo chamado ExpenseReportPage.xaml.cs ele. Esse arquivo será um arquivo code-behind que vincula dados de relatório de despesas para o UI definido em ExpenseReportPage.xaml. Seu código deve ter esta aparência:

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class ExpenseReportPage : Page
    {
        public ExpenseReportPage()
        {
            InitializeComponent();
        }
    }
}

  6. Adicione uma imagem chamada watermark.png na mesma pasta onde se encontram os cinco arquivos de código que você criou nas etapas anteriores. Você pode criar sua própria imagem, ou copiar o arquivo de mesmo nome a partir do código de exemplo.

Compilando e executando o aplicativo

Nesta etapa, você usa MSBuild para compilar o aplicativo que você definiu na seção anterior.

  1. Crie um novo arquivo chamado ExpenseIt.csproj. Esse arquivo estará a MSBuild arquivo, que é um especial XML arquivo que contém a configuração da compilação do aplicativo e inclui o seguinte:

    • As variáveis globais de compilação para o projeto compilado, incluindo o nome do assembly criado, o tipo de assembly a ser gerado, e a pasta onde o assembly deve ser gerado.

    • Referências para os arquivos de código.

    • Referências aos assemblies Microsoft .NET Framework que contêm os tipos que o aplicativo usa.

    O conteúdo do arquivo de compilação deve ser algo desse tipo:

    <?xml version="1.0" encoding="utf-8"?>
<Project xmlns="https://schemas.microsoft.com/developer/msbuild/2003">
    <PropertyGroup>
        <AssemblyName>ExpenseIt</AssemblyName>
        <TargetType>winexe</TargetType>
        <OutputPath>bin\$(Configuration)\</OutputPath>
    </PropertyGroup>
    <ItemGroup>
        <Reference Include="System"/>
        <Reference Include="System.Xml"/>
        <Reference Include="System.Data"/>
        <Reference Include="WindowsBase"/>
        <Reference Include="PresentationCore"/>
        <Reference Include="PresentationFramework"/>
    </ItemGroup>
    <ItemGroup>
        <ApplicationDefinition Include="App.xaml"/>
        <Page Include="HomePage.xaml"/>
        <Compile Include="HomePage.xaml.cs" />
        <Page Include="ExpenseReportPage.xaml"/>
        <Compile Include="ExpenseReportPage.xaml.cs" />
        <Resource Include="watermark.png"/>
    </ItemGroup>
    <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets"/>
    <Import Project="$(MSBuildBinPath)\Microsoft.WinFX.targets"/>
</Project>

  2. Abra uma janela de comando na mesma pasta que o arquivo de projeto e arquivos de código do aplicativo.

  3. A partir do prompt de comando, execute o seguinte comando:

    MSBuild ExpenseIt.csproj

    Para Microsoft Visual Basic .NET, execute o seguinte comando em vez disso:

    MSBuild ExpenseIt.vbproj

    Para compilar e executar o aplicativo usando Visual Studio, abra o arquivo de projeto em Visual Studio e pressione F5.

ObservaçãoObservação:

Visual Studio 2005 gera automaticamente um arquivo de projeto. Como este tutorial não presume que Visual Studio esteja instalado, o processo para criar um arquivo de projeto é detalhado. Para mais informações sobre a criação de arquivos .csproj, consulte Building a WPF Application (WPF). Se você estiver usando Visual Studio para concluir este tutorial, substitua o conteúdo do arquivo .csproj gerado com o texto do MSBuild anterior.

  1. Abra a pasta que contém o aplicativo compilado executável: expenseit.exe. Se criado a partir do aviso de comando, expenseit.exe está localizado na pasta seguinte:

    Pasta que contém arquivos de código do aplicativo\bin\

    Se ele for compilado usando Visual Studio, expenseit.exe estrá localizado na pasta a seguir:

    Pasta que contém arquivos de código do aplicativo\bin\debug\

  2. A partir do aviso de comando, execute expenseit.exe. A figura a seguir mostra o aplicativo em execução.

    Captura de tela de exemplo de ExpenseIt

Adicione layout

Layout oferece uma maneira ordenada posicionar elementos da UI e também gerencia o tamanho e a posição desses elementos quando uma UI for redimensionada. Você normalmente adiciona layout à sua UI com um dos seguintes controles de layout:

Cada um deles suporta um tipo especial de layout para seus elementos-filho. Páginas ExpenseIt podem ser redimensionadas, e cada página possui elementos que são organizados horizontalmente e verticalmente junto com outros elementos. Consequentemente, o Grid é o elemento de layout ideal para o aplicativo.

ObservaçãoObservação:

Para obter mais informações Panel elementos, consulte Panels Overview.

A marcação XAML a seguir cria uma tabela de coluna única com três linhas e uma margem de 10 pixels adicionando um Grid a HomePage.xaml:

  1. Abra HomePage.xaml

  2. Adicione o seguinte código XAML entre as tags Page.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">
    <Grid Margin="10">
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
    </Grid>
</Page>

Adicione controles

Nesta etapa, a UI da home page será atualizada para mostrar uma lista de pessoas a partir da qual os usuários podem selecionar uma pessoa para ver seu relatório de despesas. Para criar esta UI, os seguintes elementos são adicionados ao HomePage.xaml:

  • ListBox (para a lista de pessoas).

  • Label (para o cabeçalho lista).

  • Button (para clicar para exibir o relatório de despesas para a pessoa que está selecionada na lista).

Use as seguintes etapas para atualizar HomePage.xaml:

  1. Substitua o conteúdo do arquivo HomePage.xaml com o seguinte código XAML.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid Margin="10">

    <Grid.ColumnDefinitions>
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <!-- People list -->
    <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
      <Label VerticalAlignment="Center" Foreground="White">Names</Label>
    </Border>
    <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1">
      <ListBoxItem>Mike</ListBoxItem>
      <ListBoxItem>Lisa</ListBoxItem>
      <ListBoxItem>John</ListBoxItem>
      <ListBoxItem>Mary</ListBoxItem>
    </ListBox>

    <!-- View report button -->
    <Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125"
      Height="25" HorizontalAlignment="Right">View</Button>

  </Grid>

</Page>

  2. Compile e execute o aplicativo.

A imagem a seguir mostra os controles que são criados pelo código nessa etapa.

Captura de tela de exemplo de ExpenseIt

Adicione uma imagem e título

Nesta etapa, a UI da home page é atualizada com uma imagem apropriada e um título de página:

  1. Abra HomePage.xaml

  2. Substitua o conteúdo do arquivo HomePage.xaml com o seguinte código XAML.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="230" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Source="watermark.png" />
      </Canvas>
      <Label VerticalAlignment="Center" FontFamily="Trebuchet MS" 
        FontWeight="Bold" FontSize="18" Foreground="#0066cc">
        View Expense Report
      </Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

      <Grid.ColumnDefinitions>
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>

      <!-- People list -->
      <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
        <Label VerticalAlignment="Center" Foreground="White">Names</Label>
      </Border>
      <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1">
        <ListBoxItem>Mike</ListBoxItem>
        <ListBoxItem>Lisa</ListBoxItem>
        <ListBoxItem>John</ListBoxItem>
        <ListBoxItem>Mary</ListBoxItem>
      </ListBox>

      <!-- View report button -->
      <Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125" 
        Height="25" HorizontalAlignment="Right">View</Button>

    </Grid>

  </Grid>
</Page>

    Este XAML atualiza o Grid das seguintes maneiras:

    • Criando um nova grade com duas linhas.

    • Adicionando um DockPanel com um Canvas, Image e Label à primeira linha. O DockPanel abrange duas colunas da primeira linha que, em conjunto com o Canvas sendo encaixado à esquerda, permite que o Label se sobreponha à Image.

    • Usando o Source atributo das Image elemento para especificar a imagem de fonte: marca-d'água.PNG.

    • Adicionando o seguinte texto de título ao Label: "Exibir relatório de despesas".

    • Usando os atributos de Canvas e Label para configurar sua aparência e o tamanho.

    • Movendo a grade que HomePage.XAML continha originalmente para a segunda coluna da segunda linha da grade nova.

  3. Compile e execute o aplicativo.

A figura a seguir mostra os resultados desta etapa.

Captura de tela de exemplo de ExpenseIt

Adicione código para tratar eventos

  1. Abra HomePage.xaml

  2. Substitua o elemento Button definido na etapa anterior com o código a seguir.

    ...
<!-- View report button -->
<Button Grid.Column="0" Grid.Row="2" Width="125" Height="25" 
  Margin="0,10,0,0" HorizontalAlignment="Right" 
  Click="viewButton_Click">View</Button>
...
    ObservaçãoObservação:

    O nome dos Button evento para lidar com é Click. O nome de tratador de eventos definido pelo desenvolvedor é viewButton_Click. O tratador de eventos está registrado com o evento Click para o controle Button.

  3. Abra o HomePage.xaml.cs que você criou na etapa Crie os arquivos de código do aplicativo do tutorial.

  4. Substitua o conteúdo do arquivo pelo código a seguir. Isso adiciona código para tratar o evento Click, que faz com que o arquivo ExpenseReportPage.xaml seja alcançado por navegação.

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class HomePage : Page
    {
        public HomePage()
        {
            InitializeComponent();
        }
        private void viewButton_Click(object sender, RoutedEventArgs args)
        {
            // View Expense Report
            ExpenseReportPage expenseReportPage = new ExpenseReportPage();
            this.NavigationService.Navigate(expenseReportPage);
        }
    }
}

Crie a interface do usuário para ExpenseReportPage

ExpenseReportPage.xaml exibe o relatório de despesas para a pessoa que foi selecionada no home page.xaml. As seguintes atualizações de adicionar controles e o layout para criar o básico UI para ExpenseReportPage.xaml. Também adicionar plano de fundo e preenchimento de cores para os vários UI elementos.

  1. Abra o arquivo ExpenseReportPage.xaml e adicione o código a seguir.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">

  <Grid>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="230" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Source="watermark.png" />
      </Canvas>
      <Label VerticalAlignment="Center" FontFamily="Trebuchet MS" 
        FontWeight="Bold" FontSize="18" Foreground="#0066cc">
        Expense Report For:
      </Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
      </Grid.RowDefinitions>

      <!-- Name -->
      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
        <Label Margin="0,0,0,5" FontWeight="Bold">Name:</Label>
        <Label Margin="0,0,0,5" FontWeight="Bold"></Label>
      </StackPanel>

      <!-- Department -->
      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" 
        Orientation="Horizontal">
        <Label Margin="0,0,0,5" FontWeight="Bold">Department:</Label>
        <Label Margin="0,0,0,5" FontWeight="Bold"></Label>
      </StackPanel>

      <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3">

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

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

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
          <Label VerticalAlignment="Center" Foreground="White">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
          <Label VerticalAlignment="Center" Foreground="White">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" />

      </Grid>
    </Grid>
  </Grid>
</Page>

  2. Compile e execute o aplicativo.

A imagem a seguir mostra os elementos UI adicionados a ExpenseReportPage.xaml.

Captura de tela de exemplo de ExpenseIt

Adicione código para aplicar um estilo a um controle

A aparência de vários elementos muitas vezes pode ser o mesmo para todos os elementos do mesmo tipo em um UI. UI usa estilos para tornar aparências reutilizáveis entre vários elementos. A capacidade de reutilização dos estilos ajuda a simplificar a criação e o gerenciamento da marcação XAML. Esta etapa substitui os atributos por elemento que foram definidos nas etapas anteriores com estilos:

  1. Abra o arquivo App.xaml criado na etapa Crie os arquivos de código do aplicativo deste tutorial.

  2. Substitua o conteúdo do arquivo com a seguinte marcação XAML:

    <Application 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  StartupUri="HomePage.xaml">

  <Application.Resources>

    <!-- Background image style -->
    <Style x:Key="backgroundImageStyle">
      <Setter Property="Image.Source" Value="watermark.png"/>
    </Style>

    <!-- Header text style -->
    <Style x:Key="headerTextStyle">
      <Setter Property="Label.VerticalAlignment" Value="Center"></Setter>
      <Setter Property="Label.FontFamily" Value="Trebuchet MS"></Setter>
      <Setter Property="Label.FontWeight" Value="Bold"></Setter>
      <Setter Property="Label.FontSize" Value="18"></Setter>
      <Setter Property="Label.Foreground" Value="#0066cc"></Setter>
    </Style>

    <!-- Label style -->
    <Style x:Key="labelStyle" TargetType="{x:Type Label}">
      <Setter Property="VerticalAlignment" Value="Top" />
      <Setter Property="HorizontalAlignment" Value="Left" />
      <Setter Property="FontWeight" Value="Bold" />
      <Setter Property="Margin" Value="0,0,0,5" />
    </Style>

    <!-- List header style -->
    <Style x:Key="listHeaderStyle" TargetType="{x:Type Border}">
      <Setter Property="Height" Value="35" />
      <Setter Property="Padding" Value="5" />
      <Setter Property="Background" Value="#4E87D4" />
    </Style>

    <!-- List header text style -->
    <Style x:Key="listHeaderTextStyle" TargetType="{x:Type Label}">
      <Setter Property="Foreground" Value="White" />
      <Setter Property="VerticalAlignment" Value="Center" />
      <Setter Property="HorizontalAlignment" Value="Left" />
    </Style>

    <!-- Button style -->
    <Style x:Key="buttonStyle" TargetType="{x:Type Button}">
      <Setter Property="Width" Value="125" />
      <Setter Property="Height" Value="25" />
      <Setter Property="Margin" Value="0,10,0,0" />
      <Setter Property="HorizontalAlignment" Value="Right" />
    </Style>

  </Application.Resources>

</Application>

    Esta marcação XAML adiciona os seguintes estilos:

    • headerTextStyle: Para formatar o Label de título da página.

    • labelStyle: Para formatar os rótulos Label.

    • listHeaderStyle: Para formatar os controles Border do cabeçalho da lista.

    • listHeaderTextStyle: Para formatar o Label do cabeçalho da lista.

    • buttonStyle: Para formatar o botão em HomePage.xaml.

    Observe que os estilos são recursos são filhos do elemento-propriedade Application.Resources. Neste local, os estilos são aplicados a todos os elementos em um aplicativo. Para ver um exemplo sobre o uso de recursos em um aplicativo .NET Framework, consulte Como: Usar Recursos do aplicativo.

  3. Abra HomePage.xaml

  4. Substitua o conteúdo do arquivo pelo código a seguir. Esta etapa substitui atributos específicos de aparência de cada elemento com um estilo adequado.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="230" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">View Expense Report</Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

      <Grid.ColumnDefinitions>
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>

      <!-- People list -->
      <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
        <Label Style="{StaticResource listHeaderTextStyle}">Names</Label>
      </Border>
      <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1">
        <ListBoxItem>Mike</ListBoxItem>
        <ListBoxItem>Lisa</ListBoxItem>
        <ListBoxItem>John</ListBoxItem>
        <ListBoxItem>Mary</ListBoxItem>
      </ListBox>

      <!-- View report button -->
      <Button Grid.Column="0" Grid.Row="2" Style="{StaticResource buttonStyle}" 
        Click="viewButton_Click">View
      </Button>

    </Grid>

  </Grid>

</Page>

  5. Abra ExpenseReportPage.xaml.

  6. Substitua o conteúdo do arquivo pelo código a seguir.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">

  <Grid>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="230" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">Expense Report For:</Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
      </Grid.RowDefinitions>

      <!-- Name -->
      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Name:</Label>
        <Label Style="{StaticResource labelStyle}"></Label>
      </StackPanel>

      <!-- Department -->
      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Department:</Label>
        <Label Style="{StaticResource labelStyle}"></Label>
      </StackPanel>

      <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3">

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

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

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" />

      </Grid>

    </Grid>

  </Grid>

</Page>

  7. Compile e execute o aplicativo. Após adicionar a marcação XAML nesta etapa, o aplicativo tem a mesma aparência que tinha antes de ser atualizado com estilos.

Vincule dados a um controle

Esta etapa cria os dados de XML que são vinculados a vários controles:

  1. Abra HomePage.xaml

  2. Substitua o conteúdo do arquivo com a seguinte marcação XAML:

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid>

    <Grid.Resources>

      <!-- Expense Report Data -->
      <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
        <x:XData>
          <Expenses >
            <Person Name="Mike" Department="Legal">
              <Expense ExpenseType="Lunch" ExpenseAmount="50" />
              <Expense ExpenseType="Transportation" ExpenseAmount="50" />
            </Person>
            <Person Name="Lisa" Department="Marketing">
              <Expense ExpenseType="Document printing"
                  ExpenseAmount="50"/>
              <Expense ExpenseType="Gift" ExpenseAmount="125" />
            </Person>
            <Person Name="John" Department="Engineering">
              <Expense ExpenseType="Magazine subscription" 
                 ExpenseAmount="50"/>
              <Expense ExpenseType="New machine" ExpenseAmount="600" />
              <Expense ExpenseType="Software" ExpenseAmount="500" />
            </Person>
            <Person Name="Mary" Department="Finance">
              <Expense ExpenseType="Dinner" ExpenseAmount="100" />
            </Person>
          </Expenses>
        </x:XData>
      </XmlDataProvider>

      <!-- Name item template -->
      <DataTemplate x:Key="nameItemTemplate">
        <Label Content="{Binding XPath=@Name}"/>
      </DataTemplate>

    </Grid.Resources>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="230" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">View Expense Report</Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

      <Grid.ColumnDefinitions>
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>

      <!-- People list -->
      <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
        <Label Style="{StaticResource listHeaderTextStyle}">Names</Label>
      </Border>
      <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1" 
        ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}" 
        ItemTemplate="{StaticResource nameItemTemplate}" />

      <!-- View report button -->
      <Button Grid.Column="0" Grid.Row="2" Style="{StaticResource buttonStyle}" 
        Click="viewButton_Click">View</Button>

    </Grid>

  </Grid>

</Page>

    Observe que os dados são criados como um recurso Grid.

Conecte dados a controles

Nesta etapa, você escreve o código que recupera o item corrente que está selecionado na lista de pessoas em HomePagee passa sua referência para o construtor da ExpenseReportPage durante a instanciação. ExpenseReportPage conjuntos de seu contexto de dados com o item passado, que é o que os controles definidos ExpenseReportPage.xaml vinculará a.

  1. Abra HomePage.xaml.cs.

  2. Substitua o conteúdo do arquivo pelo código a seguir.

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class HomePage : Page
    {
        public HomePage()
        {
            InitializeComponent();
        }

        private void viewButton_Click(object sender, RoutedEventArgs args)
        {
            // Create a new expense report page and pass it the selected person
            // by using the non-default constructor.
            ExpenseReportPage expenseReportPage = 
                new ExpenseReportPage(this.peopleListBox.SelectedItem);

            // Navigate to the expense report page,
            this.NavigationService.Navigate(expenseReportPage);
        }
    }
}

  3. Abra ExpenseReportPage.xaml.cs.

  4. Substitua o conteúdo do arquivo pelo código a seguir.

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class ExpenseReportPage : Page
    {
        public ExpenseReportPage(object data)
        {
            InitializeComponent();

            // Bind to expense report data.
            this.DataContext = data;
        }
    }
}

Adicione estilos aos dados usando modelos de dados

Nesta etapa, você atualiza a UI para cada item nas listas de dados vinculadas usando modelos de dados:

  1. Abra ExpenseReportPage.xaml.

  2. Substitua o conteúdo do arquivo pelo código a seguir.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">

  <Grid>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="230" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">Expense Report For:</Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

      <Grid.Resources>
        <!-- Reason item template -->
        <DataTemplate x:Key="typeItemTemplate">
          <Label Content="{Binding XPath=@ExpenseType}"/>
        </DataTemplate>
        <!-- Amount item template -->
        <DataTemplate x:Key="amountItemTemplate">
          <Label Content="{Binding XPath=@ExpenseAmount}"/>
        </DataTemplate>
      </Grid.Resources>

      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
      </Grid.RowDefinitions>

      <!-- Name -->
      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Name:</Label>
        <Label Content="{Binding XPath=@Name}" Style="{StaticResource labelStyle}"/>
      </StackPanel>

      <!-- Department -->
      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Department:</Label>
        <Label Content="{Binding XPath=@Department}" Style="{StaticResource labelStyle}"/>
      </StackPanel>
      <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3">

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

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

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" ItemsSource="{Binding XPath=Expense}" 
          ItemTemplate="{StaticResource typeItemTemplate}" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" ItemsSource="{Binding XPath=Expense}" 
          ItemTemplate="{StaticResource amountItemTemplate}" />

      </Grid>

    </Grid>

  </Grid>

</Page>

  3. Compile e execute o aplicativo.

Observe que os modelos de dados são definidos como recursos Grid.

As duas figuras a seguir mostram ambas as páginas do aplicativo ExpenseIt com controles, layout, estilos, vinculação de dados, e modelos de dados aplicados:

Capturas de tela de exemplo de ExpenseIt

Práticas recomendadas

Este exemplo demonstra um recurso específico da Windows Presentation Foundation e, consequentemente, não segue boas práticas de desenvolvimento de aplicativos. Para ver uma cobertura abrangente de boas práticas de desenvolvimento de aplicativos Windows Presentation Foundation (WPF) e Microsoft .NET Framework, consulte os seguintes itens conforme adequado:

Acessibilidade - Práticas recomendadas de Acessibilidade

Segurança - Windows Presentation Foundation Security

Localização - Visão geral de globalização e localização do WPF

Optimizing WPF Application Performance

O Que Mais Há

Agora você tem um número de técnicas à sua disposição para criar uma UI usando Windows Presentation Foundation (WPF). Agora você deve ter uma compreensão ampla dos blocos de construção básicos de um aplicativo .NET Framework vinculado a dados. Este tópico não é de forma alguma completo, mas esperamos que agora você também tenha uma noção de algumas das possibilidades que você poderá descobrir sozinho além das técnicas neste tópico.

Painéis são explorados detalhadamente em Panels Overview. Modelos de dados são explorados em maior profundidade em Visão geral sobre Templating de dados.

Consulte também

Conceitos

O sistema de layout

Panels Overview

Revisão de Associação de Dados

Visão geral sobre Templating de dados

Building a WPF Application (WPF)