نظرة عامة حول تقديم رسومات WPF

مقالة
11/01/2010

يوفر هذا الموضوع نظرة عامة حول الطبقة المرئية WPF . تركز على دور فئة Visual لـتقديم دعم في الطراز WPF .

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

دور كائن Visual
كيف يتم انشاء كائنات Visual لإنشاء عناصر تحكم
شجرة مرئية
سلوك التقديم المرئي
فئة VisualTreeHelper
موضوعات ذات صلة

دور كائن Visual

إن فئة Visual هي التجريد الأساسي من حيث يشتق كل كائن FrameworkElement . يعمل أيضاً كنقطة الإدخال لكتابة عناصر التحكم الجديدة في WPF ، و في عدة طرق يمكن اعتبارها كمؤشر الإطار (HWND) في طراز تطبيق Win32 .

كائنVisual عبارة عن كائن أساسي WPF دوره الأساسي هو توفير تقديم الدعم. عناصر واجهة المستخدم مثل Button و TextBox ، ينحدر من Visual الفئة ، واستخدامها في استمرار تقديم البيانات الخاصة بهم. إن كائن Visual يوفر دعم لــ:

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

ومع ذلك، فإن كائن Visual لا يتضمن دعم للميزات غير-التقديمية مثل:

معالجة الحدث
تخطيط
الأنماط
ربط البيانات.
العولمة

يتم الكشف عن Visual كفئة مجردة عامة من حيث يجب أن يتم اشتقاق الفئات التابعة . يبين الرسم التوضيحي التالي هيكل الكائنات المرئية التي يمكن عرضها في WPF.

التسلسل الهرمي لفئة Visual

الرسم التخطيطي للفئات المشتقة من الكائن المرئي

فئة DrawingVisual

DrawingVisual هو فئة رسم تتميز بخفة الوزن مستخدمة لتقديم الأشكال أو الصور أو النص. تعتبر هذه الفئة خفيفة الوزن لأنها لا توفر معالجة التخطيط أو الحدث الذي يعمل على تحسين أداء وقت التشغيل الخاص به . ولهذا السبب، تكون الرسومات مثالية من أجل الخلفيات والعلامات القصاصة الفنية. DrawingVisualيمكن أن تستخدم إلى إنشاء cusإلىm المرئي كائن. لمزيد من المعلومات، راجع استخدام كائنات DrawingVisual.

فئة Viewport3DVisual

Viewport3DVisual يوفر جسر بين كائنات Visual و Visual3D ثنائية الأبعاد . إن فئة Visual3D هي الفئة الأساسية لكافة العناصر المرئية الثلاثية الأبعاد . Viewport3DVisual يتطلب أن تقوم بتعريف قيمة Camera و قيمة Viewport . تسمح الكاميرا لك بعرض المشهد. يؤسس إطار المعاينة أين سيتم تخطيط الإسقاط على السطح ثنائي الأبعاد. لمزيد من المعلومات حزل ثلاثية الأبعاد في WPF ، راجع نظرة عامة على الرسوميات ثلاثية الأبعاد

فئة ContainerVisual

إن فئةContainerVisual يتم استخدامها كحاوية مجموعة من كائنات Visual . إن فئة DrawingVisual مشتقة من فئة ContainerVisual مما يسمح لها أن تحتوي مجموعة من الكائنات المرئية.

رسم المحتوى في كائنات Visual

إن كائن Visual يقوم بتخزين البيانات المقدمة الخاصة به كـ قائمة تعليمة رسومات متجهة . يمثل كل عنصر في قائمة التعليمات مجموعة ذات المستوى المنخفض من بيانات الرسومات و الموارد المقترنة في تنسيق متسلسل. توجد أربعة أنواع مختلفة من تقديم البيانات التي يمكن أن تتضمن محتوى الرسم.

رسم نوع المحتوى	الوصف
رسوم المتجهات	يمثل بيانات رسومات المتجهات ، و أي معلومات Brush و Pen مقترنة .
الصورة	يمثل صورة ضمن المنطقة المعرّفة من قِبل Rect.
الصورة الرمزية	يمثل الرسم الذي يعرض GlyphRun ، وهو تسلسل رموزًا من موارد خط محدد. هذة هي كيفية تمثيل النص.
Video	يمثل الرسم الذي يعرض الفيديو.

