مشاركة عبر

نظرة عامة حول GridView

  • مقالة

‎طريقة عرض GridView هي احد طرق عرض التحكم في ListView الفئة GridView وفئات الدعم الخاصة بها تمكنك أنت والمستخدمين الخاصين بك لعرض مجموعة العناصر في جدول يستخدم أزرار كأنها رؤوس عواميد متفاعلة. هذا الموضوع يقدم الفئة GridView و يوضح الاستخدام الخاص به.

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

  • ما هي محتويات طريقة عرض GridView ؟
  • GridView لالتخطيط والنمط
  • تفاعلات المستخدم مع ال GridView
  • الحصول على طرق عرض أخرى
  • فئات الدعم لGridView
  • موضوعات ذات صلة

ما هي محتويات طريقة عرض GridView ؟

طريقة عرض GridView تعرض قائمة عناصرالبيانات بواسطة ربط حقول البيانات بالأعمدة و بواسطة عرض رأس العمود لتعريف الحقل. النمط الافتراضي GridView يتطبق أزرار كـرؤوس عواميد. باستخدام أزرار لرؤوس العواميد ، يمكنك تطبيق قدرات تفاعل المستخدم الهامة; على سبيل المثال، يمكن للمستخدمين النقر فوق رأس العامود لترتيب البيانات GridView استناداً إلى محتويات معينة في العامود.

ملاحظةملاحظة

يتحكم الزر في ان GridView يستخدم رؤوس العواميد المشتقة من ButtonBase.

الرسم التوضيحي التالي يبين عرض GridView الخاص بمحتوي ListView .

عرض GridView لمحتوى ListView

عرض قائمة ذو نمط

اعمدةGridView يتم تمثيلها عن طريق كائناتGridViewColumn ا التي يمكن تحجيمها تلقائياً حسب المحتوى الخاص بها. بشكل اختياري، يمكنك بوضوح تعيين GridViewColumn إلى عرض معين. يمكنك تغيير حجم العواميد عن طريق سحب املقبض بين رؤوس الأعمدة. يمكن أيضاً بشكل حيوي إضافة, إزالة ، استبدال أو إعادة ترتيب الأعمدة لأن هذه الوظيفة توجد في GridView. ومع ذلك، GridView لا يمكن لها تحديث مباشر للبيانات التي تعرضها.

يظهر المثال التالي كيف يتم تعريف GridViewهذا يعرض بيانات الموظف . في هذا المثال، ListView يعرّف EmployeeInfoDataSource كأنه ItemsSource. خاصية تعريفات DisplayMemberBinding تربط GridViewColumn المحتوى EmployeeInfoDataSource فئات البيانات.


<ListView ItemsSource="{Binding Source=
                       {StaticResource EmployeeInfoDataSource}}">

  <ListView.View>

    <GridView AllowsColumnReorder="true"
              ColumnHeaderToolTip="Employee Information">

      <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=FirstName}" 
                      Header="First Name" Width="100"/>

                  <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=LastName}" 
                      Width="100">
                      <GridViewColumnHeader>Last Name
                          <GridViewColumnHeader.ContextMenu>
                          <ContextMenu  MenuItem.Click="LastNameCM_Click"  
                                        Name="LastNameCM">
                              <MenuItem Header="Ascending" />
                              <MenuItem Header="Descending" />
                          </ContextMenu>
                          </GridViewColumnHeader.ContextMenu>
                      </GridViewColumnHeader>
                  </GridViewColumn>

                  <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=EmployeeNumber}" 
                      Header="Employee No." Width="100"/>
    </GridView>

  </ListView.View>
</ListView>

يبين الرسم التوضيحي التالي الجدول الذى أنشئه المثال السابق.

GridView الذى يعرض بيانات من ItemsSource

ListView مع إخراج GridView

GridView لالتخطيط والنمط

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

محتوى البيانات المتعلقة ببعضها يعرض في صفوف أفقية . على سبيل المثال، في الرسم التوضيحي السابق يتم عرض اسم العائلة و الاسم الأول ورقم بطاقة الهوية لكل موظف كمجموعة لأنهم يظهروا في صف أفقي .

تعريف و تصميم عواميد في GridView

عند تعريف حقل البيانات لعرضه في GridViewColumn ، استخدم خصائص DisplayMemberBinding ، CellTemplate ، أو CellTemplateSelector . خاصية ال DisplayMemberBinding تأخذ الأسبقية على أي من خصائص القالب.

لتحديد محاذاة المحتوى في عمود منGridView،قم بتعريف ال CellTemplate. لا تستخدم خصائص الHorizontalContentAlignment و VerticalContentAlignment التى لمحتوى ListView التي يتم عرضها باستخدام GridView.

لتحديد خصائص القالب والنمط لرؤوس الأعمدة, استخدم الفئاتGridView ، GridViewColumn ، و GridViewColumnHeader. لمزيد من المعلومات، راجع أنماط عنوان عمود GridView و نظرة عامة حول ‏‫القوالب.

إضافة عناصر مرئية ل GridView

لإضافة العناصر المرئية مثل عناصر التحكمCheckBox و Button ، إلى GridView عرض طريقة, استخدام قوالب أو الأنماط.

إذا تم تعريف عنصر مرئي بشكل صريح كعنصر بيانات ,يمكن أن يظهر مرة واحدة فقط في GridView. يوجد هذا القيد لأن العنصر يمكن أن يكون له أصل واحد فقط لذلك،يمكن أن يظهر مرة واحدة فقط في شجرة مرئية .

