مشاركة عبر

تخطيط النظام

  • مقالة

يصف هذا الموضوع Windows Presentation Foundation (WPF) تخطيط النظام. فهم كيفية ووقت حدوث العمليات الحسابية ضروري لإنشاء واجهات المستخدم في WPF.

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

  • مربعات إحاطة العنصر

  • نظام التخطيط

  • قياس وترتيب التوابع

  • لوحة العناصر و سلوك التخطيط المخصص

  • اعتبارات أداء التخطيط

  • رسم sub-pixel هندسيا و تقريب التخطيط.

  • وماذا بعد

مربعات إحاطة العنصر

عند التفكير في التخطيط في WPF, من المهم فهم مربع الإحاطة الذي يحيط كافة العناصر. كل FrameworkElement المستهلكة في تخطيط النظام يمكن اعتبار أنها مستطيلات مشقوبة في التخطيط. فئة LayoutInformation تقوم بإرجاع الحدود الخاصة بتحديد مكان الخطيط الخاص بالعنصر, أو الشقب. يتم تحديد حجم المستطيل بواسطة حساب مساحة الشاشة المتوفرة، و حجم القيود، و الخصائص المعينة للتخطيط (مثل الهوامش والمسافات البادئة) والسلوك الفردي للعنصر Panel الأصلى. لمعالجة هذه البيانات ، نظام التخطيط قادراً على حساب موضع كافة التوابع الخاصة ب Panel معين. من المهم تذكر أن تغيير الحجم الصفات المعرفة فى العنصر الأصل مثل Border ،تؤثر فى التوابع الخاصة به.

يبين الرسم التوضيحي التالي تخطيط بسيط.

شبكة نموذجية، لم يتم تركيب مربع إحاطة.

هذا التخطيط يمكن الحصول عليه باستخدام التالي XAML.

<Grid Name="myGrid" Background="LightSteelBlue" Height="150">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="250"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition />
    <RowDefinition />
  </Grid.RowDefinitions>
  <TextBlock Name="txt1" Margin="5" FontSize="16" FontFamily="Verdana" Grid.Column="0" Grid.Row="0">Hello World!</TextBlock>
  <Button Click="getLayoutSlot1" Width="125" Height="25" Grid.Column="0" Grid.Row="1">Show Bounding Box</Button>
  <TextBlock Name="txt2" Grid.Column="1" Grid.Row="2"/>
</Grid>

عنصر واحد من TextBlockيتم استضافته داخل Grid. فى حين أن النص يملأ فقط الزاوية العلوية اليسرى للعمود الأول،المساحة المخصصة لـ TextBlock فعلياً أكبر. مربع إحاطة أية FrameworkElementيمكن استرداده باستخدام طريقة GetLayoutSlot. يبين التوضيح التالي مربع الإحاطة الخاص بعنصر TextBlock.

يُعد مربع النص الخاص بكتلة النص مرئيًا الآن.

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

فتحة التخطيط الخاصة ب TextBlock يتم ترجمتها إلى Path باستخدام طريقة GetLayoutSlot. يمكن أن تكون هذه التقنية مفيدة لعرض مربع الإحاطة الخاص بالعنصر.

