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

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

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

• فئات اللوحات

• العناصر المشتركة فى اللوحة

• عناصر اللوحة المشتقة

• لوحات واجهة المستخدم

• عناصر اللوحة المتداخلة

• عناصر اللوحة المخصصة

• دعم التعريب/التعميم

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

فئات اللوحات

Panel هى الفئة الأساسية لكافة العناصر التي توفر دعم التخطيط فيWindows Presentation Foundation (WPF). عناصر Panel المشتقة يتم استخدامها عناصر لوضع وترتيب العناصر في Extensible Application Markup Language (XAML) التعليمات البرمجية.

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

عناصر اللوحة المشتركة

كافة عناصرPanel تعتمد تغيير حجم أساسي و خصائص تحديد الموضع المعرّفة من قِبل FrameworkElement ، بما في ذلك Height ، Width ، HorizontalAlignment ، VerticalAlignment ، Margin ، و LayoutTransform. للحصول على معلومات إضافية حول خصائص تحديد الموضع المعرّفة من قِبل FrameworkElement راجع نظرة عامة حول المحاذاة , هوامش و ترك المساحة.

Panel تعرض خصائص إضافية لها أهمية أساسية في فهم واستخدام التخطيط. The Background خاصية هو used إلى fill the مساحة between the boundaries of a derived لوحة عنصر مع a Brush. Children represents the فرع مجموعة of عناصر that the Panel هو comprised of. InternalChildren represents the محتوى of the Children مجموعة plus those الأعضاء generated بواسطة بيانات ربط. كلاهما يتكون من UIElementCollection للعناصر التابعة المستضافة ضمن Panelالأصل .

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

Panel يعرّف أيضا أسلوبOnRender الذي يمكن استخدامه لتجاوز سلوك العرض التقديمي الافتراضي لPanel.

الخصائص المرفقة

عناصر اللوحة المشتقة تستخدم بصورة مكثفة خصائص المرفقة . الخاصية المرفقة هى نموذج متخصص الخاصية التبعية لا يحتوي هذا خاصية "المجمّع" وقت تشغيل اللغة العامة (CLR) الاصطلاحية . الخصائص المرفقة لها بناء جملة مخصص في Extensible Application Markup Language (XAML), والذي من الممكن أن يكون مشاهداً في العديد من الأمثلة اتبع تلك.

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

عناصر اللوحة المشتقة

العديد من الكائنات تشتق من Panel ، ولكن ليس كافتهم مخصصة للاستخدام كـ موفري تخطيط جذرى. يوجد ست فئات معرفة للوحة ( Canvas ، DockPanel ، Grid ، StackPanel ، VirtualizingStackPanel ، و WrapPanel) التي تم تصميمها خصيصاً لإنشاء التطبيق واجهة المستخدم.

كل لوحة تقوم بتغليف الوظائف الخاصة الخاصة بها كما هو موضح في الجدول التالي.

اسم العنصر	لوحة UI ؟	الوصف
Canvas	نعم	يعرّف منطقة و التي يمكنك من خلالها بشكل صريح وضع العناصر التابعة بواسطة إحداثيات نسبية لمنطة Canvas .
DockPanel	نعم	يعرّف منطقة و التى يمكن من خلالها ترتيب العناصر التابعة إما أفقيا أو عمودياً، نسبة إلى بعضها البعض.
Grid	نعم	يعرّف منطقة شبكية مرنة تتكون من الأعمدة و الصفوف. العناصر التابعة ل Grid يمكن وضعها بدقة باستخدام خاصية Margin .
StackPanel	نعم	يرتب العناصر التابعة في سطر واحد يمكن أن يكون موجها أفقياً أو عمودياً.
TabPanel	لا	يعالج تخطيط أزرار التبويب في TabControl.
ToolBarOverflowPanel	لا	يرتيب المحتوى داخل عنصر التحكمToolBar .
UniformGrid	لا	UniformGrid يُستخدم لترتيب التوابع في شبكة بحجم خلية ثابت.
VirtualizingPanel	لا	يوفر فئة أساسية للوحات التى يمكن "تخيل"مجموعة التوابع الخاصة بهم.
VirtualizingStackPanel	نعم	يرتيب و يصور المحتوى على سطر واحد موجه أفقياً أو عمودياً.
WrapPanel	نعم	WrapPanelتعين موضع العناصر التابعة في مواضع متسلسلة من اليسار إلى اليمين ، فاصلاً المحتوى إلى السطر التالي عند حافة المربع الذي يحتوي على الصفحة. الترتيب اللاحق يحدث بشكل تسلسلي من أعلى إلى أسفل أو اليسار إلى اليمين استناداً إلى قيمة الخاصيةOrientation .

لوحات واجهة المستخدم

تتوفر فئات لوحة الستة في WPF التي تم تحسينها صواب يعتمد سيناريوهاتواجهة المستخدم : Canvas، DockPanel، Grid، StackPanel، VirtualizingStackPanel، و WrapPanel عناصر اللوحة هذه سهلة الاستخدام، و متنوعة و قابلة للتوسعة كافية لمعظم تطبيقات.

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

اسم اللوحة	البعد-x	البعد-y
Canvas	مقيدة بمحتوى	مقيدة بمحتوى
DockPanel	مقيدة	مقيدة
StackPanel (عمودي التجاه)	مقيدة	مقيدة بمحتوى
StackPanel (اتجاه أفقي)	مقيدة بمحتوى	مقيدة
Grid	مقيدة	مقيدة ، فيما عدا في الحالات حيث Auto تنطبق على الصفوف والأعمدة
WrapPanel	مقيدة بمحتوى	مقيدة بمحتوى

كوصف أكثر تفصيلاً وأمثلة لاستخدام لكل من هذه العناصر يمكن العثور علىه بالأسفل.

لوحة قماشية

يمكّن عنصرCanvas تحديد مستوى المحتوى وفقاً لإحداثيات x- و y مطلقة . يمكن سحب العناصر في موقع فريد; أو, إذا كانت العناصر تشغل نفس إحداثيات , يحدد الترتيب الذي تظهر به في العلامات الترتيب الذى يتم به السحب.

Canvas توفر دعم التخطيط الأكثر مرونة لأيPanel. يتم استخدام خصائص العرض والارتفاع لتعريف ناحية اللوحة القماشية ثم يتم تعيين عناصر الداخل فى إحداثيات مطلقة نسبياً لمنطقة الأصل Canvas. أربعة خصائص مرفقة Canvas.Left ، Canvas.Top ، Canvas.Right و Canvas.Bottom ، تسمح بالتحكم بشكل جيد في موضع الكائن داخل Canvas ، سامحاً للمطور وضع وترتيب العناصر بدقة على الشاشة.

ClipToBounds داخل اللوحة القماشية

Canvas يمكنها وضع العناصر التابعة في أي موضع على الشاشة حتى في الإحداثيات التى تقع خارج المعرفة لهHeight وWidth. علاوة على ذلك، Canvas فإنها لا تتأثر بحجم التوابع الخاصة به. نتيجة لذلك، فمن الممكن لعنصر تابع الرسم على عناصر أخرى خارج مستطيل إحاطة الأصل Canvas. السلوك الافتراضي ل Canvas هو السماح للأطفال بأن يتم رسمهم خارج حدود الأصل Canvas. إذا كان هذا السلوك غير مرغوب فيه ، خاصية ClipToBounds يمكن تعيينها إلى true. This causes Canvas إلى clip إلى its own الحجم. Canvas هو the فقط تخطيط عنصر that allows children إلى be drawn outside its bounds.

يتم توضيح هذا السلوك رسومياً في نموذج مقارنة خصائص العرض.

تعريف و استخدام اللوحة القماشية

Canvas يمكن إنشاء مثيل لها ببساطة عن طريق استخدام Extensible Application Markup Language (XAML) أو التعليمات البرمجية. يوضح المثال التالي كيفية استخدام Canvas لوضع المحتوى مطلقاً. تنتج هذه التعليمات البرمجية ثلاثة مربعات 100 بكسل. المربع الأول أحمر، و جزئه العلوي الأيسر ( x, y ) تم تعيينها على أنها (0، 0). المربع الثاني أخضر، ويكون موضع جزئه العلوي الأيسرفى (100 ، 100) أسفل وإلى يمين المربع الأول. المربع الثالث أزرق، ويكون موضعه العلوي الأيسر (50, 50) وبالتالي يشغل الربع السفلي-الأيمن من المربع الأول "و" الربع العلوي الأيمن من الثاني. لأنه يتم وضع المربع الثالث الأخير ، يبدو أعلى المربعين الأخرىن — أي، تفترض الأجزاء المتراكبة لون المربع الثالث.

