Dela via

Översikt över GridView

GridView visningsläget är ett av vylägena för en ListView kontroll. Med GridView klassen och dess stödklasser kan du och dina användare visa objektsamlingar i en tabell som vanligtvis använder knappar som interaktiva kolumnrubriker. Det här avsnittet introducerar klassen GridView och beskriver övergripande hur den används.

Vad är en GridView-vy?

Visningsläget GridView visar en lista över dataobjekt genom att binda datafält till kolumner och genom att visa en kolumnrubrik för att identifiera fältet. GridView Standardformatet implementerar knappar som kolumnrubriker. Genom att använda knappar för kolumnrubriker kan du implementera viktiga funktioner för användarinteraktion. Användarna kan till exempel klicka på kolumnrubriken för att sortera GridView data enligt innehållet i en specifik kolumn.

Anmärkning

De knappkontroller som GridView används för kolumnrubriker härleds från ButtonBase.

Följande bild visar en GridView vy över ListView innehåll.

Skärmbild som visar en ListView med GridView-utdata som visar filinformation.

GridView kolumner representeras av GridViewColumn objekt som automatiskt kan storleksanpassas till innehållet. Du kan även uttryckligen ställa in en GridViewColumn till en viss bredd. Du kan ändra storlek på kolumner genom att dra handtag mellan kolumnrubriker. Du kan också dynamiskt lägga till, ta bort, ersätta och ordna om kolumner eftersom den här funktionen är inbyggd i GridView. Det går dock GridView inte att uppdatera de data som visas direkt.

I följande exempel visas hur du definierar en GridView som visar medarbetardata. I det här exemplet ListView definierar EmployeeInfoDataSource som ItemsSource. Egenskapsdefinitionerna för DisplayMemberBinding binder GridViewColumn innehåll till EmployeeInfoDataSource datakategorier.


<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>

Layout och formatmall för GridView

Kolumncellerna och kolumnrubriken i en GridViewColumn har samma bredd. Som standard storleksanpassar varje kolumn sin bredd så att den passar innehållet. Du kan också ange en kolumn till en fast bredd.

Relaterat datainnehåll visas i vågräta rader. I föregående bild visas till exempel varje medarbetares efternamn, förnamn och ID-nummer som en uppsättning eftersom de visas i en vågrät rad.

Definiera och formatera kolumner i en GridView

När du definierar det datafält som ska visas i en GridViewColumn, använd egenskaperna DisplayMemberBinding, CellTemplate eller CellTemplateSelector. Egenskapen DisplayMemberBinding har företräde framför någon av mallegenskaperna.

Om du vill ange justering av innehåll i en kolumn i en GridView, definierar du en CellTemplate. Använd inte HorizontalContentAlignment och VerticalContentAlignment-egenskaperna för ListView-innehåll som visas med hjälp av en GridView.

Om du vill ange mall- och formategenskaper för kolumnrubriker använder du klasserna GridView, GridViewColumnoch GridViewColumnHeader . Mer information finns i Översikt över kolumnrubrikformat och mallar i GridView.

Lägga till visuella element i en GridView

Om du vill lägga till visuella element, till exempel CheckBox och Button kontroller, i ett GridView visningsläge använder du mallar eller formatmallar.

Om du uttryckligen definierar ett visuellt element som ett dataobjekt kan det bara visas en gång i en GridView. Den här begränsningen finns eftersom ett element bara kan ha en överordnad och därför bara kan visas en gång i det visuella trädet.

Stilisera rader i en GridView

Använd klasserna GridViewRowPresenter och GridViewHeaderRowPresenter för att formatera och visa raderna i en GridView. Ett exempel på hur du formaterar rader i visningsläge GridView finns i Formatera en rad i en ListView som implementerar en GridView.

Justeringsproblem när du använder ItemContainerStyle

Om du vill förhindra justeringsproblem mellan kolumnrubriker och celler ska du inte ange en egenskap eller ange en mall som påverkar bredden på ett objekt i en ItemContainerStyle. Ange till exempel inte egenskapen Margin eller ange en ControlTemplate som lägger till en CheckBox i en ItemContainerStyle som har definierats för en ListView kontroll. Ange i stället de egenskaper och mallar som påverkar kolumnbredden direkt på klasser som definierar ett GridView visningsläge.

Om du till exempel vill lägga till en CheckBox i raderna i GridView visningsläge lägger du till en CheckBox i DataTemplate, och sedan anger du egenskapen CellTemplate till den DataTemplate.

Användarinteraktioner med en GridView

När du använder en GridView i ditt program kan användarna interagera med och ändra formateringen för GridView. Användare kan till exempel ändra ordning på kolumner, ändra storlek på en kolumn, välja objekt i en tabell och bläddra igenom innehåll. Du kan också definiera en händelsehanterare som svarar när en användare klickar på kolumnrubrikknappen. Händelsehanteraren kan utföra åtgärder som att sortera data som visas i enligt innehållet i GridView en kolumn.