Private Sub getLayoutSlot1(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim myRectangleGeometry As New RectangleGeometry
    myRectangleGeometry.Rect = LayoutInformation.GetLayoutSlot(txt1)
    Dim myGeometryDrawing As New GeometryDrawing
    Dim myPath As New Path
    myPath.Data = myRectangleGeometry
    myPath.Stroke = Brushes.LightGoldenrodYellow
    myPath.StrokeThickness = 5
    Grid.SetColumn(myPath, 0)
    Grid.SetRow(myPath, 0)
    myGrid.Children.Add(myPath)
    txt2.Text = "LayoutSlot is equal to " + LayoutInformation.GetLayoutSlot(txt1).ToString()
End Sub

private void getLayoutSlot1(object sender, System.Windows.RoutedEventArgs e)
{
    RectangleGeometry myRectangleGeometry = new RectangleGeometry();
    myRectangleGeometry.Rect = LayoutInformation.GetLayoutSlot(txt1);
    GeometryDrawing myGeometryDrawing = new GeometryDrawing();
    Path myPath = new Path();
    myPath.Data = myRectangleGeometry;
    myPath.Stroke = Brushes.LightGoldenrodYellow;
    myPath.StrokeThickness = 5;
    Grid.SetColumn(myPath, 0);
    Grid.SetRow(myPath, 0);
    myGrid.Children.Add(myPath);
    txt2.Text = "LayoutSlot is equal to " + LayoutInformation.GetLayoutSlot(txt1).ToString();
}

نظام التخطيط

في أبسط الصور، التخطيط هو نظام عودي يؤدي إلى تغيير حجم العنصر، أو وضعه ، أو رسم العنصر على الشاشة. وبشكل أكثر دقة، يصف التخطيط عملية قياس وترتيب أعضاء عناصر مجموعة Panel Children . التخطيط عبارة عن عملية مركزة. كلما زادت مجموعة Children، زاد عدد العمليات الحسابية التي يجب القيام بها. يمكن أيضاً أن يتم التعقيد استناداً إلى سلوك التخطيط المعرّفة من قِبل عناصر Panel التي تملك المجموعة. Panelبسيط نسبيًا, مثل Canvas ، يمكن أن يكون لديه أداء أفضل بشكل ملحوظ من واحد أكثرتعقيدا Panel, مثل Grid.

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

  1. كائن UIElement التابع يبدأ عملية التخطيط بقياس الخصائص الأساسية الخاصة به.

  2. خصائص تغيير الحجم المُعرّفة على FrameworkElement يتم تقييمها, مثل Width ، Height ، و Margin.

  3. منطق Panel- المعين يتم تطبيقه مثل توجيه أو تكديسDock Orientation.

  4. يتم ترتيب المحتوى بعد قياس كافة التوابع.

  5. مجموعة Childrenيتم رسمه على الشاشة.

  6. يتم استدعاء العملية مرة أخرى إذا تم إضافة Children إضافية إلى المجموعة LayoutTransform يتم تطبيقه، أو يتم استدعاء أسلوبUpdateLayout.

هذة العملية و كيفية استدعاءها معرفة بالتفصيل في الأقسام التالية.

قياس وترتيب التوابع

يكمل نظام التخطيط مسارين لكل عضو من مجموعة Children مسار قياس ومسار ترتيب. كل تابع Panel يوفر أساليب MeasureOverride و ArrangeOverride الخاصة به لتحقيق سلوك تخطيط محدد.

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

أولا ، خصائص الحجم الأصلى الخاص ب UIElement يتم تقييمها, مثل Clip و Visibility. هذا ينشئ قيمة باسم constraintSize التي يتم تمريرها إلى MeasureCore.

ثانياً ، خصائص إطار عمل المعرفة على FrameworkElement تتم معالجتها، مما يؤثر فى قيمة constraintSize. هذه الخصائص بشكل عام تصفمميزة التحجيم UIElementالأساسى , مثل به Height ، Width ، Margin ، و Style. كل من هذه الخصائص يمكن تغيير المسافة التي هو الضروري dهوplay العنصر. MeasureOverrideهو ثم استدعاء معconstraintSizeكمعلمة.

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

يوجد اختلاف بين owhzw Height و Width و ActualHeight و ActualWidth.على سبيل المثال، خاصية ActualHeight هى قيمة محسوبة على أساس ارتفاع المدخالات الأخرى و نظام التخطيط.يتم تعيين القيمة من قبل نظام التخطيط نفسه، إستنادا إلى مسار التقديم الفعلى، وبالتالي يمكن أن يتأخر قليلاً خلف مجموعة قيم الخصائص، مثل Height و التي تكون أساس تغيير المدخلات.

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

الهدف النهائى للمسار القياسى للتابع هو تحديد DesiredSize الخاص به، و الذي يحدث أثناء المكالمة MeasureCore . قيمة DesiredSize يتم تخزينها من قبل Measure للاستخدام أثناء مسار ترتيب المحتوى.

مسار الترتيب يبدأ من مكالمة استدعاء أسلوب Arrange . أثناء تمرير الترتيب، العنصر الأصل Panel يقوم بإنشاء مستطيل يمثل حدود عنصر تابع. يتم تمرير هذه القيمة إلى أسلوب ArrangeCore للمعالجة.

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

لوحة العناصر و سلوك التخطيط المخصص

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

يلخص الجدول التالي التخطيط المتوفر لعناصر Panel.

اسم اللوحة

الوصف

Canvas

يعرّف منطقة و التي يمكنك من خلالها بشكل صريح وضع العناصر التابعة بواسطة إحداثيات نسبية لمنطة Canvas .

DockPanel

يعرّف منطقة و التى يمكن من خلالها ترتيب العناصر التابعة إما أفقيا أو عمودياً، نسبة إلى بعضها البعض.

Grid

يعرّف منطقة شبكية مرنة تتكون من الصفوف والأعمدة.

StackPanel

يرتب العناصر التابعة في سطر واحد يمكن أن يكون موجها أفقياً أو عمودياً.

VirtualizingPanel

يوفر إطار عمل لعناصر Panel التى تظهر مجموعة البيانات التابعة الخاصة بها. هذه فئة مجردة.

WrapPanel

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

بالنسبة للتطبيقات التي تتطلب تخطيط من غير الممكن باستخدام أي من العناصر المعرفة مسبقاً Panel يمكن الحصول على سلوكيات التخطيط المخصصة بواسطة الوراثة من Panel و تجاوز MeasureOverride و أساليب ArrangeOverride . على سبيل المثال، راجع نموذج لوحة شعاعى مخصص .

اعتبارات أداء التخطيط

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

  • يجب أن تكون على علم بأي التغييرات فى قيمة الخواص سيفرض تحديث عودي بواسطة نظام التخطيط.

    خصائص التبعيه قيمها يؤدي النظام تخطيط إلى يمكن تهيئة بأنها ذات علامات العامة. AffectsMeasure and AffectsArrange provide useful clues as to which property value changes will force a recursive update by the layout system. بشكل عام، أي خاصية يمكنها التأثير على حجم مربع إحاطة عنصر ما يجب أن تحتوي على علامة AffectsMeasure معينة صواب. لمزيد من المعلومات، راجع نظرة عامة حول خصائص التبعية.

  • بقدر الإمكان، استخدم RenderTransform بدلاً من LayoutTransform.

    LayoutTransform يمكن أن تكون طريقة مفيدة جداً للتأثير على محتوى واجهة المستخدم (UI). ومع ذلك، إذا لم يكن لدى تأثير التحويل التأثير على موضع عناصر غير ذلك، فإنه هو المثالي باستخدام RenderTransformبدلاً من ذلك، لأن RenderTransformلا استدعاء النظام تخطيط. LayoutTransformيطبق التحويل الخاصة بها ويفرض على تحديث تخطيط متداخل إلى حساب الموضع الجديد للعنصر المتأثر.

  • تجنب استدعاءات الغير ضرورية لل UpdateLayout.

    أسلوب UpdateLayout يفرض تحديث متداخل للتخطيط، وتحديثها بشكل متكرر غير ضرورى. ما لم تكن متأكداً من أن تحديث كامل مطلوب، إعتمد على نظام التخطيط لاستدعاء هذا الأسلوب.

  • عند العمل بواسطة مجموعة كبيرة من Children، خذ بعين الاعتبار استخدام VirtualizingStackPanel بدلاً من StackPanelالعادية.

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

رسم sub-pixel هندسيا و تقريب التخطيط.

نظم رسومات WPF تستخدم وحدات مستقلة عن الأجهزة لتمكين دقة و استقلال الجهاز. كل بكسل مستقلة خاصة بالجهاز تحجم نفسها تلقائياً مع إعدادات نظام نقطة لكل بوصة (dpi). هذا يوفر تطبيقات WPF للتحجيم المناسب لـل dpi (نقطة لكل بوصة) المختلفة و يجعل التطبيق تلقائياً dpi (نقطة لكل بوصة) - علم.

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

يتم تعطيل تقريب التخطيط بشكل افتراضي. لتمكين تقريب تخطيط، قم بتعيين خاصية UseLayoutRounding إلى true على أي FrameworkElement. لأنها خاصية تبعية، سيتم نشر القيمة إلى كافة التوابع في الشجرة المرئية. لتمكين تقريب التخطيط للUI بأكمله ،مجموعة UseLayoutRounding إلى true على الحاوية الأساسية. على سبيل المثال ، راجع UseLayoutRounding.

وماذا بعد

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

راجع أيضًا:

المرجع

FrameworkElement

UIElement

المبادئ

نظرة عامة على اللوحات

نظرة عامة حول المحاذاة , هوامش و ترك المساحة

أمثلية الأداء: التصميم و التخطيط