Пошаговое руководство. Построение динамического макета, управляемого данными

Статья
11/05/2008

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

Windows Presentation Foundation (WPF) предоставляет элементы управления, поддерживающие динамические макеты, управляемые данными. Использование этих элементов управления вместе с Windows Presentation Foundation (WPF) для Visual Studio (конструктор) упрощает создание этих типов макетов. В приложениях можно использовать следующие элементы управления:

Элемент управления ListView обеспечивает инфраструктуру для отображения набора элементов данных в различных макетах. Элемент управления GridView обычно используют в сочетании с элементом управления ListView для отображения данных в столбцах. Дополнительные сведения см. в разделах Общие сведения об элементе управления ListView и Общие сведения о GridView.

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

Подготовка источника данных.
Создание приложения WPF.
Настройка элемента управления «панель» Grid по умолчанию.
Добавление и настройка элемента управления ListView.
Добавление и настройка элемента управления GridView в коде XAML.
Добавление и настройка элемента управления Button.
Добавление кода привязки данных.
Тестирование приложения.

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

Динамическая структура, управляемая данными

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

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

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

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

Visual Studio 2008

Подготовка источника данных

В данном примере потребуется образец источника данных, к которому необходимо выполнить привязку. Для этого будет создан простой CSV-файл источника данных.

Подготовка источника данных

Создайте новую папку с именем Data.
В папке Data создайте новый текстовый файл с именем employees.csv.

Примечание.

Для создания файла можно использовать любой текстовый редактор, например Блокнот.

Примечание.
Для создания файла можно использовать любой текстовый редактор, например Блокнот.

Добавьте в текстовый файл следующий текст:

LastName,FirstName,Title
Davis,Sara,Sales Representative
Funk,Don,Vice President, Sales
Levin,Danny,Sales Representative
Penor,Lori,Sales Representative
Buschmann,Monika,Sales Manager
Suominen,Ari,Sales Representative
King,Russell,Sales Representative
Cameron,Maria,Inside Sales Coordinator
Doyle,Patricia,Sales Representative

Сохраните и закройте файл.

Совет.
Можно открыть файл в программе Excel и убедиться в том, что данные, разделенные запятыми, отображается в отдельных столбцах.

В папке Data создайте новый текстовый файл с именем schema.ini. Файл схемы описывает формат текстовых файлов в папке данных.

Добавьте в текстовый файл следующий текст:

[employees.csv]
Format=CSVDelimited
ColNameHeader=True

Совет.
В этом примере CSV-файл содержит заголовки столбцов. Чтобы создать привязку к CSV-файлу, не содержащему заголовков столбцов, измените значение ColNameHeader=True на ColNameHeader=False.

Сохраните и закройте файл.

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

Следующим шагом является создание проекта Visual Studio для приложения.

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

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

В WPF (конструктор) откроется файл Window1.xaml.
В меню Файл выберите Сохранить все.

Настройка элемента управления панели «сетка», используемого по умолчанию

По умолчанию новое приложение WPF содержит Window с панелью Grid. В этой процедуре в сетку добавляются две строки. Установите значение «Auto» для высоты одной строки, так чтобы ее размеры соответствовали содержимому. Установите значение «*» для высоты другой строки для использования оставшейся высоты.

Настройка элемента управления панели «сетка», используемого по умолчанию

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

Откроется окно Редактор коллекции.
Два раза нажмите кнопку Добавить для добавления двух строк.
Установите значение «*» для свойства «Height» первой строки.
Установите значение «Auto» для свойства «Height» второй строки.
Нажмите кнопку ОК, чтобы закрыть Редактор коллекции и вернуться в конструктор WPF (конструктор).

Теперь в сетке две строки, но отображается только одна. Строка, у которой значение свойства «Height» равно «Auto», временно скрыта, так как она не имеет содержимого. В данном примере это нормально. Во избежание этого можно в качестве размера указать звездочку, а в конце работы заменить ее на «Auto».
В меню Файл выберите Сохранить все.

Добавление и настройка элемента управления «ListView»

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

Добавление и настройка элемента управления «ListView»

В представлении конструктора выберите элемент управления Grid.
В Панели элементов перетащите из группы Элементы управления элемент управления ListView на панель Grid.

В окне Свойства установите следующие свойства для элемента управления ListView:

Свойство	Значение
Имя	lvEmployees
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	1
Width	Auto
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0

В меню Файл выберите Сохранить все.

Добавление и настройка элемента управления «GridView»

В этой процедуре добавляется элемент управления GridView с тремя столбцами для отображения данных из текстового файла. Столбцам присваиваются имена, так как на них будет осуществляться ссылка из кода для привязки данных к отдельным столбцам. Дополнительные сведения см. в разделе Практическое руководство. Отображение содержимого ListView с помощью GridView.

Добавление и настройка элемента управления «GridView»

