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

Обзор GridView

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

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

В режиме 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 отображает данные из объекта ItemsSource:

снимок экрана, на котором показан ListView с представлением данных в формате GridView.

Макет и стиль 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 режим представления.

См. также