Общие сведения о GridView

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

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

В этом разделе содержатся следующие подразделы.

• Что такое представление GridView?
• Макет и стиль GridView
• Взаимодействие с пользователем с помощью GridView
• Получение других настраиваемых представлений
• Вспомогательные классы GridView
• Связанные разделы

Что такое представление GridView?

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

Примечание.
Элементы управления «кнопка», которые используются в качестве заголовков столбцов GridView, являются производными от ButtonBase.

На следующем рисунке показано представление GridView содержимого ListView.

Представление GridView содержимого ListView

Столбцы GridView представлены объектами GridViewColumn, размер которых может автоматически изменяться в соответствии с их содержимым. При необходимости можно явно задать ширину объекта GridViewColumn. Можно изменить размеры столбцов, перетащив границу между заголовками столбцов. Можно также динамически добавить, удалить, заменить и изменить порядок столбцов, так как эта функция встроена в класс GridView. Однако в классе GridView не поддерживается непосредственное обновление отображаемых данных.

В следующем примере показано, как определить объект GridView, в котором отображаются данные о сотрудниках. В этом примере в объекте ListView определяется EmployeeInfoDataSource как свойство ItemsSource. Определения свойств для DisplayMemberBinding привязывают содержимое объектов GridViewColumn к категориям данных EmployeeInfoDataSource. Полный пример содержится в разделе Пример с объектом ListView, использующим объект GridView.

<ListView ItemsSource="{Binding Source=
                       {StaticResource EmployeeInfoDataSource}}">

  <ListView.View>

    <GridView AllowsColumnReorder="true"
              ColumnHeaderToolTip="Employee Information">

      <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=FirstName}" 
                      Header="First Name" Width="100"/>

                  <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=LastName}" 
                      Width="100">
                      <GridViewColumnHeader>Last Name
                          <GridViewColumnHeader.ContextMenu>
                          <ContextMenu  MenuItem.Click="LastNameCM_Click"  
                                        Name="LastNameCM">
                              <MenuItem Header="Ascending" />
                              <MenuItem Header="Descending" />
                          </ContextMenu>
                          </GridViewColumnHeader.ContextMenu>
                      </GridViewColumnHeader>
                  </GridViewColumn>

                  <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=EmployeeNumber}" 
                      Header="Employee No." Width="100"/>
    </GridView>

  </ListView.View>
</ListView>

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

Объект GridView, в котором отображаются данные из ItemsSource

Макет и стиль GridView

Ячейки и заголовок столбца GridViewColumn имеют одинаковую ширину. По умолчанию ширина каждого столбца изменяется в соответствии с шириной содержимого. При необходимости можно установить фиксированную ширину столбца.

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

Определение и применение стилей к столбцам в GridView

При определении поля данных, отображаемого в GridViewColumn, используйте свойства DisplayMemberBinding, CellTemplate или CellTemplateSelector. Свойство DisplayMemberBinding имеет приоритет над любым из свойств шаблона.

Чтобы задать выравнивание содержимого в столбце GridView, определите свойство CellTemplate. Не используйте свойства HorizontalContentAlignment и VerticalContentAlignment для содержимого ListView, которое отображается с помощью GridView.

Чтобы указать свойства шаблонов и стилей для заголовков столбцов, используйте классы GridView, GridViewColumn и GridViewColumnHeader. Дополнительные сведения см. в разделе Общие сведения о стилях заголовков столбцов GridView и шаблонах.

Добавление визуальных элементов в GridView

Чтобы добавить визуальные элементы, такие как элементы управления CheckBox и Button, в режиме представления GridView, используйте шаблоны или стили.

Если явно определить визуальный элемент в качестве элемента данных, он может появляться в GridView только один раз. Это ограничение существует, так как элемент может иметь только один родительский элемент и, таким образом, может появляться только один раз в визуальном дереве. Пример добавления объекта CheckBox в столбец в режиме представления GridView см. в разделе Пример использования элемента управления ListView с элементами управления GridView и CheckBox.

Применение стилей к строкам в GridView