WindowTitle = "Canvas Sample"
'Create a Canvas as the root Panel
Dim myParentCanvas As New Canvas()
myParentCanvas.Width = 400
myParentCanvas.Height = 400

' Define child Canvas elements
Dim myCanvas1 As New Canvas()
myCanvas1.Background = Brushes.Red
myCanvas1.Height = 100
myCanvas1.Width = 100
Canvas.SetTop(myCanvas1, 0)
Canvas.SetLeft(myCanvas1, 0)

Dim myCanvas2 As New Canvas()
myCanvas2.Background = Brushes.Green
myCanvas2.Height = 100
myCanvas2.Width = 100
Canvas.SetTop(myCanvas2, 100)
Canvas.SetLeft(myCanvas2, 100)

Dim myCanvas3 As New Canvas()
myCanvas3.Background = Brushes.Blue
myCanvas3.Height = 100
myCanvas3.Width = 100
Canvas.SetTop(myCanvas3, 50)
Canvas.SetLeft(myCanvas3, 50)

' Add child elements to the Canvas' Children collection
myParentCanvas.Children.Add(myCanvas1)
myParentCanvas.Children.Add(myCanvas2)
myParentCanvas.Children.Add(myCanvas3)

' Add the parent Canvas as the Content of the Window Object
Me.Content = myParentCanvas

            // Create the application's main window
            mainWindow = new Window ();
            mainWindow.Title = "Canvas Sample";

            // Create the Canvas
            myParentCanvas = new Canvas();
            myParentCanvas.Width = 400;
            myParentCanvas.Height = 400;

            // Define child Canvas elements
            myCanvas1 = new Canvas();
            myCanvas1.Background = Brushes.Red;
            myCanvas1.Height = 100;
            myCanvas1.Width = 100;
            Canvas.SetTop(myCanvas1, 0);
            Canvas.SetLeft(myCanvas1, 0);

            myCanvas2 = new Canvas();
            myCanvas2.Background = Brushes.Green;
            myCanvas2.Height = 100;
            myCanvas2.Width = 100;
            Canvas.SetTop(myCanvas2, 100);
            Canvas.SetLeft(myCanvas2, 100);

            myCanvas3 = new Canvas();
            myCanvas3.Background = Brushes.Blue;
            myCanvas3.Height = 100;
            myCanvas3.Width = 100;
            Canvas.SetTop(myCanvas3, 50);
            Canvas.SetLeft(myCanvas3, 50);

            // Add child elements to the Canvas' Children collection
            myParentCanvas.Children.Add(myCanvas1);
            myParentCanvas.Children.Add(myCanvas2);
            myParentCanvas.Children.Add(myCanvas3);

            // Add the parent Canvas as the Content of the Window Object
            mainWindow.Content = myParentCanvas;
            mainWindow.Show ();

<Page WindowTitle="Canvas Sample" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <Canvas Height="400" Width="400">
    <Canvas Height="100" Width="100" Top="0" Left="0" Background="Red"/>
    <Canvas Height="100" Width="100" Top="100" Left="100" Background="Green"/>
    <Canvas Height="100" Width="100" Top="50" Left="50" Background="Blue"/>
  </Canvas>
</Page>

يعطي التطبيق المترجم واجهة المستخدم جديداً مثل هذا.

DockPanel

عنصر DockPanel يستخدم خاصية DockPanel.Dock المرفقة كما هى في عناصر المحتوى التابعة لوضع المحتوى طول حواف الحاوية. عند تعيينDockPanel.Dock إلى Top أو Bottom ، تعين موضع العناصر التابعة أعلى أو أسفل بعضها البعض. عند DockPanel.Dock تعيين صواب Left أو Right ، تعيين موضع العناصر التابعة صواب يسار أو يمين بعضها البعض. تحدد خاصيةLastChildFill موضع العنصر النهائي المضاف كاتبع ل DockPanel.

يمكنك استخدام DockPanel لوضع مجموعة من عناصر التحكم المرتبطة مثل مجموعة من الأزرار. بشكل بديل، يمكنك استخدامه لإنشاء "paned" واجهة المستخدم ، مشابهة لتلك التي تم العثور عليها في برنامج Microsoft Outlook.

تغيير حجم المحتوى

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

LastChildFill

افتراضياً، التابع الأخيرلعنصر DockPanel سيقوم "بتعبئة"المساحة الباقية الغير مخصصة . إذا لم يتم هذا السلوك مطلوباً، عين خاصية LastChildFill إلى false.

تعريف و استخدام DockPanel

يوضح المثال التالي كيفية تقسيم المساحة باستخدام DockPanel. خمس عناصرBorder تتم إضافتها كعلامات تابعة للأصل DockPanel. يستخدم كل منها خاصية تحديد وضع مختلفة DockPanel إلى مساحة القسم. العنصر النهائي يقوم "بتعبئة" المساحة غير مخصصة المتبقية.

WindowTitle = "DockPanel Sample"
'Create a DockPanel as the root Panel
Dim myDockPanel As New DockPanel()
myDockPanel.LastChildFill = True

' Define the child content
Dim myBorder1 As New Border()
myBorder1.Height = 25
myBorder1.Background = Brushes.SkyBlue
myBorder1.BorderBrush = Brushes.Black
myBorder1.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder1, Dock.Top)
Dim myTextBlock1 As New TextBlock()
myTextBlock1.Foreground = Brushes.Black
myTextBlock1.Text = "Dock = Top"
myBorder1.Child = myTextBlock1

Dim myBorder2 As New Border()
myBorder2.Height = 25
myBorder2.Background = Brushes.SkyBlue
myBorder2.BorderBrush = Brushes.Black
myBorder2.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder2, Dock.Top)
Dim myTextBlock2 As New TextBlock()
myTextBlock2.Foreground = Brushes.Black
myTextBlock2.Text = "Dock = Top"
myBorder2.Child = myTextBlock2

Dim myBorder3 As New Border()
myBorder3.Height = 25
myBorder3.Background = Brushes.LemonChiffon
myBorder3.BorderBrush = Brushes.Black
myBorder3.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder3, Dock.Bottom)
Dim myTextBlock3 As New TextBlock()
myTextBlock3.Foreground = Brushes.Black
myTextBlock3.Text = "Dock = Bottom"
myBorder3.Child = myTextBlock3

Dim myBorder4 As New Border()
myBorder4.Width = 200
myBorder4.Background = Brushes.PaleGreen
myBorder4.BorderBrush = Brushes.Black
myBorder4.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder4, Dock.Left)
Dim myTextBlock4 As New TextBlock()
myTextBlock4.Foreground = Brushes.Black
myTextBlock4.Text = "Dock = Left"
myBorder4.Child = myTextBlock4

Dim myBorder5 As New Border()
myBorder5.Background = Brushes.White
myBorder5.BorderBrush = Brushes.Black
myBorder5.BorderThickness = New Thickness(1)
Dim myTextBlock5 As New TextBlock()
myTextBlock5.Foreground = Brushes.Black
myTextBlock5.Text = "This content will Fill the remaining space"
myBorder5.Child = myTextBlock5