إن DrawingContext يسمح لك بنشر Visual مع محتوى مرئي. عند استخدام أوامر الرسم الخاصة بكائن DrawingContext , تقوم فعلياً بتخزين مجموعة من البيانات المقدمة التي سيتم استخدامها فيما بعد بواسطة نظام الرسومات; لا تقوم بالرسم إلى الشاشة في الوقت الحقيقي.

عند إنشاءك عنصر تحكم WPF مثل Button ، فإن عنصر التحكم ضمنيًا يقوم بإنشاء بيانات مقدمة لرسم نفسه. على سبيل المثال، اعداد خاصية Content الخاصة بــ Button يسبب تخزين عنصر التحكم لتمثيل التقديم الخاص بالصورة الرمزية.

Visual يقوم بوصف كواحد أو أكثر من كائنات Drawing المضمنة داخل DrawingGroup. DrawingGroupكما يصف أقنعة معدل الشفافية والتحويلات، تأثيرات الصورة النقطية، والعمليات الأخرى التي يتم تطبيقها على المحتويات الخاصة بها. DrawingGroupيتم تطبيق العمليات الترتيب التالي عندما يتم تقديم المحتوى: OpacityMask, Opacity, BitmapEffect, ClipGeometry, GuidelineSet, و من ثمTransform.

يبين الرسم التوضيحي التالي الترتيب حيث يتم تطبيق عمليات DrawingGroup أثناء تسلسل التقديم.

ترتيب عمليات DrawingGroup

لمزيد من المعلومات، راجع نظرة عامة حول كائنات الرسم.

محتوى الرسم في طبقة مرئية

لا يمكنك ابداً إنشاء مثيل لــ DrawingContext بشكل مباشر , على الرغم من ذلك، يمكنك الحصول على سياق الرسم من بعض الطرق مثل DrawingGroup.Open و DrawingVisual.RenderOpen. يقوم المثال التالي باسترداد DrawingContext من DrawingVisual و يستخدمه لرسم مستطيل.

        ' Create a DrawingVisual that contains a rectangle.
        Private Function CreateDrawingVisualRectangle() As DrawingVisual
            Dim drawingVisual As New DrawingVisual()

            ' Retrieve the DrawingContext in order to create new drawing content.
            Dim drawingContext As DrawingContext = drawingVisual.RenderOpen()

            ' Create a rectangle and draw it in the DrawingContext.
            Dim rect As New Rect(New Point(160, 100), New Size(320, 80))
            drawingContext.DrawRectangle(Brushes.LightBlue, CType(Nothing, Pen), rect)

            ' Persist the drawing content.
            drawingContext.Close()

            Return drawingVisual
        End Function

// Create a DrawingVisual that contains a rectangle.
private DrawingVisual CreateDrawingVisualRectangle()
{
    DrawingVisual drawingVisual = new DrawingVisual();

    // Retrieve the DrawingContext in order to create new drawing content.
    DrawingContext drawingContext = drawingVisual.RenderOpen();

    // Create a rectangle and draw it in the DrawingContext.
    Rect rect = new Rect(new System.Windows.Point(160, 100), new System.Windows.Size(320, 80));
    drawingContext.DrawRectangle(System.Windows.Media.Brushes.LightBlue, (System.Windows.Media.Pen)null, rect);

    // Persist the drawing content.
    drawingContext.Close();

    return drawingVisual;
}

تعداد محتوى الرسم في الطبقة المرئية

بالإضافة إلى الاستخدامات الأخرى الخاصة بهم ، توفر كائنات Drawing أيضاً طراز كائن لتعداد محتويات Visual.

ملاحظة
عند تعداد المحتويات المرئية ، يتم استرداد كائنات Drawing و ليس التمثيل الأساسي لتقديم البيانات كقائمة متجه الرسومات التعليمة.

