Delen via

Overzicht van tabellen

Table is een element op blokniveau dat ondersteuning biedt voor een rasterpresentatie van Flow-documentinhoud. De flexibiliteit van dit element maakt het zeer nuttig, maar maakt het ook ingewikkelder om goed te begrijpen en te gebruiken.

Dit onderwerp bevat de volgende secties.

Basisbeginselen van tabellen

Hoe verschilt tabel dan raster?

Table en Grid deel enkele algemene functionaliteit, maar elk is het meest geschikt voor verschillende scenario's. Een Table is ontworpen voor gebruik binnen stroominhoud (zie Overzicht van Stroomdocument voor meer informatie over stroominhoud). Rasters worden het beste binnen formulieren gebruikt (in principe overal buiten stroominhoud). Binnen een FlowDocument, Table ondersteunt gedrag van stroominhoud, zoals paginering, kolomreflow en inhoudsselectie, terwijl dat Grid niet het geval is. Een Grid daarentegen wordt om vele redenen beter buiten een FlowDocument gebruikt, waaronder dat Grid elementen toevoegt op basis van een rij- en kolomindex, wat Table niet doet. Het Grid element maakt het mogelijk om onderliggende inhoud te stapelen, waardoor er meer dan één element binnen een enkele "cel" kan bestaan. Table biedt geen ondersteuning voor gelaagdheid. Subelementen van een Grid kunnen absoluut gepositioneerd worden ten opzichte van het gebied van hun "cel"-grenzen. Table biedt geen ondersteuning voor deze functie. Ten slotte heeft een Grid minder bronnen nodig dan een Table, dus overweeg een Grid te gebruiken om de prestaties te verbeteren.

Basistabelstructuur

Table biedt een rasterpresentatie die bestaat uit kolommen (vertegenwoordigd door TableColumn elementen) en rijen (vertegenwoordigd door TableRow elementen). TableColumn elementen hosten geen inhoud; ze definiëren eenvoudig kolommen en kenmerken van kolommen. TableRow elementen moeten worden gehost in een TableRowGroup element, waarmee een groepering van rijen voor de tabel wordt gedefinieerd. TableCell elementen die de werkelijke inhoud bevatten die door de tabel moet worden gepresenteerd, moeten in een TableRow element worden gehost. TableCell mag alleen elementen bevatten die zijn afgeleid van Block. Geldige onderliggende elementen voor een TableCell zijn onder andere.

Opmerking

TableCell elementen hosten mogelijk niet rechtstreeks tekstinhoud. Zie Overzicht van doorloopdocumenten voor meer informatie over de insluitingsregels voor elementen van stroominhoud, zoals TableCellFlow Document.

Opmerking

Table is vergelijkbaar met het Grid element, maar heeft meer mogelijkheden en vereist daarom meer resourceoverhead.

In het volgende voorbeeld wordt een eenvoudige tabel van 2 x 3 gedefinieerd met XAML.

<!-- 
  Table is a Block element, and as such must be hosted in a container
  for Block elements.  FlowDocument provides such a container. 
-->
<FlowDocument>
  <Table>
    <!-- 
      This table has 3 columns, each described by a TableColumn 
      element nested in a Table.Columns collection element. 
    -->
    <Table.Columns>
      <TableColumn />
      <TableColumn />
      <TableColumn />
    </Table.Columns>
    <!-- 
      This table includes a single TableRowGroup which hosts 2 rows,
      each described by a TableRow element.
    -->
    <TableRowGroup>
      <!--
        Each of the 2 TableRow elements hosts 3 cells, described by
        TableCell elements.
      -->
      <TableRow>
        <TableCell>
          <!-- 
            TableCell elements may only host elements derived from Block.
            In this example, Paragaph elements serve as the ultimate content
            containers for the cells in this table.
          -->
          <Paragraph>Cell at Row 1 Column 1</Paragraph>
        </TableCell>
        <TableCell>
          <Paragraph>Cell at Row 1 Column 2</Paragraph>
        </TableCell>
        <TableCell>
          <Paragraph>Cell at Row 1 Column 3</Paragraph>
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>
          <Paragraph>Cell at Row 2 Column 1</Paragraph>
        </TableCell>
        <TableCell>
          <Paragraph>Cell at Row 2 Column 2</Paragraph>
        </TableCell>
        <TableCell>
          <Paragraph>Cell at Row 2 Column 3</Paragraph>
        </TableCell>
      </TableRow>
    </TableRowGroup>
  </Table>
</FlowDocument>

In de volgende afbeelding ziet u hoe dit voorbeeld wordt weergegeven.

Schermopname van hoe een eenvoudige tabel wordt weergegeven.

Tabelopmaak

