Passo a passo: Criando um Aplicativo WPF Simples com o designer WPF

Atualização: December 2010

This walkthrough shows how to build a simple Windows Presentation Foundation (WPF) application with the WPF Designer.

In this walkthrough, you perform the following tasks:

• Create the project.

• Create the layout.

• Add controls to the layout.

• Set layout-related properties.

• Create a data source.

• Connect to a data source.

• Bind control properties.

When you are finished, you will have a simple application which lets you browse the file system. Your application's user interface will be implemented in Extensible Application Markup Language (XAML). For more information, see XAML no WPF. The following illustration shows how your application will appear.

Observação
Um-de mãos no laboratório versão esta explicação passo a passo que é executado dentro do Visual Studio 2010 está disponível em WPF simples aplicativo explicação passo a passo laboratório prático.

Prerequisites

You need the following components to complete this walkthrough:

• Visual Studio 2010.

Creating the Project

The first step is to create the project for the application.

To create the project

1. Create a new WPF Application project in Visual Basic or Visual C# named FolderExplorer. For more information, see Como: Criar um novo projeto de aplicativo WPF.

   MainWindow. XAML é aberto no WPF Designer.

2. In Design view, select the window. For more information, see Como: Selecionar e mover elementos na superfície de design.

3. In the Properties window, set the value of the Title property to Folder Explorer.

Creating the Layout

The layout defines how controls are arranged in your application's main window. The following steps show how to construct layout elements which will contain the application's controls.

To create the layout

1. Select the root Grid control on the window.

2. Add a second row to the grid. For more information, see Como: adicionar linhas e colunas para uma grade.

3. Add a second column to the grid.

Adding Controls to the Layout

With the layout defined, you can populate it with controls.

To add controls to the layout

1. From the Toolbox, drag a TreeView control into the first cell of the grid.

2. From the Toolbox, drag a ListView control into the cell occupying the first row and second column of the grid.

3. From the Toolbox, drag a ListView control into the cell occupying the second row and second column of the grid.

Setting Layout-related Properties

The following steps show how to set layout-related properties on the controls. As you set properties on each control, the layout will more closely resemble the final application.

To set layout-related properties

1. Select the TreeView control.

2. In the Properties window, set the following properties as shown.

   Property	Value
   Grid.ColumnSpan	1
   Grid.RowSpan	2
   Height	Auto
   HorizontalAlignment	Stretch
   Margin	0,0,0,0
   VerticalAlignment	Stretch
   Width	Auto

   The TreeView control resizes to fit in the first grid column and to span the two grid rows.

3. Selecione ambos ListView controles.

4. In the Properties window, set the following properties as shown.

   Property	Value
   Grid.ColumnSpan	1
   Grid.RowSpan	1
   Height	Auto
   HorizontalAlignment	Stretch
   Margin	0,0,0,0
   VerticalAlignment	Stretch
   Width	Auto

   The ListView controls resize to fit in their respective grid cells.

   

5. Abrir o Document Outline janela. For more information, see Navegando na Hierarquia do Elemento de um documento WPF.

6. Expanda o ColumnDefinitions o nó para a grade.

7. Selecione o primeiro ColumnDefinition item.

   

8. No Propriedades janela, defina a propriedade de largura *.

9. No Document Outline janela, selecione a segunda ColumnDefinition.

10. No Propriedades janela, defina a propriedade de largura 2 *.

    As colunas são redimensionadas com a primeira coluna, levando a um-terço da largura da janelae a segunda coluna, levando a dois terços do-.

11. No Document Outline janela, expandir o RowDefinitions o nó para a grade.

12. Selecione o primeiro RowDefinition item.

13. No Propriedades janela, defina a propriedade de altura *.

14. No Document Outline janela, selecione a segunda RowDefinition.

15. No Propriedades janela, defina a propriedade de altura *.

    As linhas redimensionar ocupem metade da janelade altura.

16. Crie e execute a solução.

17. Redimensionar a janela para ver o TreeView e ListView controles de redimensionamento dinamicamente.

Creating a Data Source

The data source for the FolderExplorer application is a class named Folder. This class provides a simple model of the file system. Each Folder instance has a SubFolders and a Files collection.

To create a data source

1. Add a new class named Folder to the FolderExplorer project. For more information, see Como: Adicionar novos itens de projeto.