يستخدم المثال التالي أسلوب GetDrawing لاسترداد قيمة DrawingGroup التابعة إلى Visual و تعدادها.

public void RetrieveDrawing(Visual v)
{
    DrawingGroup dGroup = VisualTreeHelper.GetDrawing(v);
    EnumDrawingGroup(dGroup);

}

 // Enumerate the drawings in the DrawingGroup.
 public void EnumDrawingGroup(DrawingGroup drawingGroup)
 {
     DrawingCollection dc = drawingGroup.Children;

     // Enumerate the drawings in the DrawingCollection.
     foreach (Drawing drawing in dc)
     {
         // If the drawing is a DrawingGroup, call the function recursively.
         if (drawing.GetType() == typeof(DrawingGroup))
         {
             EnumDrawingGroup((DrawingGroup)drawing);
         }
         else if (drawing.GetType() == typeof(GeometryDrawing))
         {
             // Perform action based on drawing type.  
         }
         else if (drawing.GetType() == typeof(ImageDrawing))
         {
             // Perform action based on drawing type.
         }
         else if (drawing.GetType() == typeof(GlyphRunDrawing))
         {
             // Perform action based on drawing type.
         }
         else if (drawing.GetType() == typeof(VideoDrawing))
         {
             // Perform action based on drawing type.
         }
     }
 }

كيف يتم انشاء كائنات Visual لإنشاء عناصر تحكم

العديد من الكائنات في WPF تتكون من كائنات مرئية أخرى ، مما يعني أن تحتوي على تسلسلات هرمية مختلفة من كائنات تابعة. العديد من عناصر واجهة المستخدم في WPF ، مثل عناصر التحكم، تتكون من عدة كائنات مرئية تمثل أنواع مختلفة من عناصر التقديم. على سبيل المثال، فإن عنصر تحكم Button يمكن أن يحتوي على عدد من كائنات أخرى بما في ذلك ClassicBorderDecorator ، ContentPresenter ، و TextBlock.

يُظهر التعليمات البرمجية التالي عنصر تحكم Buttonمعرفة في العلامة.

<Button Click="OnClick">OK</Button>

إذا كان عليك تعداد الكائنات المرئية التي تؤلف عنصر تحكم Buttonالافتراضي ، قد تجد التسلسل الهرمي للكائنات المرئية الموضحة أدناه:

الرسم التخطيطي للتسلسل الهيكلي لشجرة مرئية

إن عنصر تحكم Button يحتوي على عنصر ClassicBorderDecorator والتي بدورها تحتوي على العنصر ContentPresenter . إن عنصر ClassicBorderDecorator مسؤول عن رسم حد و خلفية من أجل Button. إن عنصر ContentPresenter مسؤول عن عرض محتويات Button. في هذه الحالة، طالما تقوم بعرض النص ، فإن عنصر ContentPresenter يحتوي على عنصر TextBlock . الحقيقة في أن عنصر تحكم Button يستخدم ContentPresenter تعني أن المحتوى قد يتم تمثيله بعناصر أخرى، مثل Image أو هندسة ، مثل EllipseGeometry.

قوالب عناصر التحكم

المفتاح إلى توسيع عنصر التحكم إلى صواب من عناصر التحكم هو ControlTemplate. يقوم قالب عنصر التحكم بتحديد التسلسل الهرمي المرئي الافتراضي لـعنصر التحكم . عندما تقوم بالرجوع بشكل صريح الرجوع إلى عنصر التحكم ، تقوم ضمنيًا الرجوع إلى التسلسل الهرمي المرئي الخاص به. يمكنك تجاوز القيم الافتراضية لقالب عنصر التحكم لإنشاء مظهر مرئي مخصص لعنصر التحكم . على سبيل المثال، قد تقوم بتعديل قيمة لون الخلفية الخاص بعنصر التحكم Button بحيث يستخدم قيمة لون متدرج خطي بدلاً من قيمة لون خالص. لمزيد من المعلومات، راجع عينة لزر ControlTemplate.

