Omówienie tabel

Table jest elementem poziomu bloku, który obsługuje prezentację dokumentu usługi Flow na podstawie siatki. Elastyczność tego elementu sprawia, że jest bardzo przydatna, ale także sprawia, że bardziej skomplikowane jest zrozumienie i prawidłowe użycie.

Ten temat zawiera poniższe sekcje.

Podstawy tabeli

W jaki sposób tabela różni się od siatki?

Table i Grid udostępniają niektóre typowe funkcje, ale każdy z nich najlepiej nadaje się do różnych scenariuszy. Element jest Table przeznaczony do użytku w ramach zawartości przepływu (zobacz Omówienie dokumentu przepływu, aby uzyskać więcej informacji na temat zawartości przepływu). Siatki są najlepiej używane wewnątrz formularzy (w zasadzie w dowolnym miejscu poza zawartością przepływu). W programie FlowDocumentTable obsługiwane są zachowania zawartości przepływu, takie jak stronicowanie, ponowne przepływy kolumn i wybór zawartości, ale Grid nie. Z Grid drugiej strony najlepiej używać poza elementem z FlowDocument wielu powodów, w tym Grid dodawania elementów opartych na indeksie wierszy i kolumn, Table nie. Element Grid umożliwia warstwowanie zawartości podrzędnej, co pozwala na istnienie więcej niż jednego elementu w jednej komórce. Table Nie obsługuje warstw. Elementy podrzędne obiektu Grid mogą być absolutnie ustawione względem obszaru ich granic "komórki". Table nie obsługuje tej funkcji. Na koniec wartość wymaga mniejszej Grid ilości zasobów, dlatego Table rozważ użycie elementu Grid w celu zwiększenia wydajności.

Podstawowa struktura tabeli

Table Zawiera prezentację opartą na siatce składającą się z kolumn (reprezentowanych przez elementy) i wierszy (reprezentowanych przez TableColumnTableRow elementy). TableColumn elementy nie hostują zawartości; po prostu definiują kolumny i cechy kolumn. TableRow elementy muszą być hostowane w elemecie TableRowGroup , który definiuje grupowanie wierszy dla tabeli. TableCell elementy, które zawierają rzeczywistą zawartość, która ma być prezentowana przez tabelę, muszą być hostowane w elemecie TableRow . TableCell może zawierać tylko elementy pochodzące z Blockelementu . Prawidłowe elementy podrzędne dla dołączania TableCell .

Uwaga

TableCell elementy mogą nie hostować bezpośrednio zawartości tekstowej. Aby uzyskać więcej informacji na temat reguł zawierania elementów zawartości przepływu, takich jak TableCell, zobacz Flow Document Overview (Omówienie dokumentu przepływu).

Uwaga

Table element jest podobny do Grid elementu, ale ma więcej możliwości, dlatego wymaga większego obciążenia związanego z zasobami.

W poniższym przykładzie zdefiniowano prostą tabelę 2 x 3 z językiem 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>

Na poniższej ilustracji przedstawiono sposób renderowania tego przykładu.

Screenshot that shows how a basic table renders.

Zawieranie tabeli

Table element pochodzi z elementu i jest zgodny z Block typowymi regułami dotyczącymi Block elementów poziomu. Element Table może zawierać dowolny z następujących elementów:

Grupowanie wierszy

Element TableRowGroup umożliwia dowolne grupowanie wierszy w tabeli. Każdy wiersz w tabeli musi należeć do grupowania wierszy. Wiersze w grupie wierszy często mają wspólną intencję i mogą być stylowane jako grupa. Typowym zastosowaniem grupowania wierszy jest oddzielenie wierszy specjalnego przeznaczenia, takich jak wiersze tytułu, nagłówka i stopki, z zawartości podstawowej zawartej w tabeli.

W poniższym przykładzie użyto języka XAML do zdefiniowania tabeli ze stylizowanymi wierszami nagłówka i stopki.

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

Na poniższej ilustracji przedstawiono sposób renderowania tego przykładu.

Screenshot: Table row groups

Pierwszeństwo renderowania w tle

Elementy tabeli są renderowane w następującej kolejności (kolejność z od najniższej do najwyższej). Nie można zmienić tej kolejności. Na przykład nie ma właściwości "Z-order" dla tych elementów, których można użyć do zastąpienia tej ustalonej kolejności.

  1. Table

  2. TableColumn

  3. TableRowGroup

  4. TableRow

  5. TableCell

Rozważmy poniższy przykład, który definiuje kolory tła dla każdego z tych elementów w tabeli.

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

Na poniższej ilustracji przedstawiono sposób renderowania tego przykładu (tylko kolory tła).

Screenshot: Table z-order

Obejmujące wiersze lub kolumny

Komórki tabeli można skonfigurować tak, aby obejmowały wiele wierszy lub kolumn, używając RowSpan odpowiednio atrybutów lub .ColumnSpan

Rozważmy poniższy przykład, w którym komórka obejmuje trzy kolumny.

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

Na poniższej ilustracji przedstawiono sposób renderowania tego przykładu.

Screenshot: Cell spanning all three columns

Tworzenie tabeli za pomocą kodu

W poniższych przykładach pokazano, jak programowo utworzyć obiekt Table i wypełnić go zawartością. Zawartość tabeli jest rozdzielona na pięć wierszy (reprezentowanych przez TableRow obiekty zawarte w RowGroups obiekcie) i sześć kolumn (reprezentowanych przez TableColumn obiekty). Wiersze są używane do różnych celów prezentacji, w tym wiersza tytułu przeznaczonego do tytułu całej tabeli, wiersza nagłówka do opisania kolumn danych w tabeli i wiersza stopki z informacjami podsumowania. Należy pamiętać, że pojęcie wierszy "title", "header" i "stopka" nie jest związane z tabelą; są to po prostu wiersze o różnych cechach. Komórki tabeli zawierają rzeczywistą zawartość, która może składać się z tekstu, obrazów lub prawie dowolnego innego elementu interfejsu użytkownika.

Najpierw zostanie utworzony element FlowDocument do hostowania Tableobiektu , a nowy Table zostanie utworzony i dodany do zawartości obiektu 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

Następnie sześć TableColumn obiektów jest tworzonych i dodawanych do kolekcji tabeli Columns z zastosowanym formatowaniem.

Uwaga

Należy pamiętać, że kolekcja tabeli Columns korzysta ze standardowego indeksowania opartego na zera.

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

Następnie zostanie utworzony wiersz tytułu i dodany do tabeli z zastosowanym formatowaniem. Wiersz tytułu ma zawierać jedną komórkę obejmującą wszystkie sześć kolumn w tabeli.

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

Następnie zostanie utworzony i dodany wiersz nagłówka do tabeli, a komórki w wierszu nagłówka zostaną utworzone i wypełnione zawartością.

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

Następnie zostanie utworzony wiersz danych i dodany do tabeli, a komórki w tym wierszu zostaną utworzone i wypełnione zawartością. Kompilowanie tego wiersza jest podobne do kompilowania wiersza nagłówka z zastosowaniem nieco innego formatowania.

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

Na koniec zostanie utworzony, dodany i sformatowany wiersz stopki. Podobnie jak wiersz tytułu, stopka zawiera jedną komórkę, która obejmuje wszystkie sześć kolumn w tabeli.

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

Zobacz też