نظرة عامة حول الجدول

Table هو كتلة على مستوى العنصر والتي تدعم العرض على بطريقة شبكية لمحتوى مستند تدفق. مرونة هذا العنصر تجعله مفيد جداً ولكن أيضاً تجعله أكثر تعقيدًا للفهم والاستخدام بشكل صحيح.

يشتمل هذا الموضوع على الأقسام التالية.

• أساسيات الجدول

• كيف يكون الجدول مختلفاً عن الشبكة ؟

• البنية الأساسية للجدول

• احتواء الجدول

• تجميعات الصفوف

• أسبقية عرض الخلفية

• امتدادات الصفوف أو الأعمدة

• إنشاء جدول بالتعليمات البرمجية

• مواضيع ذات صلة

أساسيات الجدول

كيف يكون الجدول مختلفاً عن الشبكة ؟

Table وGrid يتشاركوا بعض الوظائف المشتركة، و لكن كل منها يكون ملاءماً لسيناريوهات مختلفة. Table مصمم للاستخدام ضمن تدفق المحتوى (راجع نظرة عامة على مستند التدفق للحصول على مزيد من المعلومات حول تدفق المحتوى). أفضل استخدام للشبكات في داخل النماذج (بشكل أساسي أي مكان خارج تدفق محتوى). tn oghg FlowDocument ، Table يدعم سلوكيات تدفق المحتوى مثل تعيين الحدود الفاصلة للصفحات، إنسياب العمود وتحديد المحتوى فى حين Grid لا يقوم بذلك. Grid من ناحية أخرى يتم استخدامه بصورة أفضل خارج FlowDocument لأسباب عديدة بما في ذلك Grid يضيف عناصر استناداً إلى فهرس الأعمدة و الصفوف Table لا يفعل. يسمح عنصرGridبتقسيم المحتوى التابع إلى طبقات، سامحاً لأكثر من عنصر واحد بالتواجد داخل "الخلية" الواحدة Table لا يعتمد تعدد المستويات فرع عناصر من Gridيمكن وضع حتما نسبة إلى المنطقة في حدود "الخليه" بها. Tableلا يعتمد هذه الميزة. وأخيراً، يتطلب Grid موارد أقل فيعتبر Tableاستخدام Grid لتحسين الأداء.

البنية الأساسية للجدول

Tableيوفر عرض تقديمي يستند إلى شبكة يتكون من أعمدة (الممثلة TableColumnعناصر) و الصفوف (الممثلة TableRowعناصر). TableColumnعناصر لا باستضافة المحتوى؛ فإنها ببساطة بتعريف أعمدة و الصفات المميزة للأعمدة. TableRowلابد من استضافة عناصر فيTableRowGroupعنصر، والذي يقوم بتعريف مجموعة صفوف الخاصة جدول. TableCellلابد من استضافة عناصر، والتي تحتوي على المحتوى الفعلي لتظهر بالجدول، فيTableRowالعنصر. TableCellقد يحتوي على العناصر التي ينحدر من فقطBlock. العناصر التابعة الصالحة لـ TableCell تتضمن.

• BlockUIContainer

• List

• Paragraph

• Section

• Table

ملاحظة
قد لا تستضيف العناصر TableCell محتوى نصى مباشرةً.للحصول على المزيد من المعلومات حول قواعد الاحتواء لعناصر تدفق المحتوى مثل TableCell راجع نظرة عامة على مستند التدفق.

ملاحظة
العنصر Table يشبه العنصر Gridولكن له قدرات أكثر وبالتالى فإن ذلك يتطلب مقدار حمل مصاحب أكبر للمورد.

يحدد المثال التالي جدول 3 × 2 بسيط بواسطة 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>

يظهر الشكل التالي كيف يعرض هذا المثال.

احتواء الجدول

Table مشتقة من العنصر Block ويلتزم بالقواعد الشائعة لـ مستوى العناصرBlock. العنصرTable قد يكون محتوى بواسطة أي من العناصر التالية:

• FlowDocument

• TableCell

• ListBoxItem

• ListViewItem

• Section

• Floater

• Figure

تجميعات الصفوف