عنصر واجهة مستخدم مثل عنصر تحكم Button و يحتوي على عدة قوائم أوامر متجه الرسومات التي تصف تعريف تقديم كامل لعنصر التحكم. يُظهر التعليمات البرمجية التالي عنصر تحكم Buttonمعرفة في العلامة.

<Button Click="OnClick">
  <Image Source="images\greenlight.jpg"></Image>
</Button>

إذا كنت تريد تعداد الكائنات المرئية و قوائم أوامر رسومات المتجهات التي تؤلف عنصر تحكم Button ، سوف تجد التسلسل الهرمي لكائنات موضحة أدناه:

الرسم التخطيطي للشجرة المرئية وبيانات العرض

إن عنصر تحكم Button يحتوي على عنصر ClassicBorderDecorator والتي بدورها تحتوي على العنصر ContentPresenter . إن عنصر ClassicBorderDecorator مسؤول عن رسم كافة عناصر الرسومات المنفصلة التي تكون الحدود والخلفية للزر. إن عنصر ContentPresenter مسؤول عن عرض محتويات Button. في هذه الحالة، طالما تقوم بعرض الصورة ، فإن عنصر ContentPresenter يحتوي على عنصر Image .

هناك عدد من النقاط ملاحظة حول التسلسل الهرمي للكائنات المرئية و قوائم الأوامر لرسومات المتجهات :

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

شجرة مرئية

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

تظهر التعليمات البرمجية التالي عنصر StackPanelمعرف في العلامة.

<StackPanel>
  <Label>User name:</Label>
  <TextBox />
  <Button Click="OnClick">OK</Button>
</StackPanel>

إذا كان عليك تعداد الكائنات المرئية التي تؤلف عنصر StackPanel في مثال العلامة ، قد تجد التسلسل الهرمي للكائنات المرئية الموضحة أدناه:

الرسم التخطيطي للتسلسل الهيكلي لشجرة مرئية

ترتيب العرض

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

الرسم التخطيطي لترتيب عرض شجرة مرئية

الجذر المرئي

الجذر المرئي هو العنصر الأعلى في التسلسل الهرمي الخاص بالشجرة المرئية . في معظم التطبيقات الفئة الأساسية من الجذر المرئي إما Window أو NavigationWindow. ومع ذلك، إذا تمت استضافة الكائنات المرئية في تطبيق Win32 ، سيكون الجذر المرئي الأعلى - مرئية الذي تقوم باستضافتة الأكثر في إطار Win32. لمزيد من المعلومات، راجع برنامج تعليمي استضافة كائن مرئى في أحد تطبيقات Win32.

علاقة بشجرة المنطقية

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

<DockPanel>
  <ListBox>
    <ListBoxItem>Dog</ListBoxItem>
    <ListBoxItem>Cat</ListBoxItem>
    <ListBoxItem>Fish</ListBoxItem>
  </ListBox>
  <Button Click="OnClick">OK</Button>
</DockPanel>

إذا كان عليك تعداد الكائنات المنطقية التي تؤلف عنصر DockPanel في مثال العلامة ، قد تجد التسلسل الهرمي للكائنات المنطقية الموضحة أدناه:

مخطط الشجرة المنطقية

الرسم التخطيطي للشجرة

يتم مزامنة كلا من الشجرة المرئية و الشجرة المنطقية مع المجموعة الحالية من عناصر التطبيق تعكس أي إضافة أو حذف أو تعديل عناصر. ومع ذلك، تقوم الأشجار بتقديم طرق عرض مختلفة للتطبيق. بعكس الشجرة المرئية ،فإن الشجرة المنطقية لا تقوم بتوسيع عنصر ContentPresenter الخاص بعنصر التحكم. هذا يعني عدم وجود المراسلات رأس برأس مباشر بين الشجرة المنطقية و الشجرة المرئية بالنسبة لنفس مجموعة الكائنات. في الحقيقة، استدعاء كائن LogicalTreeHelper للحصول على أسلوب GetChildren و كائن VisualTreeHelper للحصول على أسلوب GetChild باستخدام نفس العنصر كمعلمة أسلوب تعطي نتائج مختلفة.

