Tabloya Genel Bakış
Table Flow belge içeriğinin kılavuz tabanlı sunumunu destekleyen bir blok düzeyi öğesidir. Bu öğenin esnekliği onu çok kullanışlı hale getirir, ancak aynı zamanda doğru anlaşılmasını ve kullanılmasını daha karmaşık hale getirir.
Bu konu, aşağıdaki bölümleri içerir.
[İlgili Konular]
Tablo Temelleri
Tablo Farklı ve Kılavuz nasıldır?
Table ve Grid bazı ortak işlevleri paylaşın, ancak her biri farklı senaryolar için en uygun seçenektir. A Table , akış içeriğinde kullanılmak üzere tasarlanmıştır (akış içeriği hakkında daha fazla bilgi için bkz . Akış Belgesine Genel Bakış ). Kılavuzlar en iyi şekilde formların içinde kullanılır (temel olarak akış içeriğinin dışında herhangi bir yerde). içinde FlowDocument, Table sayfalandırma, sütun yeniden akışı ve içerik seçimi gibi akış içeriği davranışlarını desteklerken, bir Grid desteklemez. Öte yandan AGrid, bir satır ve sütun dizinine dayalı öğeler ekleme dahil olmak üzere Grid birçok nedenden dolayı bir dışında FlowDocument en iyi şekilde kullanılır, Table eklenmez. Grid öğesi alt içeriğin katmanlanmasına izin verir ve tek bir "hücre" Table içinde birden fazla öğenin bulunmasına izin verir. Katman oluşturmayı desteklemez. alt Grid öğeleri kesinlikle kendi "hücre" sınırlarının alanına göre konumlandırılabilir. Table bu özelliği desteklemez. Son olarak, a Grid daha az kaynak gerektirir, bu Table nedenle performansı geliştirmek için bir Grid kullanmayı göz önünde bulundurun.
Temel Tablo Yapısı
Table sütunlardan (öğelerle temsil edilir) ve satırlardan (öğelerle TableColumn temsil edilir TableRow ) oluşan kılavuz tabanlı bir sunu sağlar. TableColumn öğeler içeriği barındırmaz; yalnızca sütunları ve sütunların özelliklerini tanımlarlar. TableRow öğelerinin, tablo için bir satır gruplandırması tanımlayan bir öğesinde TableRowGroup barındırılması gerekir. TableCell tablo tarafından sunulacak gerçek içeriği içeren öğeler bir TableRow öğede barındırılmalıdır. TableCell yalnızca öğesinden Blocktüretilen öğeler içerebilir. Ekleme TableCell için geçerli alt öğeler.
Dekont
TableCell öğeleri metin içeriğini doğrudan barındırmayabilir. gibi TableCellakış içeriği öğelerinin kapsama kuralları hakkında daha fazla bilgi için bkz . Akış Belgesine Genel Bakış.
Dekont
Table öğesine benzer Grid ancak daha fazla özelliğe sahiptir ve bu nedenle daha fazla kaynak yükü gerektirir.
Aşağıdaki örnek, XAML ile basit bir 2 x 3 tablosu tanımlar.
<!--
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>
Aşağıdaki şekilde bu örneğin nasıl işlenme şekli gösterilmektedir.
Tablo Kapsama
Table öğesinden Block türetilir ve düzey öğeleri için Block ortak kurallara uyar. Bir Table öğe aşağıdaki öğelerden herhangi biri tarafından bulunabilir:
Satır Gruplandırmaları
öğesi, TableRowGroup tablo içindeki satırları rastgele gruplandırmak için bir yol sağlar; tablodaki her satır bir satır gruplandırmaya ait olmalıdır. Satır grubu içindeki satırlar genellikle ortak bir amacı paylaşır ve grup olarak stillendirilebilir. Satır gruplandırmalarında yaygın olarak kullanılanlardan biri, başlık, üst bilgi ve alt bilgi satırları gibi özel amaçlı satırları tablonun içerdiği birincil içerikten ayırmaktır.
Aşağıdaki örnek, stilli üst bilgi ve alt bilgi satırları içeren bir tablo tanımlamak için XAML'yi kullanır.
<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>
Aşağıdaki şekilde bu örneğin nasıl işlenme şekli gösterilmektedir.
Arka Plan İşleme Önceliği
Tablo öğeleri aşağıdaki sırayla işlenir (z-sırası en düşükten en yükseğe). Bu sıra değiştirilemez. Örneğin, bu yerleşik sırayı geçersiz kılmak için kullanabileceğiniz bu öğeler için "Z-order" özelliği yoktur.
Tablodaki bu öğelerin her biri için arka plan renklerini tanımlayan aşağıdaki örneği göz önünde bulundurun.
<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>
Aşağıdaki şekilde, bu örneğin nasıl işlenme şekli gösterilmektedir (yalnızca arka plan renklerini gösterir).
Satırları veya Sütunları Yayma
Tablo hücreleri sırasıyla veya öznitelikleri kullanılarak birden çok satıra veya ColumnSpan sütuna RowSpan yayılacak şekilde yapılandırılabilir.
Bir hücrenin üç sütuna yayıldığı aşağıdaki örneği göz önünde bulundurun.
<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>
Aşağıdaki şekilde bu örneğin nasıl işlenme şekli gösterilmektedir.
Kodla Tablo Oluşturma
Aşağıdaki örneklerde program aracılığıyla oluşturma Table ve içerikle doldurma gösterilmektedir. Tablonun içeriği beş satıra (bir RowGroups nesnenin içerdiği nesnelerle TableRow temsil edilir) ve altı sütuna (nesnelerle TableColumn temsil edilir) eklenir. Satırlar, tablonun tamamına başlık vermek üzere tasarlanmış bir başlık satırı, tablodaki veri sütunlarını açıklamak için üst bilgi satırı ve özet bilgileri içeren bir alt bilgi satırı da dahil olmak üzere farklı sunu amaçlarıyla kullanılır. "başlık", "üst bilgi" ve "alt bilgi" satırlarının tablonun doğasında yer almadığını unutmayın; bunlar yalnızca farklı özelliklere sahip satırlardır. Tablo hücreleri metin, görüntü veya neredeyse diğer tüm kullanıcı arabirimi (UI) öğelerinden oluşabilen gerçek içeriği içerir.
İlk olarak, öğesini barındırmak için bir FlowDocument oluşturulur ve yeni Table bir oluşturulur ve içeriğine FlowDocumentTableeklenir.
// 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
Ardından, altı TableColumn nesne oluşturulur ve bazı biçimlendirmeler uygulanmış olarak tablonun Columns koleksiyonuna eklenir.
Dekont
Tablonun Columns koleksiyonunda standart sıfır tabanlı dizinleme kullanıldığına dikkat edin.
// 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
Ardından, bir başlık satırı oluşturulur ve bazı biçimlendirmeler uygulanmış olarak tabloya eklenir. Başlık satırı, tablodaki altı sütunun tümüne yayılan tek bir hücre içerir.
// 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
Ardından, bir üst bilgi satırı oluşturulur ve tabloya eklenir ve üst bilgi satırındaki hücreler oluşturulur ve içerikle doldurulur.
// 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"))))
Ardından, veriler için bir satır oluşturulur ve tabloya eklenir ve bu satırdaki hücreler oluşturulur ve içerikle doldurulur. Bu satırı oluşturmak, biraz farklı biçimlendirme uygulanmış üst bilgi satırını oluşturmaya benzer.
// 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
Son olarak, bir alt bilgi satırı oluşturulur, eklenir ve biçimlendirilir. Başlık satırı gibi alt bilgi de tablodaki altı sütunun tümüne yayılan tek bir hücre içerir.
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
Ayrıca bkz.
.NET Desktop feedback
Geri Bildirim
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz. https://aka.ms/ContentUserFeedback.
Gönderin ve geri bildirimi görüntüleyin