Table is afgeleid van het Block element en voldoet aan de algemene regels voor Block elementen op niveau. Een Table element kan worden opgenomen door een van de volgende elementen:

Rijgroepen

Het TableRowGroup element biedt een manier om willekeurige rijen binnen een tabel te groeperen. Elke rij in een tabel moet deel uitmaken van een rijgroepering. Rijen binnen een rijgroep delen vaak een gemeenschappelijke intentie en kunnen worden gestijld als een groep. Een veelgebruikt gebruik voor rijgroepen is het scheiden van rijen voor speciaal gebruik, zoals een titel, koptekst- en voettekstrijen, van de primaire inhoud in de tabel.

In het volgende voorbeeld wordt XAML gebruikt om een tabel met gestijlde kop- en voettekstrijen te definiëren.

<Table>
  <Table.Resources>
    <!-- Style for header/footer rows. -->
    <Style x:Key="headerFooterRowStyle" TargetType="{x:Type TableRowGroup}">
      <Setter Property="FontWeight" Value="DemiBold"/>
      <Setter Property="FontSize" Value="16"/>
      <Setter Property="Background" Value="LightGray"/>
    </Style>

    <!-- Style for data rows. -->
    <Style x:Key="dataRowStyle" TargetType="{x:Type TableRowGroup}">
      <Setter Property="FontSize" Value="12"/>
      <Setter Property="FontStyle" Value="Italic"/>
    </Style>
  </Table.Resources>
  
  <Table.Columns>
    <TableColumn/> <TableColumn/> <TableColumn/> <TableColumn/>
  </Table.Columns>

  <!-- This TableRowGroup hosts a header row for the table. -->
  <TableRowGroup Style="{StaticResource headerFooterRowStyle}">
    <TableRow>
      <TableCell/>
      <TableCell><Paragraph>Gizmos</Paragraph></TableCell>
      <TableCell><Paragraph>Thingamajigs</Paragraph></TableCell>
      <TableCell><Paragraph>Doohickies</Paragraph></TableCell>
    </TableRow>
  </TableRowGroup>
  
  <!-- This TableRowGroup hosts the main data rows for the table. -->
  <TableRowGroup Style="{StaticResource dataRowStyle}">
    <TableRow>
      <TableCell><Paragraph Foreground="Blue">Blue</Paragraph></TableCell>
      <TableCell><Paragraph>1</Paragraph></TableCell>
      <TableCell><Paragraph>2</Paragraph></TableCell>
      <TableCell><Paragraph>3</Paragraph> </TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Paragraph Foreground="Red">Red</Paragraph></TableCell>
      <TableCell><Paragraph>1</Paragraph></TableCell>
      <TableCell><Paragraph>2</Paragraph></TableCell>
      <TableCell><Paragraph>3</Paragraph></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Paragraph Foreground="Green">Green</Paragraph></TableCell>
      <TableCell><Paragraph>1</Paragraph></TableCell>
      <TableCell><Paragraph>2</Paragraph></TableCell>
      <TableCell><Paragraph>3</Paragraph></TableCell>
    </TableRow>
  </TableRowGroup>

  <!-- This TableRowGroup hosts a footer row for the table. -->
  <TableRowGroup Style="{StaticResource headerFooterRowStyle}">
    <TableRow>
      <TableCell><Paragraph>Totals</Paragraph></TableCell>
      <TableCell><Paragraph>3</Paragraph></TableCell>
      <TableCell><Paragraph>6</Paragraph></TableCell>
      <TableCell>
        <Table></Table>
      </TableCell>
    </TableRow>
  </TableRowGroup>
</Table>

In de volgende afbeelding ziet u hoe dit voorbeeld wordt weergegeven.

Schermopname: Tabelrijgroepen

Volgorde van achtergrondweergave

Tabelelementen worden weergegeven in de volgende volgorde (z-volgorde van laag naar hoog). Deze volgorde kan niet worden gewijzigd. Er is bijvoorbeeld geen eigenschap 'Z-order' voor deze elementen die u kunt gebruiken om deze gevestigde volgorde te overschrijven.

  1. Table

  2. TableColumn

  3. TableRowGroup

  4. TableRow

  5. TableCell

Bekijk het volgende voorbeeld, waarin achtergrondkleuren voor elk van deze elementen in een tabel worden gedefinieerd.

<Table Background="Yellow">
  <Table.Columns>
    <TableColumn/>
    <TableColumn Background="LightGreen"/>
    <TableColumn/>
  </Table.Columns>
  <TableRowGroup>
    <TableRow>
      <TableCell/><TableCell/><TableCell/>
    </TableRow>
  </TableRowGroup>
  <TableRowGroup Background="Tan">
    <TableRow>
      <TableCell/><TableCell/><TableCell/>
    </TableRow>
    <TableRow Background="LightBlue">
      <TableCell/><TableCell Background="Purple"/><TableCell/>
    </TableRow>
    <TableRow>
      <TableCell/><TableCell/><TableCell/>
    </TableRow>
  </TableRowGroup>
  <TableRowGroup>
    <TableRow>
      <TableCell/><TableCell/><TableCell/>
    </TableRow>
  </TableRowGroup>