للحصول على مزيد من المعلومات حول الشجرة المنطقية، راجع الأشجار فى الWPF.

العرض في الشجرة المرئية مع XamlPad

إن أداة WPF،الــ XamlPad ، يوفر خيار عرض و استكشاف الشجرة المرئية التي تطابق المحتوىXAML المعرف حالياً . انقر فوق زر إظهار الشجرة المرئية على شريط القوائم لعرض الشجرة المرئية . يوضح التالي توسيع XAML المحتوى في عقد الشجرة المرئية في لوحة مشتكشف الشجرة المرئية من XamlPad:

لوحة مستكشف الشجرة المرئية في XamlPad

لاحظ كيفية عرض عناصر التحكم Label ، TextBox ، و Button للتسلسل الهرمي الخاص بالكائن المرئي المنفصل في لوحة Visual Tree Explorer من XamlPad. وهذا لأن عناصر التحكم WPF تحتوي على ControlTemplate التي تحتوي على الشجرة المرئية لعنصر التحكم هذا. عندما تقوم بالرجوع بشكل صريح الرجوع إلى عنصر التحكم ، تقوم ضمنيًا الرجوع إلى التسلسل الهرمي المرئي الخاص به.

إنشاء ملف تعريف لأداء Visual

WPF يوفر مجموعة من أدوات إنشاء ملفات تعريف الخاصة بالأداء التي تتيح إمكانية تحليل سلوك وقت التشغيل الخاص بالتطبيق الخاص بك وتحديد أنواع تحسينات الأداء التي يمكنك تطبيقها. أداة معرف Visual توفر طريقة عرض رسومية ، غنية من بيانات الأداء بواسطة التعيين المباشر إلى الشجرة المرئية الخاصة بالتطبيق. في هذه اللقطة ، يعطيك مقطع CPU Usage الخاص بمنشئ ملفات التعريف للــVisual تنظيم دقيق لاستخدام الكائن الخاص بخدمات WPF مثل التقديم و التخطيط.

إخراج عرض محلل مرئي

للحصول على المزيد من المعلومات حول أدوات الأداء WPF ، راجع WPFPerf.exe (إنشاء ملفات تعريف أدوات WPF الأداء).

سلوك التقديم المرئي

WPF يقدم العديد من الميزات التي تؤثر سلوك التقديم الخاص بالكائنات المرئية: وضع الرسومات المحفوظ ، رسومات المتجه ، و الرسومات المستقلة الخاصة بالجهاز.

رسومات الوضع المحفوظ

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

الرسم التخطيطي لتسلسل عرض Win32

في تباين ، يستخدم WPF نظام الوضع المحفوظ . وهذا يعني إن كائنات التطبيق التي تحتوي على مظهر مرئي تقوم بتعريف مجموعة من بيانات الرسم المتسلسل. وقتما يتم تعريف بيانات الرسم ، النظام يكون مسؤولاً عن الاستجابة على كافة طلبات اعادة الرسم لتقديم كائنات التطبيق بعد ذلك. حتى في وقت التشغيل، يمكنك تعديل أو إنشاء كائنات التطبيق ، و الاستمرار في الاعتماد على نظام للاستجابة على طلبات الرسم . الطاقة في نظام رسومات الوضع المحفوظ هو إن معلومات الرسم تكون دوماً في حالة متسلسلة بواسطة التطبيق ولكن تقديم مسؤولية متروك للنظام. يُظهر الرسم التخطيطي التالي كيفية اعتماد التطبيق على WPF للاستجابة على طلبات الرسم .

الرسم التخطيطي لتسلسل عرض WPF

اعادة الرسم الذكي

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

رسوم المتجهات

WPF يستخدم رسومات الموجه كـتنسيق البيانات المقدمة الخاصة به . رسومات المتجه — التي تتضمن رسومات موجه قابلة للتحجيم (SVG) "و" ملفات التعريف Windows (.wmf) "و" خطوط تروتايب — تقوم بتخزين البيانات المقدمة و إرسالها كقائمة من الإرشادات التي تصف كيفية إعادة إنشاء صورة باستخدام أوليات الرسومات. على سبيل المثال، خطوط تروتايب هي خطوط مخطط تفصيلي تصف مجموعة من الخطوط والمنحنيات و الأوامر بدلاً من صفيف من البكسل. إحدى الفوائد الرئيسية لرسومات الموجه هي القدرة على التحجيم إلى أي حجم أو دقة.