I följande lista beskrivs mer detaljerat funktionerna för att använda GridView för användarinteraktion:

  • Ändra ordning på kolumner med hjälp av dra och släpp-metoden.

    Användare kan ändra ordning på kolumner i en GridView genom att trycka på den vänstra musknappen medan den är över en kolumnrubrik och sedan dra kolumnen till en ny position. Medan användaren drar kolumnrubriken visas en flytande version av rubriken samt en helsvart linje som visar var kolumnen ska infogas.

    Om du vill ändra standardformatet för den flytande versionen av en rubrik anger du en ControlTemplate för en GridViewColumnHeader typ som utlöses när Role egenskapen är inställd på Floating. Mer information finns i Skapa en stil för en kolumnrubrik i Drag GridView.

  • Ändra storlek på en kolumn till dess innehåll.

    Användare kan dubbelklicka på griparen till höger om en kolumnrubrik för att ändra storlek på en kolumn så att den passar dess innehåll.

    Anmärkning

    Du kan ange egenskapen Width till Double.NaN för att ge samma effekt.

  • Välj radobjekt.

    Användare kan välja ett eller flera objekt i en GridView.

    Om du vill ändra Style på ett markerat objekt, se Använda utlösare för att formatera markerade objekt i en ListView.

  • Rulla om du vill visa innehåll som inte visas från början på skärmen.

    Om storleken på GridView är inte tillräckligt stor för att visa alla objekt kan användarna rulla vågrätt eller lodrätt med hjälp av rullningslister som tillhandahålls av en ScrollViewer kontroll. A ScrollBar är dolt om allt innehåll är synligt i en specifik riktning. Kolumnrubriker rullar inte med en lodrät rullningslist, utan rullar vågrätt.

  • Interagera med kolumner genom att klicka på kolumnrubrikknapparna.

    När användarna klickar på en kolumnrubrikknapp kan de sortera data som visas i kolumnen om du har angett en sorteringsalgoritm.

    Du kan hantera Click händelsen för kolumnrubrikknappar för att tillhandahålla funktioner som en sorteringsalgoritm. Om du vill hantera Click händelsen för en kolumnrubrik anger du en händelsehanterare på GridViewColumnHeader. Om du vill ange en händelsehanterare som hanterar Click händelsen för alla kolumnrubriker anger du hanteraren för ListView kontrollen.

Hämta andra anpassade vyer

Klassen GridView , som härleds från den ViewBase abstrakta klassen, är bara ett av de möjliga vylägena ListView för klassen. Du kan skapa andra anpassade vyer för ListView genom att härleda från ViewBase klassen. Ett exempel på ett anpassat visningsläge finns i Skapa ett anpassat visningsläge för en ListView.

Stödklasser för GridView

Följande klasser stöder visningsläget GridView .

Formatmallar och stilar

Du kan anpassa utseendet GridView på kolumnrubriker genom att ändra deras format och mallar. I det här avsnittet beskrivs prioritetsordningen för egenskaper som du använder för att anpassa en kolumnrubrik i GridView visningsläget för en ListView kontroll. Mer information finns i Vad är formatmallar och mallar? och Hur skapar du en mall för en kontroll.

Anpassa en kolumnrubrik i en GridView

De egenskaper som definierar innehållet, layouten och formatet för en kolumnrubrik i en GridView finns i många relaterade klasser. Vissa av dessa egenskaper har funktioner som är liknande eller samma.

Raderna i följande tabell visar grupper med egenskaper som utför samma funktion. Du kan använda de här egenskaperna för att anpassa kolumnrubrikerna i en GridView. Prioritetsordningen för relaterade egenskaper är från höger till vänster där egenskapen i kolumnen längst till höger har högst prioritet. Om en ContentTemplate till exempel har angetts för GridViewColumnHeader objektet och HeaderTemplateSelector har angetts för den associerade GridViewColumn, har den ContentTemplate företräde. I det här scenariot HeaderTemplateSelector har ingen effekt.

Relaterade egenskaper för kolumnrubriker i en GridView

GridView GridViewColumn GridViewColumnHeader
Egenskaper för kontextmeny ColumnHeaderContextMenu Ej tillämpligt ContextMenu
Tooltip

Egenskaper		 ColumnHeaderToolTip Ej tillämpligt ToolTip
Rubrikmall

Egenskaper		 ColumnHeaderTemplate 1/

ColumnHeaderTemplateSelector		 HeaderTemplate 1/

HeaderTemplateSelector		 ContentTemplate 1/

ContentTemplateSelector
Formategenskaper ColumnHeaderContainerStyle HeaderContainerStyle Style

1För Egenskaper för rubrikmall har mallegenskapen företräde om du anger egenskaper för både mall och mallväljare. Om du till exempel anger både ContentTemplate egenskaperna och ContentTemplateSelector har egenskapen ContentTemplate företräde.

Se även

  • Last updated on