</Table>

In de volgende afbeelding ziet u hoe dit voorbeeld wordt weergegeven (alleen achtergrondkleuren).

Schermopname: Tabel z-order

Omspannende rijen of kolommen

Tabelcellen kunnen worden geconfigureerd om meerdere rijen of kolommen te omvatten met behulp van respectievelijk de RowSpan of ColumnSpan kenmerken.

Bekijk het volgende voorbeeld, waarin een cel drie kolommen omvat.

<Table>
  <Table.Columns>
    <TableColumn/>
    <TableColumn/>
    <TableColumn/>
  </Table.Columns>

  <TableRowGroup>
    <TableRow>
      <TableCell ColumnSpan="3" Background="Cyan">
        <Paragraph>This cell spans all three columns.</Paragraph>
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell Background="LightGray"><Paragraph>Cell 1</Paragraph></TableCell>
      <TableCell Background="LightGray"><Paragraph>Cell 2</Paragraph></TableCell>
      <TableCell Background="LightGray"><Paragraph>Cell 3</Paragraph></TableCell>
    </TableRow>
  </TableRowGroup>
</Table>

In de volgende afbeelding ziet u hoe dit voorbeeld wordt weergegeven.

Schermopname: Cel met alle drie de kolommen

Een tabel bouwen met code

In de volgende voorbeelden ziet u hoe u programmatisch een Table kunt maken en deze kunt vullen met inhoud. De inhoud van de tabel wordt onderverdeeld in vijf rijen (vertegenwoordigd door TableRow objecten in een RowGroups object) en zes kolommen (vertegenwoordigd door TableColumn objecten). De rijen worden gebruikt voor verschillende presentatiedoeleinden, waaronder een titelrij die is bedoeld om de hele tabel een titel te geven, een veldnamenrij om de kolommen met gegevens in de tabel te beschrijven en een voettekstrij met samenvattingsgegevens. Houd er rekening mee dat de notie 'titel', 'koptekst' en 'voettekst'-rijen niet inherent zijn aan de tabel; dit zijn gewoon rijen met verschillende kenmerken. Tabelcellen bevatten de werkelijke inhoud, die uit tekst, afbeeldingen of vrijwel elk ander gebruikersinterfaceelement (UI) kan bestaan.

Eerst wordt er een FlowDocument gemaakt om de Tablete hosten en wordt er een nieuwe Table gemaakt en toegevoegd aan de inhoud van de FlowDocument.

// Create the parent FlowDocument...
flowDoc = new FlowDocument();

// Create the Table...
table1 = new Table();
// ...and add it to the FlowDocument Blocks collection.
flowDoc.Blocks.Add(table1);

// Set some global formatting properties for the table.
table1.CellSpacing = 10;
table1.Background = Brushes.White;

' Create the parent FlowDocument...
flowDoc = New FlowDocument()

' Create the Table...
table1 = New Table()

' ...and add it to the FlowDocument Blocks collection.
flowDoc.Blocks.Add(table1)


' Set some global formatting properties for the table.
table1.CellSpacing = 10
table1.Background = Brushes.White

Vervolgens worden er zes TableColumn objecten gemaakt en toegevoegd aan de Columns verzameling van de tabel, waarbij een aantal opmaak is toegepast.

Opmerking

Houd er rekening mee dat de Columns verzameling van de tabel gebruikmaakt van standaard indexering op basis van nul.

// Create 6 columns and add them to the table's Columns collection.
int numberOfColumns = 6;
for (int x = 0; x < numberOfColumns; x++)
{
    table1.Columns.Add(new TableColumn());

    // Set alternating background colors for the middle colums.
    if(x%2 == 0)
        table1.Columns[x].Background = Brushes.Beige;
    else
        table1.Columns[x].Background = Brushes.LightSteelBlue;
}


' Create 6 columns and add them to the table's Columns collection.
Dim numberOfColumns = 6
Dim x
For x = 0 To numberOfColumns
    table1.Columns.Add(new TableColumn())

    ' Set alternating background colors for the middle colums.
    If x Mod 2 = 0 Then
        table1.Columns(x).Background = Brushes.Beige
    Else
        table1.Columns(x).Background = Brushes.LightSteelBlue
    End If
Next x

Vervolgens wordt er een titelrij gemaakt en met enige opmaak aan de tabel toegevoegd. De titelrij bevat één cel die alle zes kolommen in de tabel omvat.

