Tabel gambaran umum
Table adalah elemen tingkat blok yang mendukung presentasi konten dokumen Alur berbasis kisi. Fleksibilitas elemen ini membuatnya sangat berguna, tetapi juga membuatnya lebih rumit untuk memahami dan menggunakan dengan benar.
Topik ini berisi bagian berikut.
[Topik Terkait]
Dasar-Dasar Tabel
Bagaimana Tabel Berbeda lalu Grid?
Table dan Grid berbagi beberapa fungsionalitas umum, tetapi masing-masing paling cocok untuk skenario yang berbeda. Table Dirancang untuk digunakan dalam konten alur (lihat Gambaran Umum Dokumen Alur untuk informasi selengkapnya tentang konten alur). Kisi paling baik digunakan di dalam formulir (pada dasarnya di mana saja di luar konten alur). FlowDocumentDalam , Table mendukung perilaku konten alur seperti penomoran halaman, aliran ulang kolom, dan pilihan konten saat Grid tidak. Grid Di sisi lain paling baik digunakan di luar karena FlowDocument berbagai alasan termasuk Grid menambahkan elemen berdasarkan indeks baris dan kolom, Table tidak. Elemen ini Grid memungkinkan lapisan konten anak, memungkinkan lebih dari satu elemen berada dalam satu "sel." Table tidak mendukung lapisan. Elemen anak dari Grid dapat benar-benar diposisikan relatif terhadap area batas "sel" mereka. Table tidak mendukung fitur ini. Akhirnya, membutuhkan lebih sedikit Grid sumber daya, jadi Table pertimbangkan untuk menggunakan Grid untuk meningkatkan performa.
Struktur Tabel Dasar
Table menyediakan presentasi berbasis kisi yang terdiri dari kolom (diwakili oleh TableColumn elemen) dan baris (diwakili oleh TableRow elemen). TableColumn elemen tidak menghosting konten; kolom hanya menentukan kolom dan karakteristik kolom. TableRow elemen harus dihosting dalam TableRowGroup elemen, yang menentukan pengelompokan baris untuk tabel. TableCell elemen, yang berisi konten aktual yang akan disajikan oleh tabel, harus dihosting dalam TableRow elemen. TableCell hanya boleh berisi elemen yang berasal dari Block. Elemen turunan yang TableCell valid untuk menyertakan.
Catatan
TableCell elemen mungkin tidak secara langsung menghosting konten teks. Untuk informasi selengkapnya tentang aturan penahanan untuk elemen konten alur seperti TableCell, lihat Gambaran Umum Dokumen Alur.
Catatan
Table mirip Grid dengan elemen tetapi memiliki lebih banyak kemampuan dan, oleh karena itu, membutuhkan overhead sumber daya yang lebih besar.
Contoh berikut mendefinisikan tabel 2 x 3 sederhana dengan 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>
Gambar berikut menunjukkan bagaimana contoh ini dirender.
Penampungan Tabel
Table berasal dari Block elemen , dan mematuhi aturan umum untuk Block elemen tingkat. Table Elemen mungkin dimuat oleh salah satu elemen berikut:
Pengelompokan Baris
Elemen TableRowGroup menyediakan cara untuk mengelompokkan baris secara segan-segan dalam tabel; setiap baris dalam tabel harus termasuk dalam pengelompokan baris. Baris dalam grup baris sering berbagi niat umum, dan mungkin ditata sebagai grup. Penggunaan umum untuk pengelompokan baris adalah untuk memisahkan baris tujuan khusus, seperti baris judul, header, dan footer, dari konten utama yang dimuat oleh tabel.
Contoh berikut menggunakan XAML untuk menentukan tabel dengan baris header dan footer bergaya.
<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>
Gambar berikut menunjukkan bagaimana contoh ini dirender.
Prioritas Penyajian Latar Belakang
Elemen tabel dirender dalam urutan berikut (z-order dari terendah ke tertinggi). Urutan ini tidak dapat diubah. Misalnya, tidak ada properti "Z-order" untuk elemen-elemen ini yang dapat Anda gunakan untuk mengambil alih pesanan yang dibuat ini.
Pertimbangkan contoh berikut, yang menentukan warna latar belakang untuk setiap elemen ini dalam tabel.
<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>
Gambar berikut menunjukkan bagaimana contoh ini merender (hanya menampilkan warna latar belakang).
Mencakup Baris atau Kolom
Sel tabel dapat dikonfigurasi untuk menjangkau beberapa baris atau kolom dengan menggunakan RowSpan atribut atau ColumnSpan .
Pertimbangkan contoh berikut, di mana sel mencakup tiga kolom.
<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>
Gambar berikut menunjukkan bagaimana contoh ini dirender.
Membangun Tabel Dengan Kode
Contoh berikut menunjukkan cara membuat Table dan mengisinya secara terprogram dengan konten. Konten tabel ditambahkan ke dalam lima baris (diwakili oleh TableRow objek yang RowGroups terkandung dalam objek) dan enam kolom (diwakili oleh TableColumn objek). Baris digunakan untuk tujuan presentasi yang berbeda, termasuk baris judul yang dimaksudkan untuk memberi judul seluruh tabel, baris header untuk menjelaskan kolom data dalam tabel, dan baris footer dengan informasi ringkasan. Perhatikan bahwa gagasan baris "judul", "header", dan "footer" tidak melekat pada tabel; ini hanyalah baris dengan karakteristik yang berbeda. Sel tabel berisi konten aktual, yang dapat terdiri dari teks, gambar, atau hampir semua elemen antarmuka pengguna (UI) lainnya.
Pertama, FlowDocument dibuat untuk menghosting Table, dan baru Table dibuat dan ditambahkan ke konten 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
Selanjutnya, enam TableColumn objek dibuat dan ditambahkan ke koleksi tabel Columns , dengan beberapa pemformatan diterapkan.
Catatan
Perhatikan bahwa koleksi tabel Columns menggunakan pengindeksan berbasis nol standar.
// 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
Selanjutnya, baris judul dibuat dan ditambahkan ke tabel dengan beberapa pemformatan diterapkan. Baris judul kebetulan berisi sel tunggal yang mencakup keenam kolom dalam tabel.
// 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
Selanjutnya, baris header dibuat dan ditambahkan ke tabel, dan sel di baris header dibuat dan diisi dengan konten.
// 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"))))
Selanjutnya, baris untuk data dibuat dan ditambahkan ke tabel, dan sel dalam baris ini dibuat dan diisi dengan konten. Membangun baris ini mirip dengan membangun baris header, dengan pemformatan yang sedikit berbeda diterapkan.
// 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
Terakhir, baris footer dibuat, ditambahkan, dan diformat. Seperti baris judul, footer berisi satu sel yang mencakup keenam kolom dalam tabel.
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
Baca juga
.NET Desktop feedback
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk