Freigeben über

Tabellenübersicht

Table ist ein Element auf Blockebene, das die rasterbasierte Darstellung von Flussdokumentinhalten unterstützt. Die Flexibilität dieses Elements macht es sehr nützlich, macht es aber auch komplizierter, richtig zu verstehen und zu verwenden.

Dieses Thema enthält folgende Abschnitte:

Tabellengrundlagen

Wie unterscheidet sich Tabelle von Raster?

Table und Grid teilen einige gemeinsame Funktionen, aber jedes eignet sich am besten für verschiedene Szenarien. A Table ist für die Verwendung innerhalb von Flussinhalten vorgesehen (siehe Flussdokumentübersicht für weitere Informationen zu Flussinhalten). Raster werden am besten innerhalb von Formularen verwendet (im Grunde überall außerhalb des Flussinhalts). In einem FlowDocument unterstützt Table Flussinhaltsverhalten wie Paginierung, Spaltenumbruch und Inhaltsauswahl, während ein Grid dies nicht unterstützt. Eine Grid dagegen wird außerhalb einer FlowDocument aus einer Reihe von Gründen am besten verwendet, einschließlich Grid das Hinzufügen von Elementen, die auf einem Zeilen- und Spaltenindex basieren, während Table dies nicht tut. Das Grid-Element ermöglicht das Layern von untergeordneten Inhalten, sodass mehrere Elemente in einer einzigen "Zelle" vorhanden sind. Das Table-Element unterstützt die Layerung nicht. Untergeordnete Elemente eines Elements Grid können absolut relativ zum Bereich ihrer "Zellgrenzen" positioniert werden. Table unterstützt dieses Feature nicht. Schließlich erfordert eine Grid weniger Ressourcen als eine Table, daher sollten Sie die Verwendung einer Grid in Erwägung ziehen, um die Leistung zu verbessern.

Grundlegende Tabellenstruktur

Table stellt eine rasterbasierte Präsentation bereit, die aus Spalten (dargestellt durch TableColumn Elemente) und Zeilen (dargestellt durch TableRow Elemente) besteht. TableColumn Elemente hosten keine Inhalte; sie definieren einfach Spalten und Merkmale von Spalten. TableRow Elemente müssen in einem TableRowGroup Element gehostet werden, das eine Gruppierung von Zeilen für die Tabelle definiert. TableCell Elemente, die den tatsächlichen Inhalt enthalten, der von der Tabelle dargestellt werden soll, müssen in einem TableRow Element gehostet werden. TableCell darf nur Elemente enthalten, die von Block abgeleitet sind. Gültige untergeordnete Elemente für ein TableCell sind:

Hinweis

TableCell Elemente können keinen Textinhalt direkt hosten. Weitere Informationen zu den Eindämmungsregeln für Flussinhaltselemente wie TableCell, finden Sie im Flow Document Overview.

Hinweis

Table ähnelt dem Grid Element, verfügt aber über mehr Funktionen und erfordert daher einen größeren Ressourcenaufwand.

Im folgenden Beispiel wird eine einfache 2 x 3-Tabelle mit XAML definiert.

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

Die folgende Abbildung zeigt, wie dieses Beispiel gerendert wird.

Screenshot, der zeigt, wie eine einfache Tabelle gerendert wird.

Tabellenkapselung

Table wird vom Block Element abgeleitet und entspricht den allgemeinen Regeln für Block Ebenenelemente. Ein Table Element kann in einem der folgenden Elemente enthalten sein:

Zeilengruppierungen

Das TableRowGroup Element bietet eine Möglichkeit, Zeilen in einer Tabelle beliebig zu gruppieren. Jede Zeile in einer Tabelle muss zu einer Zeilengruppierung gehören. Zeilen innerhalb einer Zeilengruppe teilen häufig eine gemeinsame Absicht und können als Gruppe formatiert werden. Eine häufige Verwendung für Zeilengruppierungen ist das Trennen von speziellen Zeilen wie Titel, Kopf- und Fußzeilenzeilen vom primären Inhalt, der in der Tabelle enthalten ist.