' Add child elements to the DockPanel Children collection
myDockPanel.Children.Add(myBorder1)
myDockPanel.Children.Add(myBorder2)
myDockPanel.Children.Add(myBorder3)
myDockPanel.Children.Add(myBorder4)
myDockPanel.Children.Add(myBorder5)
Me.Content = myDockPanel

            // Create the application's main window
            mainWindow = new Window ();
            mainWindow.Title = "DockPanel Sample";

            // Create the DockPanel
            DockPanel myDockPanel = new DockPanel();
            myDockPanel.LastChildFill = true;

            // Define the child content
            Border myBorder1 = new Border();
            myBorder1.Height = 25;
            myBorder1.Background = Brushes.SkyBlue;
            myBorder1.BorderBrush = Brushes.Black;
            myBorder1.BorderThickness = new Thickness(1);
            DockPanel.SetDock(myBorder1, Dock.Top);
            TextBlock myTextBlock1 = new TextBlock();
            myTextBlock1.Foreground = Brushes.Black;
            myTextBlock1.Text = "Dock = Top";
            myBorder1.Child = myTextBlock1;

            Border myBorder2 = new Border();
            myBorder2.Height = 25;
            myBorder2.Background = Brushes.SkyBlue;
            myBorder2.BorderBrush = Brushes.Black;
            myBorder2.BorderThickness = new Thickness(1);
            DockPanel.SetDock(myBorder2, Dock.Top);
            TextBlock myTextBlock2 = new TextBlock();
            myTextBlock2.Foreground = Brushes.Black;
            myTextBlock2.Text = "Dock = Top";
            myBorder2.Child = myTextBlock2;

            Border myBorder3 = new Border();
            myBorder3.Height = 25;
            myBorder3.Background = Brushes.LemonChiffon;
            myBorder3.BorderBrush = Brushes.Black;
            myBorder3.BorderThickness = new Thickness(1);
            DockPanel.SetDock(myBorder3, Dock.Bottom);
            TextBlock myTextBlock3 = new TextBlock();
            myTextBlock3.Foreground = Brushes.Black;
            myTextBlock3.Text = "Dock = Bottom";
            myBorder3.Child = myTextBlock3;

            Border myBorder4 = new Border();
            myBorder4.Width = 200;
            myBorder4.Background = Brushes.PaleGreen;
            myBorder4.BorderBrush = Brushes.Black;
            myBorder4.BorderThickness = new Thickness(1);
            DockPanel.SetDock(myBorder4, Dock.Left);
            TextBlock myTextBlock4 = new TextBlock();
            myTextBlock4.Foreground = Brushes.Black;
            myTextBlock4.Text = "Dock = Left";
            myBorder4.Child = myTextBlock4;

            Border myBorder5 = new Border();
            myBorder5.Background = Brushes.White;
            myBorder5.BorderBrush = Brushes.Black;
            myBorder5.BorderThickness = new Thickness(1);
            TextBlock myTextBlock5 = new TextBlock();
            myTextBlock5.Foreground = Brushes.Black;
            myTextBlock5.Text = "This content will Fill the remaining space";
            myBorder5.Child = myTextBlock5;


            // Add child elements to the DockPanel Children collection
            myDockPanel.Children.Add(myBorder1);
            myDockPanel.Children.Add(myBorder2);
            myDockPanel.Children.Add(myBorder3);
            myDockPanel.Children.Add(myBorder4);
            myDockPanel.Children.Add(myBorder5);

            // Add the parent Canvas as the Content of the Window Object
            mainWindow.Content = myDockPanel;
            mainWindow.Show ();

         // Create the application's main window
         mainWindow = gcnew Window();
         mainWindow->Title = "DockPanel Sample";

         // Create the DockPanel
         DockPanel^ myDockPanel = gcnew DockPanel();
         myDockPanel->LastChildFill = true;

         // Define the child content
         Border^ myBorder1 = gcnew Border();
         myBorder1->Height = 25;
         myBorder1->Background = Brushes::SkyBlue;
         myBorder1->BorderBrush = Brushes::Black;
         myBorder1->BorderThickness = Thickness(1);
         DockPanel::SetDock(myBorder1, Dock::Top);
         TextBlock^ myTextBlock1 = gcnew TextBlock();
         myTextBlock1->Foreground = Brushes::Black;
         myTextBlock1->Text = "Dock = Top";
         myBorder1->Child = myTextBlock1;

         Border^ myBorder2 = gcnew Border();
         myBorder2->Height = 25;
         myBorder2->Background = Brushes::SkyBlue;
         myBorder2->BorderBrush = Brushes::Black;
         myBorder2->BorderThickness = Thickness(1);
         DockPanel::SetDock(myBorder2, Dock::Top);
         TextBlock^ myTextBlock2 = gcnew TextBlock();
         myTextBlock2->Foreground = Brushes::Black;
         myTextBlock2->Text = "Dock = Top";
         myBorder2->Child = myTextBlock2;

         Border^ myBorder3 = gcnew Border();
         myBorder3->Height = 25;
         myBorder3->Background = Brushes::LemonChiffon;
         myBorder3->BorderBrush = Brushes::Black;
         myBorder3->BorderThickness = Thickness(1);
         DockPanel::SetDock(myBorder3, Dock::Bottom);
         TextBlock^ myTextBlock3 = gcnew TextBlock();
         myTextBlock3->Foreground = Brushes::Black;
         myTextBlock3->Text = "Dock = Bottom";
         myBorder3->Child = myTextBlock3;

         Border^ myBorder4 = gcnew Border();
         myBorder4->Width = 200;
         myBorder4->Background = Brushes::PaleGreen;
         myBorder4->BorderBrush = Brushes::Black;
         myBorder4->BorderThickness = Thickness(1);
         DockPanel::SetDock(myBorder4, Dock::Left);
         TextBlock^ myTextBlock4 = gcnew TextBlock();
         myTextBlock4->Foreground = Brushes::Black;
         myTextBlock4->Text = "Dock = Left";
         myBorder4->Child = myTextBlock4;

         Border^ myBorder5 = gcnew Border();
         myBorder5->Background = Brushes::White;
         myBorder5->BorderBrush = Brushes::Black;
         myBorder5->BorderThickness = Thickness(1);
         TextBlock^ myTextBlock5 = gcnew TextBlock();
         myTextBlock5->Foreground = Brushes::Black;
         myTextBlock5->Text = "This content will Fill the remaining space";
         myBorder5->Child = myTextBlock5;

         // Add child elements to the DockPanel Children collection
         myDockPanel->Children->Add(myBorder1);
         myDockPanel->Children->Add(myBorder2);
         myDockPanel->Children->Add(myBorder3);
         myDockPanel->Children->Add(myBorder4);
         myDockPanel->Children->Add(myBorder5);

         // Add the parent Canvas as the Content of the Window Object
         mainWindow->Content = myDockPanel;
         mainWindow->Show();

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="DockPanel Sample">
  <DockPanel LastChildFill="True">
    <Border Height="25" Background="SkyBlue" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
      <TextBlock Foreground="Black">Dock = "Top"</TextBlock>
    </Border>
    <Border Height="25" Background="SkyBlue" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
      <TextBlock Foreground="Black">Dock = "Top"</TextBlock>
    </Border>
    <Border Height="25" Background="LemonChiffon" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Bottom">
      <TextBlock Foreground="Black">Dock = "Bottom"</TextBlock>
    </Border>
    <Border Width="200" Background="PaleGreen" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Left">
      <TextBlock Foreground="Black">Dock = "Left"</TextBlock>
    </Border>
    <Border Background="White" BorderBrush="Black" BorderThickness="1">
      <TextBlock Foreground="Black">This content will "Fill" the remaining space</TextBlock>
    </Border>
  </DockPanel>
</Page>

يعطي التطبيق المترجم واجهة المستخدم جديداً مثل هذا.

خطوط الشبكة

عنصرGrid يدمج وظيفة الموضع المطلق ومجموعة تحكم البيانات الجدولية. A Grid enables you إلى بسهولة موضع و النمط عناصر. Grid allows you إلى define flexible صف و عمود groupings, و even provides a mechanism إلى يجعله مشتركًا sizing معلومات between multiple Grid عناصر.

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

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

تغيير حجم سلوكيات الأعمدة و الصفوف

الأعمدة والصفوف المعرفة داخل Grid يمكنها الاستفادة من Star تغيير الحجم لتوزيع المساحة المتبقية بشكل متناسب. عندما يتم تحديد Star كارتفاع أو عرض الصف أو العمود يتلقى هذا العمود أو الصف نسبة ذات زوايا محددة القيمة من المساحةالمتبقية المتوفرة . هذا بعكس Auto ، الذي سيوزع المسافة بالتساوي استناداً إلى حجم المحتوى داخل العمود أو الصف. يتم التعبير عن هذه القيمة ك * أو 2* عند استخدام Extensible Application Markup Language (XAML). في الحالة الأولى؛ سيتلقى الصف أو العمود مرة واحدة من المساحة المتوفرة، في الحالة الثانية, مرتين وهكذا. بواسطة combining this technique إلى proportionally distribute مسافة مع a HorizontalAlignment و VerticalAlignment القيمة of Stretch it هو possible إلى قسم تخطيط مسافة بواسطة percentage of شاشة مسافة. Grid هو the فقط تخطيط لوحة that can distribute مسافة في this manner.

تعريف و استخدام الخيوط الشبكية

يوضح المثال التالي كيفية إنشاء واجهة المستخدم مشابهة لتلك التي تم العثور عليها فى مربع الحوارRun المتوفر على Windows قائمة Start.

'Create a Grid as the root Panel element.
Dim myGrid As New Grid()
myGrid.Height = 165
myGrid.Width = 425
myGrid.Background = Brushes.Gainsboro
myGrid.ShowGridLines = True
myGrid.HorizontalAlignment = Windows.HorizontalAlignment.Left
myGrid.VerticalAlignment = Windows.VerticalAlignment.Top