Используйте классы GridViewRowPresenter и GridViewHeaderRowPresenter для форматирования и отображения строк GridView. Пример применения стилей к строкам в режиме представления GridView см. в разделе Инструкция по Изменению стиля строки в ListView, который реализует GridView.

Проблемы выравнивания при использовании ItemContainerStyle

Чтобы предотвратить проблемы выравнивания между заголовками столбцов и ячейками, не устанавливайте в свойстве ItemContainerStyle свойство или шаблон, влияющие на ширину элемента. Например, не устанавливайте свойство Margin и не указывайте объект ControlTemplate, который добавляет объект CheckBox к свойству ItemContainerStyle, которое определено в элементе управления ListView. Вместо этого укажите свойства и шаблоны, которые влияют на ширину столбца, непосредственно в классах, определяющих режим представления GridView.

Например, чтобы добавить объекты CheckBox в строки в режиме представления GridView, добавьте объект CheckBox к объекту DataTemplate, а затем задайте свойству CellTemplate значение этого объекта DataTemplate. Пример добавления объекта CheckBox в столбец в режиме представления GridView см. в разделе Пример использования элемента управления ListView с элементами управления GridView и CheckBox.

Взаимодействие с пользователем с помощью GridView

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

В следующем списке более подробно рассматриваются возможности использования GridView для взаимодействия с пользователем:

• Изменение порядка столбцов с помощью перетаскивания.

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

  Если требуется изменить стиль по умолчанию для плавающей версии заголовка, укажите объект ControlTemplate для типа GridViewColumnHeader, который инициируется при установке для свойства Role значения Floating. Дополнительные сведения см. в разделе Как создать стиль для перетаскиваемого заголовка столбца GridView.

• Изменение размера столбца по его содержимому.

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

  Примечание.
  Чтобы реализовать этот эффект, установите для свойства Width значение Double.NaN.

• Выбор элементов строки.

  Пользователи могут выбрать один или несколько элементов в GridView.

  Сведения об изменении стиля Style для выбранного элемента см. в разделе Практическое руководство. Применение триггеров для определения стиля выбранных элементов в ListView.

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

  Если размер объекта GridView недостаточен для отображения всех элементов, пользователь может использовать вертикальную и горизонтальную полосы прокрутки, которые предоставляются элементом управления ScrollViewer. Объект ScrollBar скрывается, если отображается все содержимое в соответствующем направлении. При использовании полос прокрутки заголовки столбцов не прокручиваются по вертикали, но могут прокручиваться по горизонтали.

• Взаимодействие со столбцами путем нажатия на кнопки заголовков столбцов.

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

  Можно обработать событие Click для кнопок заголовков столбцов, чтобы обеспечить функциональные возможности алгоритма сортировки. Чтобы обрабатывать событие Click для одного заголовка столбца, задайте обработчик событий для GridViewColumnHeader. Чтобы задать обработчик событий Click для всех заголовков столбцов задайте обработчик для элемента управления ListView. Дополнительные сведения и примеры см. в разделе Пример ListView с сортировкой данных.

Получение других настраиваемых представлений

Класс GridView, производный от абстрактного класса ViewBase, является только одним из возможных режимов представления класса ListView. Можно создать другие настраиваемые представления для ListView посредством создания классов, производных от класса ViewBase. Пример настраиваемого режима представления см. в разделе Практическое руководство. Создание пользовательского режима представления для ListView.

Вспомогательные классы GridView

Следующие классы поддерживают режим представления GridView.

• GridViewColumn

• GridViewColumnHeader

• GridViewRowPresenter

• GridViewHeaderRowPresenter

• GridViewColumnCollection

• GridViewColumnHeaderRole

См. также

Задачи

Практическое руководство. Сортировка столбцов GridView при нажатии на заголовок

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

Общие сведения об элементе управления ListView

Ссылки

ListView

ListViewItem

GridViewColumn

GridViewColumnHeader

GridViewRowPresenter

GridViewHeaderRowPresenter

ViewBase

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

Примеры использования ListView

Практические руководства, посвященные ListView