يوفر العنصر TableRowGroup طريقة لتجميع الصفوف بشكل عشوائي داخل جدول; يجب أن ينتمي كل صف في الجدول إلى تجميع صفوف ما. تتشارك الصفوف داخل مجموعة صفوف غالباً فى هدف مشترك وقد يتم تطبيق نمط كمجموعة. استخدام شائع لتجميعات الصفوف لفصل صفوف ذات غرض خاص مثل صفوف العنوان والرأس والتذييل من المحتوى الأساسي المضمن بواسطة الجدول.

يستخدم المثال التالي XAML لتعريف جدول مع صفوف الرأس والتذييل منمطة.

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

يظهر الشكل التالي كيف يعرض هذا المثال.

أسبقية عرض الخلفية

تقديم عناصر الجدول في الترتيب التالي (z-order من الأدنى إلى الأعلى). لا يمكن تغيير هذا الترتيب. على سبيل المثال، لا توجد خاصية "z-order" لهذه العناصر التي يمكنك استخدامها لتجاوز هذا الترتيب المؤسس.

1. Table

2. TableColumn

3. TableRowGroup

4. TableRow

5. TableCell

خذ بعين الاعتبار المثال التالي، والذي يقوم بتعريف ألوان الخلفية لكل من هذه العناصر ضمن جدول.

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

يظهر الشكل التالي كيف يعرض هذا المثال (إظهار لون الخلفية فقط).

امتدادات الصفوف أو الأعمدة

قد يتم تكوين خلايا الجدول لتمتد عبر عدة صفوف أو أعمدة بواسطة استخدام السمات RowSpan أو ColumnSpan على التوالي.

خذ بعين الاعتبار المثال التالي الذي يجعل خلية تمتد على ثلاثة أعمدة.

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

يظهر الشكل التالي كيف يعرض هذا المثال.

إنشاء جدول بالتعليمات البرمجية

تبين الأمثلة التالية كيفية إنشاء بشكل مبرمج Table ثم ملأها هذا بالمحتوى. يتم تقسيم محتويات الجدول إلى خمسة صفوف (تمثل ب TableRow الكائنات المضمنة في RowGroups الكائن) و ستة أعمدة (تمثل ب TableColumn الكائنات). يتم استخدام الصفوف لأغراض العرض التقديمي المختلفة بما في ذلك صف العنوان الغرض منه وضع عنوان للجدول بأكمله, و صف رأس لوصف أعمدة البيانات في الجدول و صف التذييل لوضع معلومات تلخيصية للجدول بأكمله. لاحظ أن صفوف "العنوان" و "رأس" و "التذييل" غير مضمّنة إلى الجدول; ببساطة هذه هي صفوف بصفات مميزة مختلفة. خلايا الجدول تحتوي على المحتوى الفعلي الذي يمكن أن يتألف من نص ، صور أو تقريبًا أي عنصر أخر واجهة المستخدم (UI) .

أولا ، FlowDocument يتم إنشاءه لإستضافة Table ، و جديد Table يتم إنشاؤها و إضافتها إلى محتويات 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;

التالي ، ستة TableColumn يتم إنشاء كائنات وإضافتها إلى مجموعة الجدول Columns , بتطبيق بعض التنسيق.

ملاحظة
لاحظ أن مجموعة الجدول Columns تستخدم الفهرسة القياسية انطلاقا من الصفر.

            ' 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

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

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

بعد ذلك يتم إنشاء صف رأس و يتم إضافته إلى الجدول ثم يتم إنشاء الخلايا في صف الرأس و تعبئتها بالمحتوى.

' 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"))));

بعد ذلك يتم إنشاء صف للبيانات و يتم إضافته إلى الجدول ثم يتم إنشاء الخلايا في هذا الصف و تعبئتها بالمحتوى. يشبه بناء هذا الصف بإنشاء صف الرأس مع تطبيق تنسيق مختلف قليلاً.

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

وأخيراً، يتم إنشاء صف تذييل و إضافته و تنسيقه. مثل صف العنوان, يحتوي التذييل على خلية واحدة تمتد على كافة الأعمدة الستة في الجدول.

table1.RowGroups(0).Rows.Add(new TableRow())
currentRow = table1.RowGroups(0).Rows(4)

' 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[4];

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

راجع أيضًا:

المهام

كيفية القيام بما يلي: تعريف جدول بواسطة XAML

كيفية القيام بما يلي: استخدام محتوى تدفق العناصر

المبادئ

نظرة عامة على مستند التدفق

المستندات فى WPF