' Define and Add the Rows and Columns.
Dim colDef1 As New ColumnDefinition
colDef1.Width = New GridLength(1, GridUnitType.Auto)
Dim colDef2 As New ColumnDefinition
colDef2.Width = New GridLength(1, GridUnitType.Star)
Dim colDef3 As New ColumnDefinition
colDef3.Width = New GridLength(1, GridUnitType.Star)
Dim colDef4 As New ColumnDefinition
colDef4.Width = New GridLength(1, GridUnitType.Star)
Dim colDef5 As New ColumnDefinition
colDef5.Width = New GridLength(1, GridUnitType.Star)
myGrid.ColumnDefinitions.Add(colDef1)
myGrid.ColumnDefinitions.Add(colDef2)
myGrid.ColumnDefinitions.Add(colDef3)
myGrid.ColumnDefinitions.Add(colDef4)
myGrid.ColumnDefinitions.Add(colDef5)

Dim rowDef1 As New RowDefinition
rowDef1.Height = New GridLength(1, GridUnitType.Auto)
Dim rowDef2 As New RowDefinition
rowDef2.Height = New GridLength(1, GridUnitType.Auto)
Dim rowDef3 As New Controls.RowDefinition
rowDef3.Height = New GridLength(1, GridUnitType.Star)
Dim rowDef4 As New RowDefinition
rowDef4.Height = New GridLength(1, GridUnitType.Auto)
myGrid.RowDefinitions.Add(rowDef1)
myGrid.RowDefinitions.Add(rowDef2)
myGrid.RowDefinitions.Add(rowDef3)
myGrid.RowDefinitions.Add(rowDef4)

' Add the Image.
Dim img1 As New Image
img1.Source = New System.Windows.Media.Imaging.BitmapImage(New Uri("runicon.png", UriKind.Relative))
Grid.SetRow(img1, 0)
Grid.SetColumn(img1, 0)
myGrid.Children.Add(img1)

' Add the main application dialog.
Dim txt1 As New TextBlock
txt1.Text = "Type the name of a program, document, or Internet resource, and Windows will open it for you."
txt1.TextWrapping = TextWrapping.Wrap
Grid.SetColumnSpan(txt1, 4)
Grid.SetRow(txt1, 0)
Grid.SetColumn(txt1, 1)
myGrid.Children.Add(txt1)

' Add the second TextBlock Cell to the Grid.
Dim txt2 As New TextBlock
txt2.Text = "Open:"
Grid.SetRow(txt2, 1)
Grid.SetColumn(txt2, 0)
myGrid.Children.Add(txt2)

' Add the TextBox control.
Dim tb1 As New TextBox
Grid.SetRow(tb1, 1)
Grid.SetColumn(tb1, 1)
Grid.SetColumnSpan(tb1, 5)
myGrid.Children.Add(tb1)

' Add the Button controls.
Dim button1 As New Button
Dim button2 As New Button
Dim button3 As New Button
button1.Content = "OK"
button1.Margin = New Thickness(10, 0, 10, 15)
button2.Content = "Cancel"
button2.Margin = New Thickness(10, 0, 10, 15)
button3.Content = "Browse ..."
button3.Margin = New Thickness(10, 0, 10, 15)

Grid.SetRow(button1, 3)
Grid.SetColumn(button1, 2)
Grid.SetRow(button2, 3)
Grid.SetColumn(button2, 3)
Grid.SetRow(button3, 3)
Grid.SetColumn(button3, 4)
myGrid.Children.Add(button1)
myGrid.Children.Add(button2)
myGrid.Children.Add(button3)

Me.Content = myGrid

// Create the Grid.
grid1 = new Grid ();
grid1.Background = Brushes.Gainsboro;
grid1.HorizontalAlignment = HorizontalAlignment.Left;
grid1.VerticalAlignment = VerticalAlignment.Top;
grid1.ShowGridLines = true;
grid1.Width = 425;
grid1.Height = 165;

// Define the Columns.
colDef1 = new ColumnDefinition();
colDef1.Width = new GridLength(1, GridUnitType.Auto);
colDef2 = new ColumnDefinition();
colDef2.Width = new GridLength(1, GridUnitType.Star);
colDef3 = new ColumnDefinition();
colDef3.Width = new GridLength(1, GridUnitType.Star);
colDef4 = new ColumnDefinition();
colDef4.Width = new GridLength(1, GridUnitType.Star);
colDef5 = new ColumnDefinition();
colDef5.Width = new GridLength(1, GridUnitType.Star);
grid1.ColumnDefinitions.Add(colDef1);
grid1.ColumnDefinitions.Add(colDef2);
grid1.ColumnDefinitions.Add(colDef3);
grid1.ColumnDefinitions.Add(colDef4);
grid1.ColumnDefinitions.Add(colDef5);

// Define the Rows.
rowDef1 = new RowDefinition();
rowDef1.Height = new GridLength(1, GridUnitType.Auto);
rowDef2 = new RowDefinition();
rowDef2.Height = new GridLength(1, GridUnitType.Auto);
rowDef3 = new RowDefinition();
rowDef3.Height = new GridLength(1, GridUnitType.Star);
rowDef4 = new RowDefinition();
rowDef4.Height = new GridLength(1, GridUnitType.Auto);
grid1.RowDefinitions.Add(rowDef1);
grid1.RowDefinitions.Add(rowDef2);
grid1.RowDefinitions.Add(rowDef3);
grid1.RowDefinitions.Add(rowDef4);

// Add the Image.
img1 = new Image();
img1.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri("runicon.png", UriKind.Relative));
Grid.SetRow(img1, 0);
Grid.SetColumn(img1, 0);

// Add the main application dialog.
txt1 = new TextBlock();
txt1.Text = "Type the name of a program, folder, document, or Internet resource, and Windows will open it for you.";
txt1.TextWrapping = TextWrapping.Wrap;
Grid.SetColumnSpan(txt1, 4);
Grid.SetRow(txt1, 0);
Grid.SetColumn(txt1, 1);

// Add the second text cell to the Grid.
txt2 = new TextBlock();
txt2.Text = "Open:";
Grid.SetRow(txt2, 1);
Grid.SetColumn(txt2, 0);

// Add the TextBox control.
tb1 = new TextBox();
Grid.SetRow(tb1, 1);
Grid.SetColumn(tb1, 1);
Grid.SetColumnSpan(tb1, 5);

// Add the buttons.
button1 = new Button();
button2 = new Button();
button3 = new Button();
button1.Content = "OK";
button2.Content = "Cancel";
button3.Content = "Browse ...";
Grid.SetRow(button1, 3);
Grid.SetColumn(button1, 2);
button1.Margin = new Thickness(10, 0, 10, 15);
button2.Margin = new Thickness(10, 0, 10, 15);
button3.Margin = new Thickness(10, 0, 10, 15);
Grid.SetRow(button2, 3);
Grid.SetColumn(button2, 3);
Grid.SetRow(button3, 3);
Grid.SetColumn(button3, 4);

grid1.Children.Add(img1);
grid1.Children.Add(txt1);
grid1.Children.Add(txt2);
grid1.Children.Add(tb1);
grid1.Children.Add(button1);
grid1.Children.Add(button2);
grid1.Children.Add(button3);

mainWindow.Content = grid1;

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      WindowTitle="Grid Run Dialog Sample" 
      WindowWidth="425" 
      WindowHeight="225">
  <Grid Background="#DCDCDC"
        Width="425"
        Height="165"
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        ShowGridLines="True">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Image Grid.Column="0" Grid.Row="0" Source="RunIcon.png" />
    <TextBlock Grid.Column="1" Grid.ColumnSpan="4" Grid.Row="0" TextWrapping="Wrap">
      Type the name of a program, folder, document, or
      Internet resource, and Windows will open it for you.
    </TextBlock>
    <TextBlock Grid.Column="0" Grid.Row="1">Open:</TextBlock>
    <TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="5" />
    <Button Margin="10, 0, 10, 15" Grid.Row="3" Grid.Column="2">OK</Button>
    <Button Margin="10, 0, 10, 15" Grid.Row="3" Grid.Column="3">Cancel</Button>
    <Button Margin="10, 0, 10, 15" Grid.Row="3" Grid.Column="4">Browse ...</Button>
  </Grid>
</Page>

يعطي التطبيق المترجم واجهة المستخدم جديداً مثل هذا.

StackPanel

StackPanel يمكنك من "تكديس" العناصر في الاتجاه المعنى . اتجاه التكديس الافتراضي يكون عمودياً. خاصية Orientation يمكن استخدامها للتحكم في تدفق المحتوى.

StackPanel vs.DockPanel

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

