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

Источник: msdnmicrosoft

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

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

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

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

Примечание
Это практическое руководство в виде практикума, выполняемого в 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.

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

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

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

Добавьте новый класс с именем Folder к проекту FolderExplorer.
Замените содержимое файла Folder с исходным кодом следующим кодом.

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

XAML

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

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.

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 во время разработки.

Ссылки по теме