Автор: Мэхеш Чанд (Mahesh Chand)

Эта статья является 1-й частью моей серии статей о DataGrid в WPF. В этой части читатели познакомятся с созданием элемента DataGrid с помощью XAML и C# и с настройкой свойств этого элемента. В этой статье также будет показано, как выполнить привязку данных для коллекции.

В этой статье показывается, как создать и использовать элемент управления DataGrid в WPF и XAML.

Примечание. Эта статья написана с использованием Visual Studio 2010 и .NET Framework 4.0.

Введение

Элемент управления представляет элемент управления DataGrid в WPF в XAML.  

<DataGrid />

При перетаскивании элемента управления DataGrid из Панели инструментов в конструктор и при размещении этого элемента в XAML добавляется следующий код.

Свойства Width и Height представляют ширину и высоту элемента DataGrid.  Свойство Name представляет имя элемента управления, являющееся уникальным идентификатором элемента управления.  Свойство Margin задает поле смещения элемента DataGrid в окне. Следующий фрагмент кода определяет имя, высоту, ширину и поле элемента управления DataGrid.

<DataGrid Height="148" HorizontalAlignment="Left" Margin="12,21,0,0"
          Name="dataGrid1" VerticalAlignment="Top" Width="225" />

На рис. 1 показана панель инструментов и код XAML после добавления на страницу элемента управления DataGrid.

Рис. 1.

Привязка данных

Свойство ItemSource элемента DataGrid — это ключ к привязке данных. Можно привязать любой источник данных, реализующий интерфейс IEnuemerable. Каждая строка элемента DataGrid привязана к объекту в источнике данных, а каждый столбец элемента привязан к свойству объектов источника данных.

В этом примере мы создадим коллекцию объектов и привяжем ее к элементу управления DataGrid.

Сначала мы добавим класс в проект. Класс Author выглядит, как показано в примере кода 2, и содержит члены ID, Name, DOB, BookTitle и IsMVP.

public class Author
{
    public int ID { get; set; }
    public string Name { get; set; }       
    public DateTime DOB { get; set; }
    public string BookTitle { get; set; }
    public bool IsMVP  { get; set; }
}

Пример кода 2

Теперь можно создать коллекцию объектов Author, используя класс List. Метод LoadCollectionData в примере кода 3 создает список объектов Author.

/// <summary>
/// List of Authors
/// </summary>
/// <returns></returns>
private List<Author> LoadCollectionData()
{
    List<Author> authors = new List<Author>();
    authors.Add(new Author(){
            ID = 101,
            Name = "Mahesh Chand",
            BookTitle = "Graphics Programming with GDI+",
            DOB = new DateTime(1975, 2, 23),
            IsMVP = false });
    authors.Add(new Author()
    {
        ID = 201,
        Name = "Mike Gold",
        BookTitle = "Programming C#",
        DOB = new DateTime(1982, 4, 12),
        IsMVP = true
    });
    authors.Add(new Author()
    {
        ID = 244,
        Name = "Mathew Cochran",
        BookTitle = "LINQ in Vista",
        DOB = new DateTime(1985, 9, 11),
        IsMVP = true
    });
    return authors;
}

Пример кода 3

Последним шагом является настройка свойства ItemsSource элемента управления DataGrid. Следующий фрагмент кода задает свойство ItemsSource элемента управления DataGrid соответствующим списку авторов.

McDataGrid.ItemsSource = LoadCollectionData();

Данные, загруженные в элемент DataGrid, выглядят, как показано на рис. 2, где свойства класса Author становятся именами столбцов.

Рис. 2.

Как показано на рис. 2, все публичные свойства объекта Author представлены в виде столбцов элемента DataGrid. Это обусловлено тем, что свойство AutoGenerateColumns элемента управления DataGrid равно true. Если создавать автоматические столбцы не нужно, просто установите это свойство равным false.

McDataGrid.AutoGenerateColumns = false;

Задание ширины столбца и высоты строки

Свойства ColumnWidth и RowHeight элемента управления DataGrid используются, чтобы задать значения по умолчанию для ширины столбца и высоты строки элемента управления DataGrid.

Следующий фрагмент кода задает для ширины столбца и высоты строки значения 100 и 30, соответственно.

<DataGrid Height="200" Width="500" HorizontalAlignment="Left" Margin="12,21,0,0"

  Name="McDataGrid" VerticalAlignment="Top" RowHeight="30" ColumnWidth="100"

          >

Новый элемент управления DataGrid выглядит, как показано на рис. 3.

Рис. 3.

Свойства MaxWidth и MaxHeight представляют максимальную ширину и максимальную высоту для элемента DataGrid.  Свойства MinWidth и MinHeight представляют минимальную ширину и минимальную высоту для элемента DataGrid. Свойства MaxColumnWidth и MinColumnWidth представляют максимальную ширину и минимальную ширину столбцов элемента управления DataGrid.

