Demonstra Passo a passo: Construindo um aplicativo WPF simples com o WPF designer

Artigo
08/25/2010

Essa explicação passo a passo mostra como construir um aplicativo simples com o WPF Designer Windows Presentation Foundation (WPF).

Nesta explicação passo a passo, você executa as seguintes tarefas:

Criar o projeto.
Criar o layout.
Adicionar controles ao layout
Definir propriedades relacionados com layout.
Para criar uma fonte de dados.
Conectar-se a um fonte de dados.
Ligar as propriedades de controle.

Quando você terminar, você terá um aplicativo simples que permite que você procure o sistema de arquivos.Interface do usuário do seu aplicativo será implementada em Extensible Application Markup Language (XAML).Para obter mais informações, consulte XAML.A ilustração a seguir mostra como o aplicativo será exibido.

Observação:
As caixas de diálogo e comandos de menu demonstradas podem ser diferentes daqueles descritas na Ajuda, dependendo das configurações ativas ou configurações de edição.Para alterar as configurações, escolher Importar e exportar configurações on the Ferramentas menu.Para obter mais informações, consulte Configurações do Visual Studio.

Pré-requisitos

Para completar este passo a passo, são necessários os seguintes componentes:

Visual Studio 2008.

Criando o projeto

A primeira etapa é criar um projeto para a aplicação.

Para criar o projeto

Criar um novo projeto de Aplicativo WPF em Visual Basic ou Visual C# chamado FolderExplorer .Para obter mais informações, consulte Como: Criar um novo projeto de aplicativo do WPF.

Window1.xaml é aberto no WPF Designer.
No modo Design, selecione .Para obter mais informações, consulte Como: Selecionar e mover elementos na área de design.
Na janela Propriedades, defina o valor da propriedade Title a FolderExplorer.

Criando o Layout

O layout define como os controles estão organizados na janela principal do seu aplicativo.As seguintes etapas mostram como construir elementos de layout que conterão os controles do aplicativo.

Para criar o layout

Selecione a Grid controle raiz na janela.
Adicione uma segunda linha para a grade.Para obter mais informações, consulte Como: Adicionar linhas e colunas a uma grade.
Adicione uma segunda coluna para a grade.

Adicionando Controles ao Layout

Com o layout definido, você pode preenchê-lo com controles.Basta clicar no controle desejado no Caixa de ferramentas e arrastar-o para a área de design.

Para adicionar controles ao layout

Da Caixa de Ferramentas,arraste um controle TreeView na primeira célula da grade.Redimensione o controle conforme necessário.
Da Caixa de Ferramentas,arraste um controle ListView para a célula ocupando a primeira linha e segunda coluna da grade.Redimensione o controle conforme necessário.
Da Caixa de Ferramentas,arraste um controle ListView para a célula ocupando a segunda linha e segunda coluna da grade.Redimensione o controle conforme necessário.

Definindo Propriedades Layout-Relacionados

As etapas a seguir mostram como para configurar as propriedades relacionadas com layout de controles.Como você define as propriedades em cada controle, o layout será semelhante ao aplicativo final.

Definir propriedades relacionados com layout.

Selecione o controle TreeView.
Na janela Propriedades, defina as propriedades a seguir como mostrado.

Propriedade

Valor

Grid.ColumnSpan

1

Grid.RowSpan

2

Height

Auto

HorizontalAlignment

Stretch

Margin

0,0,0,0

VerticalAlignment

Stretch

Width

Auto

O TreeView controle será redimensionado para ajustar na primeira coluna da grade e para estender dua linhas da grade.
selecionar os dois ListView controles.
Na janela Propriedades, defina as propriedades a seguir como mostrado.

Propriedade

Valor

Grid.ColumnSpan

1

Grid.RowSpan

1

Height

Auto

HorizontalAlignment

Stretch

Margin

0,0,0,0

VerticalAlignment

Stretch

Width

Auto

Os controles ListView redimensionar para caber em suas respectivas células grade.
No Estrutura de tópicos de documento janela, expandir o ColumnDefinitions nó de grade.Para obter mais informações, consulte Navegando na Hierarquia do Elemento de um documento WPF.
selecionar a primeira ColumnDefinition item.
No Propriedades janela, conjunto a propriedade Width como *.
No Estrutura de tópicos de documento janela, selecionar o segundo ColumnDefinition.
No Propriedades janela, conjunto a propriedade Width como 2 *.

As colunas são redimensionadas com a primeira coluna, levando a um terço da largura da janela e a segunda coluna dê dois terços.
No Estrutura de tópicos de documento janela, expandir o RowDefinitions nó de grade.
selecionar a primeira RowDefinition item.
No Propriedades janela, defina a propriedade Height como *.
No Estrutura de tópicos de documento janela, selecionar o segundo RowDefinition.
No Propriedades janela, defina a propriedade Height como *.

As linhas são redimensionados para ocupem altura metade da janela de.
Criar e executar o projeto.
Redimensionar a janela para ver o TreeView e ListView controles de redimensionamento dinamicamente.

Propriedade	Valor
Grid.ColumnSpan	1
Grid.RowSpan	2
Height	Auto
HorizontalAlignment	Stretch
Margin	0,0,0,0
VerticalAlignment	Stretch
Width	Auto

Propriedade	Valor
Grid.ColumnSpan	1
Grid.RowSpan	1
Height	Auto
HorizontalAlignment	Stretch
Margin	0,0,0,0
VerticalAlignment	Stretch
Width	Auto

Criando uma Fonte de Dados

O fonte de dados para o aplicativo FolderExplorer é uma classe denominada Folder.Essa classe fornece um modelo simples do sistema de arquivo.Cada instância Folder possui um SubFolders e uma coleção Files.

Para criar uma fonte de dados

Adicione uma nova classe denominada Pasta para o projeto FolderExplorer.Para obter mais informações, consulte Como: Itens de Adicionar Novo Projeto.

Substitua o conteúdo da pasta do arquivo código-fonte pelo código a seguir.

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

Conectando a Fontes de Dados

Os controles WPF estão conectados a fontes de dados por meio associação de dados.O procedimento a seguir mostra como declarar e vincular a um ObjectDataProvider.

Conectar-se a um fonte de dados

Abra Window1.xaml no WPF Designer.
No exibição XAML, insira a marca <Window>, com os outros mapeamentos xmlns o seguinte XAML.Para obter mais informações, consulte Como: Importar um Namespace em XAML.
```
xmlns:my="clr-namespace:FolderExplorer"
```

Inserir a seguinte XAML após a marca de abertura <Window>e antes da marca de abertura <Grid> Marca.

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

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

Substitua a marca <TreeView> com o seguinte 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>

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

Associando Propriedades de Controle

Você pode vincular as propriedades de um controle a outro controle, que permite atualização automática de propriedade.

Ligar as propriedades de controle.

No modo de exibição XAML, substitua ambas as marcas <ListView> com o seguinte 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" />

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

Criar e executar o projeto.
Expanda o item para abrir o pasta raiz Pastas.Experimente, clicando em subpastas e observando o conteúdo de dois controles ListView.As subpastas são atualizadas no controle superior ListView, e os arquivos são exibidos no controle inferiorListView.

Próximas etapas

Atualmente, o aplicativo FolderExplorer é exibido com o estilo padrão.Você pode aplicar seus próprios estilos para alterar a aparência e comportamento do aplicativo.
Visual Studio também fornece várias ferramentas de depuração do seu aplicativo WPF.Para obter mais informações, consulte Demonstra Passo a passo: Depuração de controles do WPF personalizados em time de design.

Consulte também

Partilhar via