Пошаговое руководство. Построение простого приложения WPF с помощью конструктора WPF

Статья
11/05/2008

Обновлен: Ноябрь 2007

В данном пошаговом руководстве показано, как построить простое приложение Windows Presentation Foundation (WPF) с помощью WPF (конструктор).

В данном пошаговом руководстве выполняются следующие задачи.

Создание проекта.
Создание макета.
Добавление в макет элементов управления.
Задание значений свойств, относящихся к макету.
Создание источника данных.
Подключение к источнику данных.
Привязка свойств элемента управления.

В итоге будет создано простое приложение, позволяющее просматривать файловую систему. Пользовательский интерфейс приложения будет реализован на языке XAML. Дополнительные сведения см. в разделе Язык XAML. На следующем рисунке показано, как будет выглядеть приложение.

Просмотр дерева FolderExplorer и списка

Примечание.
Отображаемые диалоговые окна и команды меню могут отличаться от описанных в справке в зависимости от текущих параметров или версии среды. Чтобы изменить параметры, выберите пункт Импорт и экспорт параметров в меню Сервис. Дополнительные сведения см. в разделе Параметры Visual Studio.

Отображаемые диалоговые окна и команды меню могут отличаться от описанных в справке в зависимости от текущих параметров или версии среды. Чтобы изменить параметры, выберите пункт Импорт и экспорт параметров в меню Сервис. Дополнительные сведения см. в разделе Параметры Visual Studio.

Обязательные компоненты

Ниже перечислены компоненты, необходимые для выполнения этого пошагового руководства.

Visual Studio 2008.

Создание проекта

Первым этапом является создание проекта для приложения.

Создание проекта

Создайте новый проект приложения WPF на языке Visual Basic или Visual C# с именем FolderExplorer. Дополнительные сведения см. в разделе Практическое руководство. Создание нового проекта приложения WPF.

В конструкторе WPF (конструктор) откроется файл Window1.xaml.
В представлении конструктора выберите окно. Дополнительные сведения см. в разделе Практическое руководство. Выбор и перемещение элементов в область конструктора.
В окне Свойства установите для свойства Title значение Folder Explorer.

Создание макета

Макет определяет расположение элементов управления в главном окне приложения. Ниже показано, как создать элементы макета, которые будут содержать элементы управления приложения.

Создание макета

Выберите в окне корневой элемент управления Grid.
Добавьте вторую строку к сетке. Дополнительные сведения см. в разделе Практическое руководство. Добавление строк и столбцов в таблицу.
Добавьте второй столбец к сетке.

Добавление элементов управления в макет

Если макет определен, его можно заполнить элементами управления. Для этого достаточно щелкнуть требуемый элемент управления вПанели элементов и перетащить его в область конструктора.

Добавление в макет элементов управления

Перетащите элемент управления TreeView с Панели элементов в первую ячейку сетки. При необходимости измените размер элемента управления.
Перетащите элемент управления ListView с Панели элементов в ячейку, находящуюся в первой строке и втором столбце сетки. При необходимости измените размер элемента управления.
Перетащите элемент управления ListView с Панели элементов в ячейку, находящуюся во второй строке и втором столбце таблицы. При необходимости измените размер элемента управления.

Задание свойств, связанных с макетом

Ниже показано, как задать значения свойств, связанных с макетом, для элементов управления. После задания свойств для каждого элемента управления макет будет больше напоминать готовое приложение.

Задание свойств, связанных с макетом

Выберите элемент управления TreeView.
В окне Свойства задайте значения свойств, как показано ниже.

Свойство

Значение

Grid.ColumnSpan

1

Grid.RowSpan

2

Height

Auto

HorizontalAlignment

Stretch

Margin

0,0,0,0

VerticalAlignment

Stretch

Width

Auto

Размер элемента управления TreeView изменится таким образом, чтобы элемент поместился в первом столбце таблицы и занимал две строки таблицы.
Выберите оба элемента управления ListView.
В окне Свойства задайте значения свойств, как показано ниже.

Свойство

Значение

Grid.ColumnSpan

1

Grid.RowSpan

1

Height

Auto

HorizontalAlignment

Stretch

Margin

0,0,0,0

VerticalAlignment

Stretch

Width

Auto