Видимость линий сетки и видимость заголовков

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

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

GridLinesVisibility="Vertical" HeadersVisibility="All"

Новый элемент управления DataGrid выглядит, как показано на рис. 4.

Рис. 4.

Фон сетки, фон строки и чередующийся фон строки

Свойство Background используется, чтобы задать цвет фона элемента управления DataGrid. Свойства RowBackground и AlternativeRowBackground используются, чтобы задать фон цвета строк и альтернативный цвет фона строк элемента управления DataGrid.

Следующий фрагмент кода задает цвета фона, фона строк и альтернативного фона строк для элемента управления DataGrid.

Background="LightGray" RowBackground="LightYellow"

AlternatingRowBackground="LightBlue"

Новый элемент управления DataGrid выглядит, как показано на рис. 5.

Рис. 5.

Цвет и толщина границы

Свойства BorderBrush и BorderThickness используются, чтобы задать цвет и ширину границы. Следующий фрагмент кода задает для границы серый цвет и толщину 5.

BorderBrush="Gray" BorderThickness="5"

Элемент управления DataGrid с новой границей выглядит так, как показано на рис. 6.

Рис. 6.

Только чтение и замораживание

Свойство IsReadOnly используется, чтобы определить элемент управления DataGrid как элемент только для чтения. Это означает, что пользователь не сможет редактировать элемент DataGrid. В следующем фрагменте кода свойство IsReadOnly устанавливается равным true. 

IsReadOnly="True"

Свойство AreRowDetailsFrozen используется, чтобы "заморозить" область данных строк, чтобы ее нельзя было изменить. Свойство FrozenColumnCount представляет число столбцов, которые пользователь не сможет прокрутить по горизонтали. В следующих фрагментах кода значение AreRowDetailsFrozen устанавливается равным true, а значение FrozenColumnCount — равным 2.

AreRowDetailsFrozen="True"

FrozenColumnCount="2"

Элемент управления DataGrid позволяет изменить порядок столбцов с помощью перетаскивания столбцов, но эту возможность можно отключить, задавая для свойства CanUserReorderColumns значение false.  В следующем фрагменте кода свойство значения CanUserReorderColumns устанавливается равным false.

CanUserReorderColumns="False"

Элемент управления DataGrid позволяет пользователю изменять ширину столбцов. Можно зафиксировать столбцы, чтобы пользователь не мог изменить их размер, устанавливая для свойства CanUserResizeColumns значение false. В следующем фрагменте кода свойство CanUserResizeColumns устанавливается равным false. 

CanUserResizeColumns="False"

Сортировка

По умолчанию в элементе управления DataGrid включена сортировка столбцов. Пользователь может отсортировать столбец, просто щелкнув заголовок столбца.  Эту возможность можно отключить, задавая значение CanUserSortColumns равным false. В следующем фрагменте кода свойство CanUserResizeColumns устанавливается равным false.

CanUserSortColumns = "False"

Прокрутка

Свойства HorizontalScrollBarVisibility и VerticalScrollBarVisibility типа перечисления ScrollBarVisibility управляют горизонтальной и вертикальной полосами прокрутки DataGrid. Этот тип состоит из четырех значений: Auto, Disabled, Hidden и Visible. Значением по умолчанию для этих свойств является Auto, то есть, когда прокрутка необходима, соответствующие полосы появляются, в противном случае они будут скрыты.

Следующий фрагмент кода включает горизонтальную и вертикальную полосы прокрутки. 

HorizontalScrollBarVisibility="Visible"

VerticalScrollBarVisibility="Visible"

Элемент DataGrid с обеими полосами прокрутки выглядит, как показано на рис. 7.

Рис. 7.

Режим выделения

Свойство SelectionMode определяет, позволяет ли элемент DataGrid выделять только одну строку или несколько строк. Оно, соответственно, может принимать одно из двух значений: Single и Extended.  Следующий фрагмент кода устанавливает для свойства SelectionMode значение Extended.

SelectionMode="Extended"

Выводы

В этой статье было показано, как создать элемент управления DataGrid, используя XAML, и как настроить его свойства и отобразить данные, используя коллекцию объектов. Я также рассмотрел форматирование строк и столбцов DataGrid, их видимость и прокрутку. Также было показано, как задавать для строк режим "только чтение" и свойство режима выделения.

Я работаю над следующими статьями этой серии, которые будут опубликованы, как только будут написаны. Моя цель — написать законченную книгу только об элементе управления DataGrid. Если у вас есть какой-то интересный код, какие-либо советы или заметки об элементе управления DataGrid в WPF, не стесняйтесь ими поделиться.