2. Replace the contents of the Folder source code file with the following code.

   Imports System
   Imports System.IO
   Imports System.Linq
   Imports System.Collections.Generic
   Imports System.Collections.ObjectModel
   Imports System.Text
   
   Public Class Folder
       Private _folder As DirectoryInfo
       Private _subFolders As ObservableCollection(Of Folder)
       Private _files As ObservableCollection(Of FileInfo)
   
       Public Sub New() 
           Me.FullPath = "c:\"
   
       End Sub 'New
   
   
       Public ReadOnly Property Name() As String 
           Get
               Return Me._folder.Name
           End Get
       End Property
   
   
       Public Property FullPath() As String 
           Get
               Return Me._folder.FullName
           End Get
   
           Set
               If Directory.Exists(value) Then
                   Me._folder = New DirectoryInfo(value)
               Else
                   Throw New ArgumentException("must exist", "fullPath")
               End If
           End Set
       End Property
   
       ReadOnly Property Files() As ObservableCollection(Of FileInfo)
           Get
               If Me._files Is Nothing Then
                   Me._files = New ObservableCollection(Of FileInfo)
   
                   Dim fi As FileInfo() = Me._folder.GetFiles()
   
                   Dim i As Integer
                   For i = 0 To fi.Length - 1
                       Me._files.Add(fi(i))
                   Next i
               End If
   
               Return Me._files
           End Get
       End Property
   
       ReadOnly Property SubFolders() As ObservableCollection(Of Folder)
   
           Get
               If Me._subFolders Is Nothing Then
                   Try
   
                   Me._subFolders = New ObservableCollection(Of Folder)
   
                       Dim di As DirectoryInfo() = Me._folder.GetDirectories()
   
                       Dim i As Integer
                       For i = 0 To di.Length - 1
                           Dim newFolder As New Folder()
                           newFolder.FullPath = di(i).FullName
                           Me._subFolders.Add(newFolder)
                       Next i
                   Catch ex As Exception
   
                       System.Diagnostics.Trace.WriteLine(ex.Message)
   
                   End Try
               End If
   
               Return Me._subFolders
           End Get
       End Property
   End Class
   

   using System;
   using System.IO;
   using System.Linq;
   using System.Collections.Generic;
   using System.Collections.ObjectModel;
   using System.Text;
   
   namespace FolderExplorer
   {
       public class Folder
       {
           private DirectoryInfo _folder;
           private ObservableCollection<Folder> _subFolders;
           private ObservableCollection<FileInfo> _files;
   
           public Folder()
           {
               this.FullPath = @"c:\";
           }
   
           public string Name
           {
               get
               {
                   return this._folder.Name;
               }
           }
   
           public string FullPath
           {
               get
               {
                   return this._folder.FullName;
               }
   
               set
               {
                   if (Directory.Exists(value))
                   {
                       this._folder = new DirectoryInfo(value);
                   }
                   else
                   {
                       throw new ArgumentException("must exist", "fullPath");
                   }
               }
           }
   
           public ObservableCollection<FileInfo> Files
           {
               get
               {
                   if (this._files == null)
                   {
                       this._files = new ObservableCollection<FileInfo>();
   
                       FileInfo[] fi = this._folder.GetFiles();
   
                       for (int i = 0; i < fi.Length; i++)
                       {
                           this._files.Add(fi[i]);
                       }
                   }
   
                   return this._files;
               }
           }
   
           public ObservableCollection<Folder> SubFolders
           {
               get
               {
                   if (this._subFolders == null)
                   {
                       this._subFolders = new ObservableCollection<Folder>();
   
                       DirectoryInfo[] di = this._folder.GetDirectories();
   
                       for (int i = 0; i < di.Length; i++)
                       {
                           Folder newFolder = new Folder();
                           newFolder.FullPath = di[i].FullName;
                           this._subFolders.Add(newFolder);
                       }
                   }
   
                   return this._subFolders;
               }
           }
       }
   }
   

Connecting to a Data Source

WPF controls are connected to data sources through data binding. The following procedure shows how to declare and bind to an ObjectDataProvider.

To connect to a data source

1. Abrir MainWindow. XAML na WPF Designer. 

2. In XAML view, insert the following XAML into the <Window> tag, with the other xmlns mappings. For more information, see Como: Importar um namespace em XAML.

   xmlns:my="clr-namespace:FolderExplorer"
   

3. Insert the following XAML after the opening <Window> tag and before the opening <Grid> tag.

       <Window.Resources>
   
           <ObjectDataProvider x:Key="RootFolderDataProvider" >
               <ObjectDataProvider.ObjectInstance>
                   <my:Folder FullPath="c:\"/>
               </ObjectDataProvider.ObjectInstance>
           </ObjectDataProvider>
   
           <HierarchicalDataTemplate 
               DataType    = "{x:Type my:Folder}"
               ItemsSource = "{Binding Path=SubFolders}">
               <TextBlock Text="{Binding Path=Name}" />
           </HierarchicalDataTemplate>
   
       </Window.Resources>
   
   

4. Replace the <TreeView> tag with the following XAML.

           <TreeView Grid.ColumnSpan="1" Grid.RowSpan="2" Margin="0,0,0,0" Name="treeView1" >
               <TreeViewItem ItemsSource="{Binding Path=SubFolders, Source={StaticResource RootFolderDataProvider}}" Header="Folders"  />
           </TreeView>
   

Binding Control Properties

You can bind a control's properties to another control, which enables automatic property updating.

To bind control properties

1. In XAML view, replace both <ListView> tags with the following XAML.

           <ListView Name="listView1" 
           ItemsSource="{Binding Path=SelectedItem.SubFolders, ElementName=treeView1, Mode=OneWay}" 
           Grid.Column="1" 
           Grid.RowSpan="1" />
   
           <ListView Name="listView2" 
           ItemsSource="{Binding Path=SelectedItem.Files, ElementName=treeView1, Mode=OneWay}" 
           Grid.Column="1" 
           Grid.Row="1" />
   

2. Crie e execute a solução.

3. Expanda o pastas item para ver as pastas da unidade c: unidade.

4. Experiment by clicking subfolders and observing the contents of the two ListView controls.

   Subpastas serão exibidas na parte superior ListView arquivos e controle são exibidos na parte inferior ListView de controle.

Next Steps

• Currently, the FolderExplorer application is displayed with the default styling. You can apply your own styles to change the application's appearance and behavior.

• Visual Studio also provides many tools for debugging your WPF application. For more information, see Walkthrough: depuração WPF personalizar controles em tempo de design.

Consulte também

Tarefas

Como: usar anexadas eventos

Walkthrough: depuração WPF personalizar controles em tempo de design

Conceitos

Exibição de Divisão: Visualizar a superfície de design WPF e XAML ao mesmo tempo

Navegando na Hierarquia do Elemento de um documento WPF

Outros recursos

Trabalhar com controles no criador de WPF

Histórico de alterações