يوضح المثال التالي الاختلاف الرئيسى.

            'Add root Grid
            Dim myGrid As New Grid
            myGrid.Width = 175
            myGrid.Height = 150
            Dim myRowDef1 As New RowDefinition
            Dim myRowDef2 As New RowDefinition
            myGrid.RowDefinitions.Add(myRowDef1)
            myGrid.RowDefinitions.Add(myRowDef2)

            'Define the DockPanel
            Dim myDockPanel As New DockPanel
            Grid.SetRow(myDockPanel, 0)

            'Define an Image and Source.
            Dim myImage As New Image
            Dim bi As New BitmapImage
            bi.BeginInit()
            bi.UriSource = New Uri("smiley_stackpanel.png", UriKind.Relative)
            bi.EndInit()
            myImage.Source = bi

            Dim myImage2 As New Image
            Dim bi2 As New BitmapImage
            bi2.BeginInit()
            bi2.UriSource = New Uri("smiley_stackpanel.png", UriKind.Relative)
            bi2.EndInit()
            myImage2.Source = bi2

            Dim myImage3 As New Image
            Dim bi3 As New BitmapImage
            bi3.BeginInit()
            bi3.UriSource = New Uri("smiley_stackpanel.PNG", UriKind.Relative)
            bi3.EndInit()
            myImage3.Stretch = Stretch.Fill
            myImage3.Source = bi3

            'Add the images to the parent DockPanel.
            myDockPanel.Children.Add(myImage)
            myDockPanel.Children.Add(myImage2)
            myDockPanel.Children.Add(myImage3)

            'Define a StackPanel.
            Dim myStackPanel As New StackPanel
            myStackPanel.Orientation = Orientation.Horizontal
            Grid.SetRow(myStackPanel, 1)

            Dim myImage4 As New Image
            Dim bi4 As New BitmapImage
            bi4.BeginInit()
            bi4.UriSource = New Uri("smiley_stackpanel.png", UriKind.Relative)
            bi4.EndInit()
            myImage4.Source = bi4

            Dim myImage5 As New Image
            Dim bi5 As New BitmapImage
            bi5.BeginInit()
            bi5.UriSource = New Uri("smiley_stackpanel.png", UriKind.Relative)
            bi5.EndInit()
            myImage5.Source = bi5

            Dim myImage6 As New Image
            Dim bi6 As New BitmapImage
            bi6.BeginInit()
            bi6.UriSource = New Uri("smiley_stackpanel.PNG", UriKind.Relative)
            bi6.EndInit()
            myImage6.Stretch = Stretch.Fill
            myImage6.Source = bi6

            'Add the images to the parent StackPanel.
            myStackPanel.Children.Add(myImage4)
            myStackPanel.Children.Add(myImage5)
            myStackPanel.Children.Add(myImage6)

            'Add the layout panels as children of the Grid
            myGrid.Children.Add(myDockPanel)
            myGrid.Children.Add(myStackPanel)

            // Create the application's main window
            mainWindow = new Window ();
            mainWindow.Title = "StackPanel vs. DockPanel";

            // Add root Grid
            myGrid = new Grid();
            myGrid.Width = 175;
            myGrid.Height = 150;
            RowDefinition myRowDef1 = new RowDefinition();
            RowDefinition myRowDef2 = new RowDefinition();
            myGrid.RowDefinitions.Add(myRowDef1);
            myGrid.RowDefinitions.Add(myRowDef2);

            // Define the DockPanel
            myDockPanel = new DockPanel();
            Grid.SetRow(myDockPanel, 0);

            //Define an Image and Source
            Image myImage = new Image();
            BitmapImage bi = new BitmapImage();
            bi.BeginInit();
            bi.UriSource = new Uri("smiley_stackpanel.png", UriKind.Relative);
            bi.EndInit();
            myImage.Source = bi;

            Image myImage2 = new Image();
            BitmapImage bi2 = new BitmapImage();
            bi2.BeginInit();
            bi2.UriSource = new Uri("smiley_stackpanel.png", UriKind.Relative);
            bi2.EndInit();
            myImage2.Source = bi2;

            Image myImage3 = new Image();
            BitmapImage bi3 = new BitmapImage();
            bi3.BeginInit();
            bi3.UriSource = new Uri("smiley_stackpanel.PNG", UriKind.Relative);
            bi3.EndInit();
            myImage3.Stretch = Stretch.Fill;
            myImage3.Source = bi3;

            // Add the images to the parent DockPanel
            myDockPanel.Children.Add(myImage);
            myDockPanel.Children.Add(myImage2);
            myDockPanel.Children.Add(myImage3);

            //Define a StackPanel
            myStackPanel = new StackPanel();
            myStackPanel.Orientation = Orientation.Horizontal;
            Grid.SetRow(myStackPanel, 1);

            Image myImage4 = new Image();
            BitmapImage bi4 = new BitmapImage();
            bi4.BeginInit();
            bi4.UriSource = new Uri("smiley_stackpanel.png", UriKind.Relative);
            bi4.EndInit();
            myImage4.Source = bi4;

            Image myImage5 = new Image();
            BitmapImage bi5 = new BitmapImage();
            bi5.BeginInit();
            bi5.UriSource = new Uri("smiley_stackpanel.png", UriKind.Relative);
            bi5.EndInit();
            myImage5.Source = bi5;

            Image myImage6 = new Image();
            BitmapImage bi6 = new BitmapImage();
            bi6.BeginInit();
            bi6.UriSource = new Uri("smiley_stackpanel.PNG", UriKind.Relative);
            bi6.EndInit();
            myImage6.Stretch = Stretch.Fill;
            myImage6.Source = bi6;

            // Add the images to the parent StackPanel
            myStackPanel.Children.Add(myImage4);
            myStackPanel.Children.Add(myImage5);
            myStackPanel.Children.Add(myImage6);

            // Add the layout panels as children of the Grid
            myGrid.Children.Add(myDockPanel);
            myGrid.Children.Add(myStackPanel);

            // Add the Grid as the Content of the Parent Window Object
            mainWindow.Content = myGrid;
            mainWindow.Show ();

         // Create the application's main window
         mainWindow = gcnew Window();
         mainWindow->Title = "StackPanel vs. DockPanel";

         // Add root Grid
         myGrid = gcnew Grid();
         myGrid->Width = 175;
         myGrid->Height = 150;
         RowDefinition^ myRowDef1 = gcnew RowDefinition();
         RowDefinition^ myRowDef2 = gcnew RowDefinition();
         myGrid->RowDefinitions->Add(myRowDef1);
         myGrid->RowDefinitions->Add(myRowDef2);

         // Define the DockPanel
         myDockPanel = gcnew DockPanel();
         Grid::SetRow(myDockPanel, 0);

         //Define an Image and Source
         Image^ myImage = gcnew Image();
         BitmapImage^ bi = gcnew BitmapImage();
         bi->BeginInit();
         bi->UriSource = gcnew System::Uri("smiley_stackpanel.png", UriKind::Relative);
         bi->EndInit();
         myImage->Source = bi;

         Image^ myImage2 = gcnew Image();
         BitmapImage^ bi2 = gcnew BitmapImage();
         bi2->BeginInit();
         bi2->UriSource = gcnew System::Uri("smiley_stackpanel.png", UriKind::Relative);
         bi2->EndInit();
         myImage2->Source = bi2;

         Image^ myImage3 = gcnew Image();
         BitmapImage^ bi3 = gcnew BitmapImage();
         bi3->BeginInit();
         bi3->UriSource = gcnew System::Uri("smiley_stackpanel.PNG", UriKind::Relative);
         bi3->EndInit();
         myImage3->Stretch = Stretch::Fill;
         myImage3->Source = bi3;

         // Add the images to the parent DockPanel
         myDockPanel->Children->Add(myImage);
         myDockPanel->Children->Add(myImage2);
         myDockPanel->Children->Add(myImage3);

         //Define a StackPanel
         myStackPanel = gcnew StackPanel();
         myStackPanel->Orientation = Orientation::Horizontal;
         Grid::SetRow(myStackPanel, 1);

         Image^ myImage4 = gcnew Image();
         BitmapImage^ bi4 = gcnew BitmapImage();
         bi4->BeginInit();
         bi4->UriSource = gcnew System::Uri("smiley_stackpanel.png", UriKind::Relative);
         bi4->EndInit();
         myImage4->Source = bi4;

         Image^ myImage5 = gcnew Image();
         BitmapImage^ bi5 = gcnew BitmapImage();
         bi5->BeginInit();
         bi5->UriSource = gcnew System::Uri("smiley_stackpanel.png", UriKind::Relative);
         bi5->EndInit();
         myImage5->Source = bi5;

         Image^ myImage6 = gcnew Image();
         BitmapImage^ bi6 = gcnew BitmapImage();
         bi6->BeginInit();
         bi6->UriSource = gcnew System::Uri("smiley_stackpanel.PNG", UriKind::Relative);
         bi6->EndInit();
         myImage6->Stretch = Stretch::Fill;
         myImage6->Source = bi6;

         // Add the images to the parent StackPanel
         myStackPanel->Children->Add(myImage4);
         myStackPanel->Children->Add(myImage5);
         myStackPanel->Children->Add(myImage6);

         // Add the layout panels as children of the Grid
         myGrid->Children->Add(myDockPanel);
         myGrid->Children->Add(myStackPanel);

         // Add the Grid as the Content of the Parent Window Object
         mainWindow->Content = myGrid;
         mainWindow->Show();

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
      WindowTitle="StackPanel vs. DockPanel">
  <Grid Width="175" Height="150">
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition />
    </Grid.RowDefinitions>

    <DockPanel Grid.Column="0" Grid.Row="0">
      <Image Source="smiley_stackpanel.png" />
      <Image Source="smiley_stackpanel.png" />
      <Image Source="smiley_stackpanel.png" Stretch="Fill"/>
    </DockPanel>

    <StackPanel Grid.Column="0" Grid.Row="1"  Orientation="Horizontal">
      <Image Source="smiley_stackpanel.png" />
      <Image Source="smiley_stackpanel.png" />
      <Image Source="smiley_stackpanel.png" Stretch="Fill"/>
    </StackPanel>
    </Grid>