// Create and add an empty TableRowGroup to hold the table's Rows.
table1.RowGroups.Add(new TableRowGroup());

// Add the first (title) row.
table1.RowGroups[0].Rows.Add(new TableRow());

// Alias the current working row for easy reference.
TableRow currentRow = table1.RowGroups[0].Rows[0];

// Global formatting for the title row.
currentRow.Background = Brushes.Silver;
currentRow.FontSize = 40;
currentRow.FontWeight = System.Windows.FontWeights.Bold;

// Add the header row with content,
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("2004 Sales Project"))));
// and set the row to span all 6 columns.
currentRow.Cells[0].ColumnSpan = 6;

' Create and add an empty TableRowGroup to hold the table's Rows.
table1.RowGroups.Add(new TableRowGroup())

' Add the first (title) row.
table1.RowGroups(0).Rows.Add(new TableRow())

' Alias the current working row for easy reference.
Dim currentRow As New TableRow()
currentRow = table1.RowGroups(0).Rows(0)

' Global formatting for the title row.
currentRow.Background = Brushes.Silver
currentRow.FontSize = 40
currentRow.FontWeight = System.Windows.FontWeights.Bold

' Add the header row with content, 
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("2004 Sales Project"))))
' and set the row to span all 6 columns.
currentRow.Cells(0).ColumnSpan = 6

Vervolgens wordt er een koprij gemaakt en toegevoegd aan de tabel, en worden de cellen in de koprij gemaakt en gevuld met inhoud.

// Add the second (header) row.
table1.RowGroups[0].Rows.Add(new TableRow());
currentRow = table1.RowGroups[0].Rows[1];

// Global formatting for the header row.
currentRow.FontSize = 18;
currentRow.FontWeight = FontWeights.Bold;

// Add cells with content to the second row.
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Product"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Quarter 1"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Quarter 2"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Quarter 3"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Quarter 4"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("TOTAL"))));

' Add the second (header) row.
table1.RowGroups(0).Rows.Add(new TableRow())
currentRow = table1.RowGroups(0).Rows(1)

' Global formatting for the header row.
currentRow.FontSize = 18
currentRow.FontWeight = FontWeights.Bold

' Add cells with content to the second row.
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Product"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Quarter 1"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Quarter 2"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Quarter 3"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Quarter 4"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("TOTAL"))))

Vervolgens wordt er een rij voor gegevens gemaakt en toegevoegd aan de tabel en worden de cellen in deze rij gemaakt en gevuld met inhoud. Het bouwen van deze rij is vergelijkbaar met het bouwen van de koprij, waarbij iets andere opmaak is toegepast.

// Add the third row.
table1.RowGroups[0].Rows.Add(new TableRow());
currentRow = table1.RowGroups[0].Rows[2];

// Global formatting for the row.
currentRow.FontSize = 12;
currentRow.FontWeight = FontWeights.Normal;

// Add cells with content to the third row.
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Widgets"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$50,000"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$55,000"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$60,000"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$65,000"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$230,000"))));

// Bold the first cell.
currentRow.Cells[0].FontWeight = FontWeights.Bold;

' Add the third row.
table1.RowGroups(0).Rows.Add(new TableRow())
currentRow = table1.RowGroups(0).Rows(2)

' Global formatting for the row.
currentRow.FontSize = 12
currentRow.FontWeight = FontWeights.Normal

' Add cells with content to the third row.
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Widgets"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$50,000"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$55,000"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$60,000"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$65,000"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$230,000"))))

' Bold the first cell.
currentRow.Cells(0).FontWeight = FontWeights.Bold

Ten slotte wordt er een voettekstrij gemaakt, toegevoegd en opgemaakt. Net als de titelrij bevat de voettekst één cel die alle zes kolommen in de tabel omvat.

table1.RowGroups[0].Rows.Add(new TableRow());
currentRow = table1.RowGroups[0].Rows[3];

// Global formatting for the footer row.
currentRow.Background = Brushes.LightGray;
currentRow.FontSize = 18;
currentRow.FontWeight = System.Windows.FontWeights.Normal;

// Add the header row with content,
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Projected 2004 Revenue: $810,000"))));
// and set the row to span all 6 columns.
currentRow.Cells[0].ColumnSpan = 6;

table1.RowGroups(0).Rows.Add(new TableRow())
currentRow = table1.RowGroups(0).Rows(3)

' Global formatting for the footer row.
currentRow.Background = Brushes.LightGray
currentRow.FontSize = 18
currentRow.FontWeight = System.Windows.FontWeights.Normal

' Add the header row with content, 
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Projected 2004 Revenue: $810,000"))))
' and set the row to span all 6 columns.
currentRow.Cells(0).ColumnSpan = 6

Zie ook

  • Last updated on