بعكس رسومات الموجه ، فإن رسومات نقطية تقوم بتخزين بيانات مقدمة كـ تمثيل بكسل بكسل لصورة معاد تقديمها بدقة معينة . اختلافات رئيسية بين تنسيقات رسومات المتجه "و" الصور النقطية هي الدقة لصورة المصدر الأصلي . على سبيل المثال، عند تعديل حجم صورة المصدر ، تقوم أنظمة الرسومات النقطية بتمديد الصورة، بينما لأنظمة رسومات المتجه تحجيم الصورة مع الاحتفاظ بدقة الصورة.

يبين الرسم التوضيحي التالي صورة المصدر التي قد تم تغيير حجمها إلى 300 %. لاحظ الشوائب التي تظهر عند تكبير صورة المصدر كـ صورة رسومات نقطية بدلاً من تحجيمها كصورة رسومات متجه.

الاختلافات بين رسومات خط المسح وخط المتجه

تقوم العلامات التالية بإظهار عنصري Path معرفين. يستخدم العنصر الثاني ScaleTransform لتغيير حجم إرشادات الرسم الخاص بالعنصر الأول إلى 300 %. ولاحظ إن إرشادات الرسم في عناصر Path تبقى بدون تغيير.

<Path
  Data="M10,100 C 60,0 100,200 150,100 z"
  Fill="{StaticResource linearGradientBackground}"
  Stroke="Black"
  StrokeThickness="2" />

<Path
  Data="M10,100 C 60,0 100,200 150,100 z"
  Fill="{StaticResource linearGradientBackground}"
  Stroke="Black"
  StrokeThickness="2" >
  <Path.RenderTransform>
    <ScaleTransform ScaleX="3.0" ScaleY="3.0" />
  </Path.RenderTransform>
</Path>

حول دقة و رسومات الأجهزة المستقلة.

هناك نوعان من عوامل النظام اللتان تقومان بتحديد حجم النص والرسومات على الشاشة: دقة و DPI. الدقة تصف عدد وحدات البكسل التي تظهر على الشاشة . كلما تزداد الدقة ، تصغر وحدات الدقة ، تتسبب في ظهور النص والرسومات بشكل أصغر. سيظهر رسم معروض على جهاز عرض تم تعيينه إلى 1024 × 768 أصغر بكثير وقت تغيير الدقة إلى 1600 × 1200.

إعداد النظام الآخر، DPI ، تصف حجم بوصة الشاشة بالبكسل. معظم أنظمة Windows لديها DPI خاص بــ96 ، مما يعني أن يكون لديك شاشة البوصة 96 بكسل. زيادة إعداد DPI يجعل بوصة الشاشة أكبر ؛ إنقاص DPI يجعل شاشة البوصة أصغر. وهذا يعني أن بوصة الشاشة ليست نفسها البوصة الحقيقية; على معظم الأنظمة ، لا تكون كذلك . كلما تقوم بزيادة DPI ، فإن النصوص و الرسومات المدركين لـ DPI تصبح أكبر لأنه تم زيادة حجم بوصة الشاشة. الزيادة في DPI يمكنه جعل النص أسهل للقراءة, وخاصة عند الدقة العالية.

ليست كل التطبيقات مدركة للــ DPI: يستخدم البعض أجهزة البكسل كوحدة القياس الأساسية; التغيير في نظام DPI ليس له أي تأثير على هذه التطبيقات. العديد من التطبيقات الأخرى تستخدم وحدات مدركة لـ DPI لوصف أحجام الخطوط ولكن تستخدم بكسل لوصف كل شيء آخر. جعل الــ DPI صغير جداً أو كبير جداً يمكن أن يؤدي إلى مشاكل في التخطيط لهذه التطبيقات لأن نصوص التطبيقات تقوم بالتحجيم مع إعداد DPI الخاص بالنظام ولكن تطبيقات UI لا تقوم بذلك. لقد تم حل هذه المشكلة للتطبيقات التي تم تطويرها باستخدام WPF.