</Page>

يمكن مشاهدة الفرق في سلوك التقديم في هذه الصورة.

تعريف و استخدام DockPanel

يوضح المثال التالي كيفية استخدام StackPanel لإنشاء مجموعة من الأزرار رأسية الوضع. للموضع الأفقي، قم بتعيين خاصية Orientation إلى Horizontal.

WindowTitle = "StackPanel Sample"
' Define the StackPanel
Dim myStackPanel As New StackPanel()
myStackPanel.HorizontalAlignment = Windows.HorizontalAlignment.Left
myStackPanel.VerticalAlignment = Windows.VerticalAlignment.Top

' Define child content
Dim myButton1 As New Button()
myButton1.Content = "Button 1"
Dim myButton2 As New Button()
myButton2.Content = "Button 2"
Dim myButton3 As New Button()
myButton3.Content = "Button 3"

' Add child elements to the parent StackPanel
myStackPanel.Children.Add(myButton1)
myStackPanel.Children.Add(myButton2)
myStackPanel.Children.Add(myButton3)

Me.Content = myStackPanel

            // Create the application's main window
            mainWindow = new Window ();
            mainWindow.Title = "StackPanel Sample";

            // Define the StackPanel
            myStackPanel = new StackPanel();
            myStackPanel.HorizontalAlignment = HorizontalAlignment.Left;
            myStackPanel.VerticalAlignment = VerticalAlignment.Top;

            // Define child content
            Button myButton1 = new Button();
            myButton1.Content = "Button 1";
            Button myButton2 = new Button();
            myButton2.Content = "Button 2";
            Button myButton3 = new Button();
            myButton3.Content = "Button 3";

            // Add child elements to the parent StackPanel
            myStackPanel.Children.Add(myButton1);
            myStackPanel.Children.Add(myButton2);
            myStackPanel.Children.Add(myButton3);           

            // Add the StackPanel as the Content of the Parent Window Object
            mainWindow.Content = myStackPanel;
            mainWindow.Show ();

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="StackPanel Sample">
    <StackPanel HorizontalAlignment="Left"
                VerticalAlignment="Top">
        <Button>Button 1</Button>
        <Button>Button 2</Button>
        <Button>Button 3</Button>
    </StackPanel>
</Page>

يعطي التطبيق المترجم واجهة المستخدم جديداً مثل هذا.

VirtualizingStackPanel

WPF كما يوفر تباين فى العنصرStackPanel و الذى "يصور" تلقائياً بيانات المحتوى التابع المرتبطة . في هذا السياق، الكلمة "يصور" تشير إلى الأسلوب الذي يتم به إنشاء مجموعة فرعية من العناصر عناصر من عدد أكبر من عناصر البيانات استناداً إلى العناصر التي تكون مرئية على الشاشة. يتم بصورة مكثفة كلاً من خلال الذاكرة والمعالج، لإنشاء عدد كبير من عناصر واجهة المستخدم فى حين قد يكون عدد قليل فقط على الشاشة في وقت محدد. VirtualizingStackPanel (خلال الوظيفة التي يوفرها VirtualizingPanel) بحساب العناصر المرئية ويعمل معItemContainerGenerator منItemsControl (مثل ListBox أو ListView) فقط لإنشاء عناصر للعناصر المرئية.

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

توضح العلامات التالية كيفية استخدام VirtualizingStackPanel كـمضيف للعناصر. خاصية VirtualizingStackPanelIsVirtualizing() المرفقة يجب تعيينها إلى true (الافتراضي) لحدوث الإظهار .

<StackPanel DataContext="{Binding Source={StaticResource Leagues}}">
    <TextBlock Text="{Binding XPath=@name}" FontFamily="Arial" FontSize="18" Foreground="Black"/>
        <ListBox VirtualizingStackPanel.IsVirtualizing="True" 
                 ItemsSource="{Binding XPath=Team}" 
                 ItemTemplate="{DynamicResource NameDataStyle}"/>      
</StackPanel>

WrapPanel

WrapPanel يُستخدم لتحديد موضع العناصر التابعة في مواضع متسلسلة من اليسار إلى اليمين، و فصل المحتوى للسطر التالي عندما تصل إلى حافة الحاوية الأصل. محتوى can be oriented أفقيا أو عموديا. WrapPanel هو useful for simple flowing واجهة المستخدم (UI) scenarios. يمكن أن تستخدم إيضا لتطبيق تغيير الحجم الموحد لكافة العناصر التابعة الخاصة به.

يوضح المثال التالي كيفية إنشاء WrapPanel لعرض عناصر التحكم Button التي تلتف عند وصولها إلى حافة الحاوية الخاصة بهم.

            WindowTitle = "WrapPanel Sample"

            ' Instantiate a new WrapPanel and set properties
            Dim myWrapPanel As New WrapPanel()
            myWrapPanel.Background = Brushes.Azure
            myWrapPanel.Orientation = Orientation.Horizontal
            myWrapPanel.ItemHeight = 25

            myWrapPanel.ItemWidth = 75
            myWrapPanel.Width = 150
            myWrapPanel.HorizontalAlignment = Windows.HorizontalAlignment.Left
            myWrapPanel.VerticalAlignment = Windows.VerticalAlignment.Top

            ' Define 3 button elements. Each button is sized at width of 75, so the third button wraps to the next line.
            Dim btn1 As New Button()
            btn1.Content = "Button 1"
            Dim btn2 As New Button()
            btn2.Content = "Button 2"
            Dim btn3 As New Button()
            btn3.Content = "Button 3"

            ' Add the buttons to the parent WrapPanel using the Children.Add method.
            myWrapPanel.Children.Add(btn1)
            myWrapPanel.Children.Add(btn2)
            myWrapPanel.Children.Add(btn3)

            ' Add the WrapPanel to the Page as Content
            Me.Content = myWrapPanel

            // Create the application's main window
            mainWindow = new System.Windows.Window();
            mainWindow.Title = "WrapPanel Sample";


            // Instantiate a new WrapPanel and set properties
            myWrapPanel = new WrapPanel();
            myWrapPanel.Background = System.Windows.Media.Brushes.Azure;
            myWrapPanel.Orientation = Orientation.Horizontal;
            myWrapPanel.ItemHeight = 25;

            myWrapPanel.ItemWidth = 75;
            myWrapPanel.Width = 150;
            myWrapPanel.HorizontalAlignment = HorizontalAlignment.Left;
            myWrapPanel.VerticalAlignment = VerticalAlignment.Top;

            // Define 3 button elements. Each button is sized at width of 75, so the third button wraps to the next line.
            btn1 = new Button();
            btn1.Content = "Button 1";
            btn2 = new Button();
            btn2.Content = "Button 2";
            btn3 = new Button();
            btn3.Content = "Button 3";

            // Add the buttons to the parent WrapPanel using the Children.Add method.
            myWrapPanel.Children.Add(btn1);
            myWrapPanel.Children.Add(btn2);
            myWrapPanel.Children.Add(btn3);

            // Add the WrapPanel to the MainWindow as Content
            mainWindow.Content = myWrapPanel;
            mainWindow.Show();
            

         // Create the application's main window
         mainWindow = gcnew System::Windows::Window();
         mainWindow->Title = "WrapPanel Sample";


         // Instantiate a new WrapPanel and set properties
         myWrapPanel = gcnew WrapPanel();
         myWrapPanel->Background = Brushes::Azure;
         myWrapPanel->Orientation = Orientation::Horizontal;
         myWrapPanel->ItemHeight = 25;

         myWrapPanel->ItemWidth = 75;
         myWrapPanel->Width = 150;
         myWrapPanel->HorizontalAlignment = HorizontalAlignment::Left;
         myWrapPanel->VerticalAlignment = VerticalAlignment::Top;

         // Define 3 button elements. Each button is sized at width of 75, so the third button wraps to the next line.
         btn1 = gcnew Button();
         btn1->Content = "Button 1";
         btn2 = gcnew Button();
         btn2->Content = "Button 2";
         btn3 = gcnew Button();
         btn3->Content = "Button 3";

         // Add the buttons to the parent WrapPanel using the Children.Add method.
         myWrapPanel->Children->Add(btn1);
         myWrapPanel->Children->Add(btn2);
         myWrapPanel->Children->Add(btn3);

         // Add the WrapPanel to the MainWindow as Content
         mainWindow->Content = myWrapPanel;
         mainWindow->Show();

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="WrapPanel Sample">
  <Border HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="2">
        <WrapPanel Background="LightBlue" Width="200" Height="100">
            <Button Width="200">Button 1</Button>
            <Button>Button 2</Button>
            <Button>Button 3</Button>
            <Button>Button 4</Button>
        </WrapPanel>
  </Border>    