Размер элементов управления ListView изменится таким образом, чтобы эти элементы заполнили соответствующие ячейки сетки.
В окне Структура документа разверните узел ColumnDefinitions для сетки. Дополнительные сведения см. в разделе Навигация по иерархии элементов документа WPF.
Выберите первый элемент узла ColumnDefinition.
В окне Свойства присвойте свойству «Width» значение *.
В окне Структура документа выберите второй элемент узла ColumnDefinition.
В окне Свойства присвойте свойству «Width» значение 2*.

Размер столбцов изменится: первый столбец займет одну треть ширины окна, а второй — две трети.
В окне Структура документа разверните узел RowDefinitions для сетки.
Выберите первый элемент узла RowDefinition.
В окне Свойства присвойте свойству «Height» значение *.
В окне Структура документа выберите второй элемент узла RowDefinition.
В окне Свойства присвойте свойству «Height» значение *.

Размер строк изменится: они будут занимать половину высоты окна.
Выполните построение и запуск проекта.
Измените размер окна, чтобы увидеть динамическое изменение размера элементов управления TreeView и ListView.

Свойство	Значение
Grid.ColumnSpan	1
Grid.RowSpan	2
Height	Auto
HorizontalAlignment	Stretch
Margin	0,0,0,0
VerticalAlignment	Stretch
Width	Auto

Свойство	Значение
Grid.ColumnSpan	1
Grid.RowSpan	1
Height	Auto
HorizontalAlignment	Stretch
Margin	0,0,0,0
VerticalAlignment	Stretch
Width	Auto

Создание источника данных

Источник данных для приложения FolderExplorer является классом с именем Folder. Этот класс представляет простую модель файловой системы. Каждый экземпляр класса Folder содержит коллекции SubFolders и Files.

Создание источника данных

Добавьте новый класс с именем Folder к проекту FolderExplorer. Дополнительные сведения см. в разделе Практическое руководство. Добавление в проект новых элементов.

Замените содержимое файла Folder с исходным кодом следующим кодом.

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

Подключение к источнику данных

Элементы управления WPF подключаются к источникам данных путем привязки данных. Далее показано, как объявить источник ObjectDataProvider и выполнить привязку к нему.

Подключение к источнику данных

Откройте файл Window1.xaml в конструкторе WPF (конструктор).
В представлении XAML вставьте следующий код XAML в тег <Window> рядом с другими сопоставлениями xmlns. Дополнительные сведения см. в разделе Практическое руководство. Импорт пространства имен в XAML.
```
xmlns:my="clr-namespace:FolderExplorer"
```

Вставьте следующий код XAML после открывающего тега <Window> и перед открывающим тегом <Grid>.

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

Замените тег <TreeView> следующим кодом 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>

Привязка свойств элемента управления

Свойства элемента управления можно привязать к другому элементу управления, что обеспечивает автоматическое обновление свойств.

Выполнение привязки свойств элемента управления

В представлении XAML замените оба тега <ListView> следующим кодом 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" />

Выполните построение и запуск проекта.
Разверните элемент Folders, чтобы открыть корневую папку. Поэкспериментируйте, щелкая вложенные папки и посматривая содержимое двух элементов управления ListView. Вложенные папки отображаются в верхнем элементе управления ListView, а файлы — в нижнем элементе управления ListView.

Последующие шаги

Сейчас приложение FolderExplorer отображается в соответствии со стилем, принятым по умолчанию. Можно применять собственные стили для изменения внешнего вида и поведения приложения.
Visual Studio также предоставляет множество средств для отладки приложения WPF. Дополнительные сведения см. в разделе Пошаговое руководство. Отладка пользовательских элементов управления WPF во время разработки.

См. также

Поделиться через

Пошаговое руководство. Построение простого приложения WPF с помощью конструктора WPF

Обязательные компоненты

Создание проекта

Создание проекта

Создание макета

Создание макета

Добавление элементов управления в макет

Добавление в макет элементов управления

Задание свойств, связанных с макетом

Задание свойств, связанных с макетом

Создание источника данных

Создание источника данных

Подключение к источнику данных

Подключение к источнику данных

Привязка свойств элемента управления

Выполнение привязки свойств элемента управления

Последующие шаги

См. также

Задачи

Основные понятия

Другие ресурсы

Дополнительные ресурсы