Táblázat áttekintése

Table egy blokkszintű elem, amely támogatja a Flow-dokumentum tartalmának rácsalapú megjelenítését. Ennek az elemnek a rugalmassága nagyon hasznos, de bonyolultabbá teszi a helyes megértést és használatot.

Ez a témakör a következő szakaszokat tartalmazza.

Tábla alapjai
Miben különbözik a táblázat a Rácstól?
Egyszerű táblaszerkezet
táblaelszigetelési
sorcsoportok
háttérbeli megjelenítés elsőbbsége
Sorok vagy oszlopok átfogó
Tábla létrehozása kóddal
[Kapcsolódó témakörök]

A tábla alapjai

Miben különbözik a táblázat a Rácstól?

Table és Grid közös funkciókkal rendelkezik, de mindegyik a legjobban megfelel a különböző forgatókönyvekhez. A Table a folyamattartalomban való használatra tervezték (a folyamattartalomról további információt a Folyamatdokumentum áttekintése című témakörben talál). A rácsokat leginkább űrlapokon belül érdemes használni (alapvetően bárhol, ami nem folyamat tartalom). Egy FlowDocument-ban a Table támogatja a folyamattartalom viselkedését, például a lapozást, az oszlopok átrendezését és a tartalomkijelölést, de egy Grid nem. A Grid azonban számos okból érdemes FlowDocument kívül használni, például Grid sor- és oszlopindexen alapuló elemeket ad hozzá, Table nem. A Grid elem lehetővé teszi a gyermektartalom rétegezését, így egyetlen "cellában" több elem is létezhet. Table nem támogatja a rétegezést. A Grid gyermekelemei teljesen pozicionálhatók az őket körülvevő "cella" határaihoz képest. Table nem támogatja ezt a funkciót. Végül, egy Grid kevesebb erőforrást igényel, mint egy Table, ezért fontolja meg egy Grid használatát a teljesítmény javítása érdekében.

Egyszerű táblastruktúra

Table oszlopokat (TableColumn elemeket) és sorokat (TableRow elemek) tartalmazó rácsalapú bemutatót biztosít. TableColumn elemek nem tartalmaznak tartalmat; egyszerűen definiálják az oszlopok oszlopait és jellemzőit. TableRow elemeket egy TableRowGroup elemben kell üzemeltetni, amely a tábla sorainak csoportosítását határozza meg. TableCell táblázat által bemutatandó tartalmat tartalmazó elemeket egy TableRow elemben kell üzemeltetni. TableCell csak Blockszármazó elemeket tartalmazhat. Az érvényes gyermekelemei egy TableCell-nek a következők.

Megjegyzés:

TableCell elemek nem feltétlenül tartalmaznak közvetlenül szöveges tartalmat. Az olyan folyamattartalom-elemekre vonatkozó elszigetelési szabályokról, mint a TableCell, tekintse meg folyamatdokumentum áttekintésicímű témakört.

Megjegyzés:

Table hasonló a Grid elemhez, de több képességekkel rendelkezik, ezért nagyobb erőforrás-többletterhelést igényel.

Az alábbi példa egy egyszerű 2 x 3 táblázatot határoz meg XAML-vel.

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

Az alábbi ábra bemutatja, hogyan jelenik meg ez a példa.

képernyőkép, amely bemutatja, hogyan jelenik meg egy alapszintű tábla.

Táblázatkezelés

Table a Block elemből származik, és betartja a Block szintű elemekre vonatkozó közös szabályokat. A Table elemet a következő elemek bármelyike tartalmazhatja:

Sorcsoportok

A TableRowGroup elem lehetővé teszi a sorok táblázaton belüli tetszőleges csoportosítását; A táblázat minden sorának egy sorcsoporthoz kell tartoznia. A sorcsoporton belüli sorok gyakran közös szándékkal rendelkeznek, és csoportként is formázhatók. A sorcsoportozás gyakori alkalmazása, hogy elkülönítse a speciális célú sorokat, mint például a címsorokat, élőfej sorokat és élőlábsorokat, a tábla fő tartalmától.