</Page>

يعطي التطبيق المترجم واجهة المستخدم جديداً مثل هذا.

عناصر اللوحة المتداخلة

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

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

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

Dim myDockPanel As New DockPanel()

Dim myBorder2 As New Border()
myBorder2.BorderThickness = New Thickness(1)
myBorder2.BorderBrush = Brushes.Black
DockPanel.SetDock(myBorder2, Dock.Left)
Dim myStackPanel As New StackPanel()
Dim myButton1 As New Button()
myButton1.Content = "Left Docked"
myButton1.Margin = New Thickness(5)
Dim myButton2 As New Button()
myButton2.Content = "StackPanel"
myButton2.Margin = New Thickness(5)
myStackPanel.Children.Add(myButton1)
myStackPanel.Children.Add(myButton2)
myBorder2.Child = myStackPanel

Dim myBorder3 As New Border()
myBorder3.BorderThickness = New Thickness(1)
myBorder3.BorderBrush = Brushes.Black
DockPanel.SetDock(myBorder3, Dock.Top)
Dim myGrid As New Grid()
myGrid.ShowGridLines = True
Dim myRowDef1 As New RowDefinition()
Dim myRowDef2 As New RowDefinition()
Dim myColDef1 As New ColumnDefinition()
Dim myColDef2 As New ColumnDefinition()
Dim myColDef3 As New ColumnDefinition()
myGrid.ColumnDefinitions.Add(myColDef1)
myGrid.ColumnDefinitions.Add(myColDef2)
myGrid.ColumnDefinitions.Add(myColDef3)
myGrid.RowDefinitions.Add(myRowDef1)
myGrid.RowDefinitions.Add(myRowDef2)
Dim myTextBlock1 As New TextBlock()
myTextBlock1.FontSize = 20
myTextBlock1.Margin = New Thickness(10)
myTextBlock1.Text = "Grid Element Docked at the Top"
Grid.SetRow(myTextBlock1, 0)
Grid.SetColumnSpan(myTextBlock1, 3)
Dim myButton3 As New Button()
myButton3.Margin = New Thickness(5)
myButton3.Content = "A Row"
Grid.SetColumn(myButton3, 0)
Grid.SetRow(myButton3, 1)
Dim myButton4 As New Button()
myButton4.Margin = New Thickness(5)
myButton4.Content = "of Button"
Grid.SetColumn(myButton4, 1)
Grid.SetRow(myButton4, 1)
Dim myButton5 As New Button()
myButton5.Margin = New Thickness(5)
myButton5.Content = "Elements"
Grid.SetColumn(myButton5, 2)
Grid.SetRow(myButton5, 1)
myGrid.Children.Add(myTextBlock1)
myGrid.Children.Add(myButton3)
myGrid.Children.Add(myButton4)
myGrid.Children.Add(myButton5)
myBorder3.Child = myGrid

Dim myBorder4 As New Border()
myBorder4.BorderBrush = Brushes.Black
myBorder4.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder4, Dock.Bottom)
Dim myStackPanel2 As New StackPanel()
myStackPanel2.Orientation = Orientation.Horizontal
Dim myTextBlock2 As New TextBlock()
myTextBlock2.Text = "This StackPanel is Docked to the Bottom"
myTextBlock2.Margin = New Thickness(5)
myStackPanel2.Children.Add(myTextBlock2)
myBorder4.Child = myStackPanel2

Dim myBorder5 As New Border()
myBorder5.BorderBrush = Brushes.Black
myBorder5.BorderThickness = New Thickness(1)
Dim myCanvas As New Canvas()
myCanvas.ClipToBounds = True
Dim myTextBlock3 As New TextBlock()
myTextBlock3.Text = "Content in the Canvas will Fill the remaining space."
Canvas.SetTop(myTextBlock3, 50)
Canvas.SetLeft(myTextBlock3, 50)
Dim myEllipse As New Ellipse()
myEllipse.Height = 100
myEllipse.Width = 125
myEllipse.Fill = Brushes.CornflowerBlue
myEllipse.Stroke = Brushes.Aqua
Canvas.SetTop(myEllipse, 100)
Canvas.SetLeft(myEllipse, 150)
myCanvas.Children.Add(myTextBlock3)
myCanvas.Children.Add(myEllipse)
myBorder5.Child = myCanvas

myDockPanel.Children.Add(myBorder2)
myDockPanel.Children.Add(myBorder3)
myDockPanel.Children.Add(myBorder4)
myDockPanel.Children.Add(myBorder5)

// Define the DockPanel.
myDockPanel = new DockPanel();

// Add the Left Docked StackPanel
Border myBorder2 = new Border();
myBorder2.BorderThickness = new Thickness(1);
myBorder2.BorderBrush = Brushes.Black;
DockPanel.SetDock(myBorder2, Dock.Left);
StackPanel myStackPanel = new StackPanel();
Button myButton1 = new Button();
myButton1.Content = "Left Docked";
myButton1.Margin = new Thickness(5);
Button myButton2 = new Button();
myButton2.Content = "StackPanel";
myButton2.Margin = new Thickness(5);
myStackPanel.Children.Add(myButton1);
myStackPanel.Children.Add(myButton2);
myBorder2.Child = myStackPanel;

// Add the Top Docked Grid.
Border myBorder3 = new Border();
myBorder3.BorderThickness = new Thickness(1);
myBorder3.BorderBrush = Brushes.Black;
DockPanel.SetDock(myBorder3, Dock.Top);
Grid myGrid = new Grid();
myGrid.ShowGridLines = true;
RowDefinition myRowDef1 = new RowDefinition();
RowDefinition myRowDef2 = new RowDefinition();
ColumnDefinition myColDef1 = new ColumnDefinition();
ColumnDefinition myColDef2 = new ColumnDefinition();
ColumnDefinition myColDef3 = new ColumnDefinition();
myGrid.ColumnDefinitions.Add(myColDef1);
myGrid.ColumnDefinitions.Add(myColDef2);
myGrid.ColumnDefinitions.Add(myColDef3);
myGrid.RowDefinitions.Add(myRowDef1);
myGrid.RowDefinitions.Add(myRowDef2);
TextBlock myTextBlock1 = new TextBlock();
myTextBlock1.FontSize = 20;
myTextBlock1.Margin = new Thickness(10);
myTextBlock1.Text = "Grid Element Docked at the Top";
Grid.SetRow(myTextBlock1, 0);
Grid.SetColumnSpan(myTextBlock1, 3);
Button myButton3 = new Button();
myButton3.Margin = new Thickness(5);
myButton3.Content = "A Row";
Grid.SetColumn(myButton3, 0);
Grid.SetRow(myButton3, 1);
Button myButton4 = new Button();
myButton4.Margin = new Thickness(5);
myButton4.Content = "of Button";
Grid.SetColumn(myButton4, 1);
Grid.SetRow(myButton4, 1);
Button myButton5 = new Button();
myButton5.Margin = new Thickness(5);
myButton5.Content = "Elements";
Grid.SetColumn(myButton5, 2);
Grid.SetRow(myButton5, 1);
myGrid.Children.Add(myTextBlock1);
myGrid.Children.Add(myButton3);
myGrid.Children.Add(myButton4);
myGrid.Children.Add(myButton5);
myBorder3.Child = myGrid;