В редакторе XAML найдите элемент ListView. Он выглядит следующим образом:

<ListView <ATTRIBUTES> />

Совет.
Для простоты выделения элементов в представлении XAML щелкните элемент управления в представлении конструктора или используйте окно Структура документа.

Замените элемент ListView на следующий код:

<ListView x:Name="lvEmployees">
    <ListView.View>
        <GridView AllowsColumnReorder="True">
            <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
            <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
            <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

В меню Файл выберите Сохранить все.

Добавление и настройка кнопки

В этой процедуре добавляется элемент правления Button и указывается его событие Click.

Добавление и настройка кнопки

В представлении конструктора выберите панель Grid.

Совет.
Поскольку элемент управления ListView накладывается на элемент управления Grid, выбор панели Grid может оказаться сложным. Для выбора Grid можно использовать клавишу TAB или окно Структура документа.

В Панели элементов перетащите из группы Элементы управления элемент управления Button на панель Grid.

В окне Свойства задайте значения следующих свойств для элемента управления Button:

Свойство	Значение
Name	btnGetData
Content	Get Data
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	1
Grid.RowSpan	1
Width	75
Height	23
HorizontalAlignment	Right
VerticalAlignment	Bottom
Margin	5

В редакторе XAML найдите элемент Button. Он выглядит следующим образом:

<Button <ATTRIBUTES>>Button</Button>

Совет.
Для простоты выделения элементов в представлении XAML щелкните элемент управления в представлении конструктора или используйте окно Структура документа.

Измените код XAML, чтобы добавить атрибут события Click. Код должен выглядеть следующим образом:
```
<Button Click="btnGetData_Click"<ATTRIBUTES>>Button</Button>
```
В меню Файл выберите Сохранить все.

Добавление кода привязки данных

В этой процедуре добавляется код события Click для элемента управления Button. Во время выполнения нажмите кнопку для получения данных и создания их привязки к элементам управления ListView и GridView.

Добавление кода привязки данных

Откройте файл кода программной части (Window1.xaml.cs или Window1.xaml.vb), в зависимости от языка, выбранного для проекта.

В верхней части редактора кода добавьте следующий код. Чтобы правильно создать привязку к данным, требуется доступ к пространствам имен System.Data и System.Data.OleDb.

Imports System.Data              'DataTable
Imports System.Data.OleDb        'OleDbDataAdapter
Imports System.Windows           'RoutedEventArgs
Imports System.Windows.Data      'Binding
Imports System.Windows.Controls  'ListView

using System;                   //Exception
using System.Data;              //DataTable
using System.Data.OleDb;        //OleDbDataAdapter
using System.Windows;           //RoutedEventArgs
using System.Windows.Data;      //Binding
using System.Windows.Controls;  //ListView

Добавьте следующий код в класс Window1. Для хранения данных используется таблица DataTable.
```
Dim dtEmployees As DataTable
```
```
DataTable dtEmployees;
```
Добавьте следующий код в класс Window1. Когда пользователь нажимает кнопку, происходит получение данных и создается их привязка к элементу управления ListView.
```
Private Sub btnGetData_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

    dtEmployees = GetData()
    BindData()
End Sub
```
```
private void btnGetData_Click(object sender, RoutedEventArgs e)
{
    dtEmployees = GetData();
    BindData();
}
```

Добавьте следующий код в класс Window1 и укажите путь к папке «Data». Для получения данных используется класс OleDbDataAdapter.

Function GetData() As DataTable

    Dim sConnection As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\Data\;Extended Properties=""text;HDR=yes;FMT=delimited"";"
    Dim sSQL As String = "select * from employees.csv"

    Dim dt As DataTable = New DataTable()
    Dim da As OleDbDataAdapter = New OleDbDataAdapter(sSQL, sConnection)

    Try
        da.Fill(dt)

    Catch ex As Exception
        MessageBox.Show(ex.ToString())

    End Try

    Return dt
End Function

DataTable GetData()
{
    string sConnection = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\\Data\\;Extended Properties=\"text;HDR=yes;FMT=delimited\";";
    string sSQL = "select * from employees.csv";

    DataTable dt = new DataTable();
    OleDbDataAdapter da = new OleDbDataAdapter(sSQL, sConnection);

    try
    {
        da.Fill(dt);
    }
    catch (Exception e)
    {
        MessageBox.Show(e.ToString());
    }
    return dt;
}

Добавьте следующий код в класс Window1. Для привязки данных к элементу управления ListView, его свойства DataContext устанавливается значение DataTable. Столбцы данных отображаются в столбцах элемента управления GridView.

Sub BindData()
    lvEmployees.DataContext = dtEmployees
    lvEmployees.SetBinding(ListView.ItemsSourceProperty, New Binding())

    c1Employees.DisplayMemberBinding = New Binding("LastName")
    c2Employees.DisplayMemberBinding = New Binding("FirstName")
    c3Employees.DisplayMemberBinding = New Binding("Title")