WPF يدعم التحجيم التلقائي باستخدام بكسل مستقلة الخاص بالجهاز كوحدة القياس الأساسية الخاصة به بدلاً من وحدات البكسل الأجهزة الأساسية; الرسومات و النصوص المقاسة بشكل صحيح بدون أي عمل إضافي من مطور التطبيق. يبين الرسم التوضيحي التالي مثال حول كيفية ظهور نصوص و رسومات WPF في اعدادات DPI المختلفة .

الرسومات والنص بإعدادات DPI مختلفة

فئة VisualTreeHelper

الفئة VisualTreeHelper هي فئة مساعدة ثابتة توفر وظيفة من المستوى المنخفض للبرمجة في مستوى الكائن المرئي ، والذي يكون مفيداً في وحدات السيناريو المحددة جداً مثل تطوير عناصر تحكم مخصصة ذات أداء عالي. في معظم الحالات ، كائنات اطار العمل WPF العالية المستوى , مثل Canvas و TextBlock ، تقدم مرونة أعظم و سهولة في الاستخدام.

اختبار عدد مرات الدخول :

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

للحصول على مزيد من المعلومات حول اختبار عدد مرات الدخول ، راجع اختبار الدخول إلى الطبقة المرئية.

التعداد في الشجرة المرئية

توفر فئة VisualTreeHelper وظائف تعداد أعضاء الشجرة المرئية . لاسترداد أصل ، قم باستدعاء اسلوب GetParent . لاسترداد عنصر تابع أو تابع مباشر للكائن المرئي ، قم باستدعاء الأسلوب GetChild . يقوم هذا الأسلوب بإرجاع تابع Visual للأصل في الفهرس المحدد.

المثال التالي يعرض كيفية تعداد كافة التوابع للكائن مرئي الذي هو التقنية التي قد تحتاجها للاستخدام إذا رغبت في إجراء تسلسل لكافة المعلومات المعروضة للتسلسل الهرمي للكائن المرئي.

        ' Enumerate all the descendants of the visual object.
        Public Shared Sub EnumVisual(ByVal myVisual As Visual)
            For i As Integer = 0 To VisualTreeHelper.GetChildrenCount(myVisual) - 1
                ' Retrieve child visual at specified index value.
                Dim childVisual As Visual = CType(VisualTreeHelper.GetChild(myVisual, i), Visual)

                ' Do processing of the child visual object.

                ' Enumerate children of the child visual object.
                EnumVisual(childVisual)
            Next i
        End Sub

// Enumerate all the descendants of the visual object.
static public void EnumVisual(Visual myVisual)
{
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(myVisual); i++)
    {
        // Retrieve child visual at specified index value.
        Visual childVisual = (Visual)VisualTreeHelper.GetChild(myVisual, i);

        // Do processing of the child visual object.

        // Enumerate children of the child visual object.
        EnumVisual(childVisual);
    }
}

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

توفر الفئة VisualTreeHelper أساليب لإرجاع مستطيل الإحاطة للكائنات المرئية. يمكنك العودة إلى مستطيل الإحاطة للكائن المرئي بواسطة استدعاء GetContentBounds. يمكنك العودة إلى مستطيل الإحاطة لكافة التوابع للكائن المرئي بما في ذلك الكائن المرئي نفسه عن طريق استدعاء GetDescendantBounds. تظهر التعليمات البرمجية التالية كيفية حساب مستطيل إحاطة خاص بكائن مرئي و كافة التوابع الخاصة به.

            ' Return the bounding rectangle of the parent visual object and all of its descendants.
            Dim rectBounds As Rect = VisualTreeHelper.GetDescendantBounds(parentVisual)

// Return the bounding rectangle of the parent visual object and all of its descendants.
Rect rectBounds = VisualTreeHelper.GetDescendantBounds(parentVisual);