// Add the Bottom Docked StackPanel.
Border myBorder4 = new Border();
myBorder4.BorderBrush = Brushes.Black;
myBorder4.BorderThickness = new Thickness(1);
DockPanel.SetDock(myBorder4, Dock.Bottom);
StackPanel myStackPanel2 = new StackPanel();
myStackPanel2.Orientation = Orientation.Horizontal;
TextBlock myTextBlock2 = new TextBlock();
myTextBlock2.Text = "This StackPanel is Docked to the Bottom";
myTextBlock2.Margin = new Thickness(5);
myStackPanel2.Children.Add(myTextBlock2);
myBorder4.Child = myStackPanel2;

// Add the Canvas, that fills remaining space.
Border myBorder5 = new Border();
myBorder4.BorderBrush = Brushes.Black;
myBorder5.BorderThickness = new Thickness(1);
Canvas myCanvas = new Canvas();
myCanvas.ClipToBounds = true;
TextBlock myTextBlock3 = new TextBlock();
myTextBlock3.Text = "Content in the Canvas will Fill the remaining space.";
Canvas.SetTop(myTextBlock3, 50);
Canvas.SetLeft(myTextBlock3, 50);
Ellipse myEllipse = new Ellipse();
myEllipse.Height = 100;
myEllipse.Width = 125;
myEllipse.Fill = Brushes.CornflowerBlue;
myEllipse.Stroke = Brushes.Aqua;
Canvas.SetTop(myEllipse, 100);
Canvas.SetLeft(myEllipse, 150);
myCanvas.Children.Add(myTextBlock3);
myCanvas.Children.Add(myEllipse);
myBorder5.Child = myCanvas;

// Add child elements to the parent DockPanel.
myDockPanel.Children.Add(myBorder2);
myDockPanel.Children.Add(myBorder3);
myDockPanel.Children.Add(myBorder4);
myDockPanel.Children.Add(myBorder5);

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="Nested Panels">
  <Border Background="AliceBlue" 
          Width="400" 
          Height="300" 
          BorderBrush="DarkSlateBlue" 
          BorderThickness="2"
          HorizontalAlignment="Left" 
          VerticalAlignment="Top">
    <DockPanel>
      <Border BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Left">
        <StackPanel>
          <Button Margin="5">Left Docked</Button>
          <Button Margin="5">StackPanel</Button>
        </StackPanel>
      </Border>
      <Border BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
        <Grid ShowGridLines="True">
          <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
          </Grid.ColumnDefinitions>
          <TextBlock FontSize="20" Margin="10" Grid.ColumnSpan="3" Grid.Row="0">Grid Element Docked to the Top.</TextBlock>
          <Button Grid.Row="1" Grid.Column="0" Margin="5">A Row</Button>
          <Button Grid.Row="1" Grid.Column="1" Margin="5">of Button</Button>
          <Button Grid.Row="1" Grid.Column="2" Margin="5">Elements</Button>
        </Grid>
      </Border>
      <Border BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Bottom">
        <StackPanel Orientation="Horizontal">
          <TextBlock Margin="5">This StackPanel is Docked to the Bottom.</TextBlock>
        </StackPanel>
      </Border>
      <Border BorderBrush="Black" BorderThickness="1">
        <Canvas ClipToBounds="True">
          <TextBlock Canvas.Top="50" Canvas.Left="50">
            Content in the Canvas will Fill the remaining Space.
          </TextBlock>
          <Ellipse Height="100" Width="125" Fill="CornflowerBlue" Stroke="Aqua" Canvas.Top="100" Canvas.Left="150"/>
        </Canvas>
      </Border>
    </DockPanel>
  </Border>
</Page>

يعطي التطبيق المترجم واجهة المستخدم جديداً مثل هذا.

عناصر اللوحة المخصصة

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

وبالمثل، سلوكيات التخطيط المخصصة المبنية على فئات مشتقة (مثل Canvas أو Grid) يمكن تعريفها بواسطة تجاوز ArrangeOverrideالخاصة بهم، و أساليبMeasureOverride .

العلامات التالية توضح كيفية إنشاء عنصر Panel مخصص. هذه Panel الجديدة، المعرفة ك PlotPanel ، تعتمد تحديد موضع العنصر التابع باستخدام الإحداثيات x- و y ذات التعليمات البرمجية المعقدة. في هذا المثال، يتم وضع العنصر Rectangle (غير معروضة) عند نقطة الرسم 50 ( x ) ، و 50 (y).

Public Class PlotPanel
    Inherits Panel
    'Override the default Measure method of Panel.

    Protected Overrides Function MeasureOverride(ByVal availableSize As System.Windows.Size) As System.Windows.Size
        Dim panelDesiredSize As Size = New Size()
        ' In our example, we just have one child. 
        ' Report that our panel requires just the size of its only child.
        For Each child As UIElement In InternalChildren
            child.Measure(availableSize)
            panelDesiredSize = child.DesiredSize
        Next
        Return panelDesiredSize
    End Function
    Protected Overrides Function ArrangeOverride(ByVal finalSize As System.Windows.Size) As System.Windows.Size
        For Each child As UIElement In InternalChildren
            Dim x As Double = 50
            Dim y As Double = 50
            child.Arrange(New Rect(New System.Windows.Point(x, y), child.DesiredSize))
        Next
        Return MyBase.ArrangeOverride(finalSize)
    End Function
End Class

public class PlotPanel : Panel
{
    // Default public constructor
    public PlotPanel()
        : base()
    {
    }

    // Override the default Measure method of Panel
    protected override Size MeasureOverride(Size availableSize)
    {
        Size panelDesiredSize = new Size();

        // In our example, we just have one child. 
        // Report that our panel requires just the size of its only child.
        foreach (UIElement child in InternalChildren)
        {
            child.Measure(availableSize);
            panelDesiredSize = child.DesiredSize;
        }

        return panelDesiredSize ;
    }
    protected override Size ArrangeOverride(Size finalSize)
    {
        foreach (UIElement child in InternalChildren)
        {
            double x = 50;
            double y = 50;

            child.Arrange(new Rect(new Point(x, y), child.DesiredSize));
        }
        return finalSize; // Returns the final Arranged size
    }
}

   public: 
      ref class PlotPanel : Panel {

      public: 
         PlotPanel () {};

      protected: 
         // Override the default Measure method of Panel
         virtual Size MeasureOverride(Size availableSize) override
         {
             Size^ panelDesiredSize = gcnew Size();

             // In our example, we just have one child. 
             // Report that our panel requires just the size of its only child.
             for each (UIElement^ child in InternalChildren)
             {
                 child->Measure(availableSize);
                 panelDesiredSize = child->DesiredSize;
             }
             return *panelDesiredSize ;
         }

      protected: 
         virtual System::Windows::Size ArrangeOverride (Size finalSize) override 
         {
            for each (UIElement^ child in InternalChildren)
            {
               double x = 50;
               double y = 50;
               child->Arrange(Rect(Point(x, y), child->DesiredSize));
            }
            return finalSize;
         };
      };

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

دعم التعريب/التعميم

WPF يعتمد عدد من المميزات التي تساعد في إنشاء واجهة المستخدمالقابلة للترجمة.

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

توفرSizeToContent خاصية آلية تمكّن مطوري التطبيقات من توقع احتياجات واجهة المستخدمالمترجمة. باستخدام قيمةWidthAndHeight لهذه الخاصية ، Window أصل يتم تحجيمه دوماً لاحتواء المحتوى بشكل حيوي و هو غير مقيد بواسطة قيود ارتفاع أو عرض زائفة.

DockPanel, Grid, و StackPanel are الجميع بضاعة choices for localizable واجهة المستخدم. Canvas ليس a بضاعة الاختيار, however, because it positions محتوى absolutely, making it difficult إلى ترجمة.

للحصول على معلومات إضافية حول إنشاء تطبيقاتWPF القابلة للترجمة واجهات المستخدم (UI) s، راجع استخدام النظرة العامة حول التخطيط التلقائي.

راجع أيضًا:

المبادئ

الشروع في استخدام WPF

تخطيط النظام

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

نظرة عامة حول الخصائص المرفقة

استخدام النظرة العامة حول التخطيط التلقائي

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

موارد أخرى

نموذج معرض تخطيط WPF

نموذج لمعرض عناصر تحكم WPF

إنشاء نموذج لوحة التفاف - المحتوى مخصص