تصميم الصفوف في GridView

استخدام الفئات GridViewRowPresenter و GridViewHeaderRowPresenter لتنسيق وعرض صفوف من GridView. فى مثال حول كيفية الحصول على نمط الصفوف في GridView عرض وضع, راجع كيفية القيام بما يلي: نمط صف في ListView الذي تطبّق GridView.

المشاكل المحاذاة عند استخدام ItemContainerStyle

لمنع المشاكل المحاذاة بين رؤوس الأعمدة وخلايا لا تقم بتعيين صواب أو تحديد قالب يؤثر على عرض أحد العناصر الموجودة في ItemContainerStyle. على سبيل المثال، لا تقم بتعيين خصائصMargin أو تحديد ControlTemplate الذي يضيف CheckBox إلى ItemContainerStyle التي يتم تعريفها على عنصر التحكم ListView . بدلاً من ذلك، حدد خصائص والقوالب التي تؤثر على صواب عرض مباشرة على الفئات التي تعرّف على GridView وضع العرض.

على سبيل المثال، لإضافة CheckBox على الصفوف في GridView عرض الوضع ,قم بإضافة CheckBox إلى DataTemplate ، ثم قم بتعيين خصائص CellTemplate لذلك ال DataTemplate.

تفاعلات المستخدم مع ال GridView

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

توضح القائمة التالية أكثر تفاصيلاً القدرات باستخدام GridView لـتفاعل المستخدم:

  • إعادة ترتيب أعمدة باستخدام الأسلوب يسحب-و-drop.

    بإمكان المستخدمين إعادة ترتيب الأعمدة في GridView عن طريق الضغط على زر الماوس الأيسر أثناء وجوده فوق رأس عمود ثم سحب هذا العمود إلى الموضع الجديد. أثناء سحب المستخدم رأس العمود, يتم عرض إصدارعائم لالرأس بالإضافة إلى خط أسود متصل الذى يظهر مكان إدراج العمود.

    إذا كنت ترغب في تعديل النمط الافتراضي للإصدار العائم لالرأس ,قم بتحديد ControlTemplate ل GridViewColumnHeader اكتب أنه تم تشغيلها عند تعين خاصية Role إلى Floating. لمزيد من المعلومات، راجع كيفية القيام بما يلي: إنشاء نمط لرأس العمود المسحوب.

  • تغيير حجم عمود إلى محتواها.

    يمكن للمستخدمين أن ينقروا نقراً مزودجا على المقبض يمين رأس العمود لتغيير حجم العمود لتناسب محتواه.

    ملاحظةملاحظة

    يمكنك تعيين خاصية Width إلى Double.NaN لإنتاج التأثير نفسه.

  • تحديد عناصر الصفوف.

    يمكن لالمستخدمون أن يقوموا بتحديد عنصر واحد أو أكثر في GridView.

    إذا كنت تريد تغيير Style للعنصر المحدد راجع كيفية القيام بما يلي: استخدام المشغلات لتحديد نمط العناصر المحددة في ListView.

  • قم بالتمرير لعرض المحتوى الذي هو vهوible لا مبدئياً تشغيل شاشة.

    إذا كان الحجم GridView غير كافية صواب عرض كافة العناصر أو يمكن للمستخدمين التمرير أفقياً أو عمودياً باستخدام أشرطة التمرير التي يتم توفيرها من قبل ScrollViewer عنصر التحكم. هذا الScrollBarيمكن ان يكون مخفي إذا كانت كافة المحتويات مرئية في اتجاه معين. لا يتم تمرير رؤوس الأعمدة بأستخدام شريط تمرير رأسي ولكن يكون التمرير أفقياً.

  • التعامل مع أعمدة بواسطة النقر فوق الأزرار عنوان العمود.

    عندما يقوم المستخدمون بالنقر فوق زر رأس العمود , يمكن لهم فرز البيانات المعروضة في العمود إذا تم توفير خوارزمية فرز.

    يمكنك معالجة الحدث Click لأزرار رأس العمود لتوفير وظائف مثل خوارزمية الفرز. لمعالجة الحدث Click من أجل رأس عمود واحد,قم بتعيين معالج الأحداث على GridViewColumnHeader. لتعين معالج أحداث التي تعالج الحدث Click من أجل كافة رؤوس الأعمدة ,قم بتعيين المعالج على عنصر التحكم ListView .

الحصول على طرق عرض أخرى

هذه الفئة GridView المشتقة من الفئة المجردة ViewBase هي أحد عرض الأوضاع الممكنة لالفئة ListView. يمكنك إنشاء طرق عرض أخرى مخصصة لـ ListView بواسطة اشتقاق من الفئة ViewBase. للحصول على مثال مخصص لعرض الوضع ، راجع كيفية القيام بما يلي: إنشاء وضع عرض مخصص ل ListView.

فئات الدعم لGridView

الفئات التالية تدعم عرض الوضعGridView .

راجع أيضًا:

المهام

كيفية القيام بما يلي: فرز عمود GridView متى تم النقر على رأس العمود

المرجع

ListView

ListViewItem

GridViewColumn

GridViewColumnHeader

GridViewRowPresenter

GridViewHeaderRowPresenter

ViewBase

المبادئ

نظرة عامة على ListView

موارد أخرى

مواضيع إجرائية لل ListView