GridView — Przegląd
GridView tryb widoku jest jednym z trybów wyświetlania dla kontrolki ListView . Klasa GridView i jej klasy pomocnicze umożliwiają użytkownikom wyświetlanie kolekcji elementów w tabeli, która zwykle używa przycisków jako nagłówków kolumn interakcyjnych. W tym temacie przedstawiono klasę GridView i przedstawiono jej użycie.
Co to jest widok GridView?
W GridView trybie widoku jest wyświetlana lista elementów danych przez powiązanie pól danych z kolumnami i wyświetlenie nagłówka kolumny w celu zidentyfikowania pola. Styl domyślny GridView implementuje przyciski jako nagłówki kolumn. Za pomocą przycisków nagłówków kolumn można zaimplementować ważne możliwości interakcji użytkownika; na przykład użytkownicy mogą kliknąć nagłówek kolumny, aby sortować GridView dane zgodnie z zawartością określonej kolumny.
Uwaga
Kontrolki przycisku, które GridView są używane dla nagłówków kolumn, pochodzą z ButtonBaseelementu .
Na poniższej GridView ilustracji przedstawiono widok ListView zawartości.
GridView kolumny są reprezentowane przez GridViewColumn obiekty, które mogą automatycznie rozmiarować zawartość. Opcjonalnie można jawnie ustawić GridViewColumn wartość na określoną szerokość. Możesz zmienić rozmiar kolumn, przeciągając uchwyt między nagłówkami kolumn. Możesz również dynamicznie dodawać, usuwać, zastępować i zmieniać kolejność kolumn, ponieważ ta funkcja jest wbudowana w GridViewelement . GridView Nie można jednak bezpośrednio zaktualizować wyświetlanych danych.
W poniższym przykładzie pokazano, jak zdefiniować GridView dane pracownika. W tym przykładzie ListView definiuje wartość EmployeeInfoDataSource jako ItemsSource. Definicje właściwości powiązanej DisplayMemberBindingGridViewColumn zawartości z EmployeeInfoDataSource kategoriami danych.
<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>
Poniższa ilustracja przedstawia tabelę utworzoną w poprzednim przykładzie. Kontrolka GridView wyświetla dane z obiektu ItemsSource:
Układ i styl elementu GridView
Komórki kolumny i nagłówek kolumny GridViewColumn mają taką samą szerokość. Domyślnie każda kolumna rozmiaruje jego szerokość, aby dopasować jej zawartość. Opcjonalnie można ustawić kolumnę na stałą szerokość.
Powiązana zawartość danych jest wyświetlana w poziomych wierszach. Na przykład na poprzedniej ilustracji każde nazwisko pracownika, imię i numer identyfikacyjny są wyświetlane jako zestaw, ponieważ są one wyświetlane w wierszu poziomym.
Definiowanie i stylizowanie kolumn w elemecie GridView
Podczas definiowania pola danych do wyświetlenia w obiekcie GridViewColumnużyj DisplayMemberBindingwłaściwości , CellTemplatelub CellTemplateSelector . Właściwość DisplayMemberBinding ma pierwszeństwo przed jedną z właściwości szablonu.
Aby określić wyrównanie zawartości w kolumnie elementu GridView, zdefiniuj element CellTemplate. Nie używaj HorizontalContentAlignment właściwości i VerticalContentAlignment dla ListView zawartości wyświetlanej przy użyciu elementu GridView.
Aby określić właściwości szablonu i stylu nagłówków kolumn, użyj GridViewklas , GridViewColumni GridViewColumnHeader . Aby uzyskać więcej informacji, zobacz GridView Column Header Styles and Templates Overview (Style i szablony nagłówków kolumn GridView — omówienie).
Dodawanie elementów wizualnych do kontrolki GridView
Aby dodać elementy wizualne, takie jak CheckBox i Button kontrolki, do trybu wyświetlania GridView , użyj szablonów lub stylów.
Jeśli jawnie zdefiniujesz element wizualizacji jako element danych, może pojawić się tylko jeden raz w elemencie GridView. To ograniczenie istnieje, ponieważ element może mieć tylko jeden element nadrzędny i dlatego może pojawić się tylko jeden raz w drzewie wizualizacji.
Stylizowanie wierszy w siatceView
GridViewRowPresenter Użyj klas iGridViewHeaderRowPresenter, aby sformatować i wyświetlić wiersze klasy GridView. Aby zapoznać się z przykładem stylu wierszy w trybie widoku, zobacz Style a Row in a ListView That Implements a GridView (Styl wiersza w widoku ListView, który implementuje element GridView).GridView
Problemy z wyrównaniem podczas korzystania z elementuContainerStyle
Aby zapobiec problemom z wyrównaniem między nagłówkami kolumn i komórkami, nie ustawiaj właściwości ani nie określaj szablonu, który ma wpływ na szerokość elementu w elemencie ItemContainerStyle. Na przykład nie należy ustawiać Margin właściwości ani określać ControlTemplate elementu, który dodaje CheckBox element do ItemContainerStyle kontrolki zdefiniowanej w kontrolce ListView . Zamiast tego określ właściwości i szablony, które mają wpływ na szerokość kolumny bezpośrednio w klasach definiujących GridView tryb widoku.
Aby na przykład dodać element CheckBox do wierszy w GridView trybie widoku, dodaj CheckBox element do DataTemplateelementu , a następnie ustaw CellTemplate właściwość na wartość DataTemplate.
Interakcje użytkownika z kontrolką GridView
Gdy używasz elementu GridView w aplikacji, użytkownicy mogą wchodzić w interakcje i modyfikować formatowanie elementu GridView. Na przykład użytkownicy mogą zmieniać kolejność kolumn, zmieniać rozmiar kolumny, wybierać elementy w tabeli i przewijać zawartość. Można również zdefiniować procedurę obsługi zdarzeń, która odpowiada, gdy użytkownik kliknie przycisk nagłówka kolumny. Program obsługi zdarzeń może wykonywać operacje, takie jak sortowanie danych wyświetlanych w GridView zależności od zawartości kolumny.
Na poniższej liście omówiono bardziej szczegółowo możliwości korzystania z GridView interakcji użytkownika:
Zmień kolejność kolumn przy użyciu metody drag-and-drop.
Użytkownicy mogą zmienić kolejność kolumn w elemecie, GridView naciskając lewy przycisk myszy, gdy znajduje się on nad nagłówkiem kolumny, a następnie przeciągając ją do nowej pozycji. Podczas gdy użytkownik przeciąga nagłówek kolumny, wyświetlana jest zmienna wersja nagłówka, a także solidna czarna linia, która pokazuje, gdzie wstawić kolumnę.
Jeśli chcesz zmodyfikować domyślny styl dla zmiennej wersji nagłówka, określ ControlTemplateGridViewColumnHeader typ wyzwalany, gdy Role właściwość ma wartość Floating. Aby uzyskać więcej informacji, zobacz Tworzenie stylu dla przeciąganego nagłówka kolumny GridView.
Zmień rozmiar kolumny na jej zawartość.
Użytkownicy mogą dwukrotnie kliknąć uchwyt po prawej stronie nagłówka kolumny, aby zmienić rozmiar kolumny, aby dopasować jej zawartość.
Uwaga
Właściwość można ustawić Width tak, aby
Double.NaNwygenerowała ten sam efekt.Wybierz elementy wierszy.
Użytkownicy mogą wybrać co najmniej jeden element w elemecie GridView.
Jeśli chcesz zmienić Style wybrany element, zobacz Używanie wyzwalaczy do stylu wybranych elementów w widoku ListView.
Przewiń, aby wyświetlić zawartość, która nie jest początkowo widoczna na ekranie.
Jeśli rozmiar elementu GridView nie jest wystarczająco duży, aby wyświetlić wszystkie elementy, użytkownicy mogą przewijać w poziomie lub w pionie za pomocą pasków przewijania, które są dostarczane przez kontrolkę ScrollViewer . Element jest ScrollBar ukryty, jeśli cała zawartość jest widoczna w określonym kierunku. Nagłówki kolumn nie przewijają się z pionowym paskiem przewijania, ale przewijają się w poziomie.
Interakcja z kolumnami przez kliknięcie przycisków nagłówka kolumny.
Gdy użytkownicy klikną przycisk nagłówka kolumny, będą mogli sortować dane wyświetlane w kolumnie, jeśli podano algorytm sortowania.
Możesz obsłużyć Click zdarzenie dla przycisków nagłówka kolumny w celu zapewnienia funkcjonalności, takiej jak algorytm sortowania. Aby obsłużyć Click zdarzenie dla nagłówka pojedynczej kolumny, ustaw procedurę obsługi zdarzeń w obiekcie GridViewColumnHeader. Aby ustawić procedurę obsługi zdarzeń, która obsługuje Click zdarzenie dla wszystkich nagłówków kolumn, ustaw procedurę obsługi w kontrolce ListView .
Uzyskiwanie innych widoków niestandardowych
Klasa GridView , która pochodzi z ViewBase klasy abstrakcyjnej, jest tylko jednym z możliwych trybów wyświetlania ListView dla klasy. Możesz utworzyć inne widoki niestandardowe, ListView wyprowadzając je z ViewBase klasy. Przykład trybu widoku niestandardowego można znaleźć w temacie Create a Custom View Mode for a ListView (Tworzenie trybu widoku niestandardowego dla elementu ListView).
Klasy pomocnicze GridView
Poniższe klasy obsługują tryb wyświetlania GridView .