End Sub

void BindData()
{
    lvEmployees.DataContext = dtEmployees;
    lvEmployees.SetBinding(ListView.ItemsSourceProperty, new Binding());

    c1Employees.DisplayMemberBinding = new Binding("LastName");
    c2Employees.DisplayMemberBinding = new Binding("FirstName");
    c3Employees.DisplayMemberBinding = new Binding("Title");
}

В меню Файл выберите Сохранить все.

Установка динамического изменения размера окна

Свойство SizeToContent определяет, как изменяется размер окна Window при изменении размера его содержимого. По умолчанию значение этого свойства равно Manual; это означает, что пользователь может вручную изменить размеры окна по размеру содержимого. В представленной ниже процедуре для этого свойства устанавливается значение WidthAndHeight, это означает, что окно динамически меняет размер при изменении содержимого.

Установка динамического изменения размера окна

Откройте Window1.xaml в конструкторе.
В представлении конструктора выберите окно Window.
В окне Свойства задайте значения следующих свойств для Window:

Свойство

Значение

SizeToContent

WidthAndHeight

Width

Auto

Height

Auto
В меню Файл выберите Сохранить все.

Свойство	Значение
SizeToContent	WidthAndHeight
Width	Auto
Height	Auto

Тестирование приложения

В меню Отладка выберите команду Начать отладку.

Запускается приложение и открывается окно. Поскольку для свойства SizeToContent установлено значение WidthAndHeight, окно вмещает только заголовки элементов управления GridView и Button.
Нажмите кнопку Получить данные.

Приложение получает данные и привязывает их к элементу управления GridView. Размеры элементов управления GridView, ListView и Window динамически изменяются в соответствии с новым содержимым.
Закройте окно.

Объединение частей приложения

Ниже приведен пример готового файла Window1.xaml:

<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="Auto" Width="Auto" SizeToContent="WidthAndHeight">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListView x:Name="lvEmployees">
            <ListView.View>
                <GridView AllowsColumnReorder="True">
                    <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
                    <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
                    <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
        <Button Click="btnGetData_Click" Name="btnGetData" Margin="5" Height="23" Width="75" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1">Get Data</Button>
    </Grid>
</Window>

Следующие действия

В этом пошаговом руководстве использовался элемент управления GridView с тремя столбцами для отображения данных. Привязка данных осуществляется непосредственно к каждому отдельному столбцу. Также можно использовать шаблоны данных для упорядочения данных и определения для стиля их отображения в элементах управления ListView и GridView. Дополнительные сведения см. в разделе Общие сведения о шаблонах данных.

В данном примере можно поэкспериментировать с использованием шаблонов данных. Например, можно создать следующий шаблон:

<Window.Resources>
    <DataTemplate x:Key="templateEmployees">
        <Border BorderBrush="Silver" BorderThickness="1" Padding="5" Margin="5">
            <DockPanel>
                <StackPanel DockPanel.Dock="Left">
                    <TextBlock Text="{Binding Path=LastName}" />
                    <TextBlock Text="{Binding Path=FirstName}" />
                </StackPanel>
                <TextBlock Text="{Binding Path=Title}" DockPanel.Dock="Right" />
            </DockPanel>
        </Border>
    </DataTemplate>
</Window.Resources>

Затем используйте шаблон данных для элемента управления GridView с помощью следующего кода:

<ListView.View>
    <GridView>
        <GridViewColumn CellTemplate="{StaticResource templateEmployees}" />
    </GridView>
</ListView.View>

Удалите из кода следующий фрагмент или установите для соответствующих строк метки комментария:

c1Employees.DisplayMemberBinding = New Binding("LastName")
c2Employees.DisplayMemberBinding = New Binding("FirstName")
c3Employees.DisplayMemberBinding = New Binding("Title")

c1Employees.DisplayMemberBinding = new Binding("LastName");
c2Employees.DisplayMemberBinding = new Binding("FirstName");
c3Employees.DisplayMemberBinding = new Binding("Title");

См. также

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

Пошаговое руководство. Построение динамического макета, управляемого данными

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

Подготовка источника данных

Подготовка источника данных

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

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

Настройка элемента управления панели «сетка», используемого по умолчанию

Настройка элемента управления панели «сетка», используемого по умолчанию

Добавление и настройка элемента управления «ListView»

Добавление и настройка элемента управления «ListView»

Добавление и настройка элемента управления «GridView»

Добавление и настройка элемента управления «GridView»

Добавление и настройка кнопки

Добавление и настройка кнопки

Добавление кода привязки данных

Добавление кода привязки данных

Установка динамического изменения размера окна

Установка динамического изменения размера окна

Тестирование приложения

Тестирование приложения

Объединение частей приложения

Следующие действия

См. также

Задачи

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

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

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