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

Статья
08/11/2011

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

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

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

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

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

Примечание

Это практическое руководство в виде практикума, выполняемого в Visual Studio 2010, доступно на странице WPF Simple Application Walkthrough Hands on Lab.

Предварительные требования

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

Visual Studio 2010.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Свойство

Значение

Grid.ColumnSpan

1

Grid.RowSpan

2

Высота

Auto

HorizontalAlignment

Stretch

Margin

0,0,0,0

VerticalAlignment

Stretch

Ширина

Auto

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

Свойство

Значение

Grid.ColumnSpan

1

Grid.RowSpan

1

Высота

Auto

HorizontalAlignment

Stretch

Margin

0,0,0,0

VerticalAlignment

Stretch

Ширина

Auto

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

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

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

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

Свойство	Значение
Grid.ColumnSpan	1
Grid.RowSpan	1
Высота	Auto
HorizontalAlignment	Stretch
Margin	0,0,0,0
VerticalAlignment	Stretch
Ширина	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 и выполнить привязку к нему.

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

Откройте файл MainWindow.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>

Замените тег <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>

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

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

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

В представлении 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" />

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

Вложенные папки отображаются в верхнем элементе управления ListView, а файлы – в нижнем элементе управления ListView.

Следующие шаги

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

См. также

Журнал изменений

Дата	Журнал	Причина
Декабрь 2010	Добавлена ссылка на практикум WPF Simple Application Walkthrough Hands on Lab.	Улучшение информации.

Декабрь 2010

Добавлена ссылка на практикум WPF Simple Application Walkthrough Hands on Lab.

Улучшение информации.

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

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

Предварительные требования

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Следующие шаги

См. также

Задачи

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

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

Журнал изменений

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