Az alábbi példa XAML használatával határoz meg egy táblázatot stílusos fejléc- és láblécsorokkal.

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

Az alábbi ábra bemutatja, hogyan jelenik meg ez a példa.

Képernyőkép: Táblázatsorcsoportok

Háttérrenderelési sorrend

A táblázatelemek a következő sorrendben jelennek meg (z-sorrend a legalacsonyabbtól a legmagasabbig). Ez a sorrend nem módosítható. Ezeknek az elemeknek például nincs "Z-order" tulajdonsága, amellyel felülbírálhatja ezt a létrehozott sorrendet.

Vegye figyelembe az alábbi példát, amely a tábla egyes elemeinek háttérszíneit határozza meg.

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

Az alábbi ábra bemutatja, hogyan jelenik meg ez a példa (csak a háttérszíneket jeleníti meg).

Képernyőkép: Tábla z-rend

Sorok vagy oszlopok kiterjesztése

A táblázatcellák úgy konfigurálhatók, hogy több sort vagy oszlopot is átfogjanak a RowSpan vagy ColumnSpan attribútumok használatával.

Vegyük az alábbi példát, amelyben egy cella három oszlopra terjed ki.

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

Az alábbi ábra bemutatja, hogyan jelenik meg ez a példa.

Képernyőkép: Egy cella átfogja mindhárom oszlopot

Tábla létrehozása kóddal

Az alábbi példák bemutatják, hogyan hozhat létre programozott módon egy Table, és hogyan töltheti fel tartalommal. A táblázat tartalma öt sorba (egy TableRow objektumban található RowGroups objektumok) és hat oszlopba (TableColumn objektumok) oszlik meg. A sorok különböző megjelenítési célokra használhatók, beleértve a teljes táblázat címzésére szolgáló címsort, a táblázat adatoszlopainak leírására szolgáló fejlécsort, valamint egy összegző információkat tartalmazó láblécsort. Vegye figyelembe, hogy a "title", "header" és "footer" sorok fogalma nem eredendően kapcsolódik a táblázathoz; ezek csupán különböző jellemzőkkel rendelkező sorok. A táblázatcellák tartalmazzák a tényleges tartalmat, amely szövegből, képekből vagy szinte bármilyen más felhasználói felületi elemből állhat.

Először létrejön egy FlowDocument a Tableüzemeltetéséhez, majd létrejön egy új Table, és hozzáadódik a FlowDocumenttartalmához.

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

Ezután hat TableColumn objektum jön létre, és hozzáadódik a tábla Columns gyűjteményéhez, némi formázás alkalmazásával.

Megjegyzés:

Vegye figyelembe, hogy a tábla Columns gyűjteménye standard, nulla alapú indexelést használ.

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

Ezután létrejön egy címsor, és hozzáadódik a táblához némi formázás alkalmazásával. A címsor egyetlen cellát tartalmaz, amely a táblázat mind a hat oszlopát lefedi.

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

Ezután létrejön egy fejlécsor, és hozzáadódik a táblához, a fejlécsor cellái pedig tartalommal lesznek kitöltve.

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

Ezután létrejön egy adatsor, amely hozzáadódik a táblázathoz, és a sor cellái létrehozásra és feltöltésre kerülnek tartalommal. A sor létrehozása hasonlít a fejlécsor készítéséhez, kissé eltérő formázással.

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

Végül egy élőlábsor jön létre, hozzáadásra kerül, és formázva lesz. A címsorhoz hasonlóan az élőláb is egyetlen cellát tartalmaz, amely a táblázat mind a hat oszlopát lefedi.

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

Lásd még

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-05-07

Megosztás a következőn keresztül:

Táblázat áttekintése

A tábla alapjai

Miben különbözik a táblázat a Rácstól?

Egyszerű táblastruktúra

Táblázatkezelés

Sorcsoportok

Háttérrenderelési sorrend

Sorok vagy oszlopok kiterjesztése

Tábla létrehozása kóddal

Lásd még

Visszajelzés

További források