Im folgenden Beispiel wird XAML verwendet, um eine Tabelle mit formatierten Kopf- und Fußzeilen zu definieren.

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

Die folgende Abbildung zeigt, wie dieses Beispiel gerendert wird.

Screenshot: Tabellenzeilengruppen

Reihenfolge des Hintergrundrenderings

Tabellenelemente werden in der folgenden Reihenfolge gerendert (z-Ordnung vom niedrigsten zum höchsten Wert). Diese Reihenfolge kann nicht geändert werden. Beispielsweise gibt es keine "Z-order"-Eigenschaft für diese Elemente, die Sie verwenden können, um diese festgelegte Reihenfolge außer Kraft zu setzen.

  1. Table

  2. TableColumn

  3. TableRowGroup

  4. TableRow

  5. TableCell

Betrachten Sie das folgende Beispiel, das Hintergrundfarben für jedes dieser Elemente in einer Tabelle definiert.

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

Die folgende Abbildung zeigt, wie dieses Beispiel gerendert wird (nur Hintergrundfarben).

Screenshot: Tabelle Z-Reihenfolge

Überspannen von Zeilen oder Spalten

Tabellenzellen können so konfiguriert werden, dass sie sich mithilfe der Attribute RowSpan bzw. ColumnSpan über mehrere Zeilen oder Spalten erstrecken.

Betrachten Sie das folgende Beispiel, in dem eine Zelle drei Spalten umfasst.

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

Die folgende Abbildung zeigt, wie dieses Beispiel gerendert wird.

Screenshot: Zelle mit allen drei Spalten

Erstellen einer Tabelle mit Code

In den folgenden Beispielen wird gezeigt, wie man ein Table programmgesteuert erstellt und mit Inhalten füllt. Der Inhalt der Tabelle wird in fünf Zeilen (dargestellt durch TableRow Objekte in einem RowGroups Objekt) und sechs Spalten (dargestellt durch TableColumn Objekte) angeordnet. Die Zeilen werden für unterschiedliche Präsentationszwecke verwendet, einschließlich einer Titelzeile, die zum Titel der gesamten Tabelle bestimmt ist, eine Kopfzeile zur Beschreibung der Datenspalten in der Tabelle und eine Fußzeile mit Zusammenfassungsinformationen. Beachten Sie, dass der Begriff der Zeilen "title", "header" und "footer" der Tabelle nicht inhärent ist; Dies sind einfach Zeilen mit unterschiedlichen Merkmalen. Tabellenzellen enthalten den tatsächlichen Inhalt, der aus Text, Bildern oder fast jedem anderen Ui-Element besteht.

Zuerst wird eine FlowDocument erstellt, um das Table zu hosten, und ein neues Table wird erstellt und dem Inhalt des FlowDocument hinzugefügt.

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

Als Nächstes werden sechs TableColumn Objekte erstellt und der Auflistung der Tabelle Columns hinzugefügt, wobei einige Formatierungen angewendet wurden.

Hinweis

Beachten Sie, dass die Auflistung der Tabelle Columns eine standardmäßige Indexierung ab null verwendet.

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

Als Nächstes wird eine Titelzeile erstellt und der Tabelle mit einigen Formatierungen hinzugefügt. Die Titelzeile enthält eine einzelne Zelle, die sich über alle sechs Spalten in der Tabelle erstreckt.

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

Als Nächstes wird eine Kopfzeile erstellt und der Tabelle hinzugefügt, und die Zellen in der Kopfzeile werden erstellt und mit Inhalt aufgefüllt.

// 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"))))

Als Nächstes wird eine Zeile für Daten erstellt und der Tabelle hinzugefügt, und die Zellen in dieser Zeile werden erstellt und mit Inhalt aufgefüllt. Das Erstellen dieser Zeile ähnelt dem Erstellen der Kopfzeile, wobei eine geringfügig andere Formatierung angewendet wird.

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

Schließlich wird eine Fußzeile erstellt, hinzugefügt und formatiert. Wie die Titelzeile enthält die Fußzeile eine einzelne Zelle, die alle sechs Spalten in der Tabelle umfasst.

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

Siehe auch