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


Обзор GridView

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

Что такое GridView View?

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

Замечание

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

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

Снимок экрана: listView с выходными данными в GridView, отображающими сведения о файле.

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

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


<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

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

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

Определение и стилизация столбцов в GridView

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

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

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

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

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

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

Стилизация строк в GridView

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

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

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

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

Взаимодействие пользователей с 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 управления.

Получение других пользовательских представлений

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

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

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

Стили и шаблоны

Вы можете настроить внешний GridView вид заголовков столбцов, изменив их стили и шаблоны. В этом разделе описывается порядок приоритета свойств, используемых для настройки заголовка столбца в GridView режиме ListView представления элемента управления. Дополнительные сведения см. в статье "Что такое стили и шаблоны?", а также как создать шаблон для элемента управления.

Настройка заголовка столбца в GridView

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

Строки в следующей таблице отображают группы свойств, выполняющих ту же функцию. Эти свойства можно использовать для настройки заголовков столбцов в объекте GridView. Порядок приоритета связанных свойств находится справа налево, где свойство в самом правом столбце имеет наивысший приоритет. Например, если ContentTemplate задан в GridViewColumnHeader объекте, а HeaderTemplateSelector задан в связанном GridViewColumn объекте, то ContentTemplate имеет приоритет. В этом сценарии HeaderTemplateSelector не действует.

Связанные свойства заголовков столбцов в GridView

GridView GridViewColumn GridViewColumnHeader
Свойства контекстного меню ColumnHeaderContextMenu Неприменимо ContextMenu
Подсказка

Свойства
ColumnHeaderToolTip Неприменимо ToolTip
Шаблон заголовка

Свойства
ColumnHeaderTemplate 1/

ColumnHeaderTemplateSelector
HeaderTemplate 1/

HeaderTemplateSelector
ContentTemplate 1/

ContentTemplateSelector
Свойства стиля ColumnHeaderContainerStyle HeaderContainerStyle Style

1Если задать свойства шаблона заголовка и селектора шаблонов, то свойство шаблона имеет приоритет. Например, если задать как ContentTemplate свойства, так и ContentTemplateSelector свойства, ContentTemplate свойство имеет приоритет.

См. также