[WPF حتى الاحتراف] {3.1} - الـ Layout - نسخة قابلة للطباعة

[WPF حتى الاحتراف] {3.1} - الـ Layout - نسخة قابلة للطباعة

+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : قسم لغات البرمجة الاخرى (http://vb4arb.com/vb/forumdisplay.php?fid=4)
+--- قسم : قسم البرمجة بتقنية WPF (http://vb4arb.com/vb/forumdisplay.php?fid=86)
+---- قسم : قسم دورات تقنية WPF (http://vb4arb.com/vb/forumdisplay.php?fid=87)
+---- الموضوع : [WPF حتى الاحتراف] {3.1} - الـ Layout (/showthread.php?tid=3242)

الصفحات: 1 2

[WPF حتى الاحتراف] {3.1} - الـ Layout - الشاكي لله - 18-06-14

السلام عليكم ورحمة الله وبركاته

--

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

في هذا الباب سنتعرف على نظام ال Layout في WPF واهميته الكبيرة وماهي ادواته وكيف تستعمل بالاضافة الى بعض النصائح عن استخدامه .

بسم الله ...

ماهو الـ Layout

الLayout هي الترجمة الحرفية لـ "التخطيط" ، عملية التخطيط هي عملية تحديد مواقع العناصر وترتيبها .

فكما قلنا في بداية الدورة ، ان WPF لا تعتمد على المقارنة بالنظام الاحداثي ، اي ان خاصية Location لاتوجد في WPF ..

نعم خاصية Location انساها مع WPF ، فعملية تحديد مواقع العناصر تتم بواسطة نظام الLayout وادواته .

ادوات الـ Layout

ادوات الـ Layout ماهي الا Containers تُوضع في داخلها العناصر لترتيبها بنمط معين ، وكل Container لها نمط ترتيب معين وفي الدروس القادمة سنستعرضها جميعا ..

ادوات الـ Layout (الContainers) :-

* Grid Panel
* Stack Panel
* Dock Panel
* Wrap Panel
* Canvas Panel

وفي Expression blend هناك Containers اكثر ، لكن في اغلب الحالات العامة لن تستخدم سوا هذه الContainers ..

وكما قلنا ـ سيتم شرحهم جميعا في المواضع القادمة .

نصائح مهمة لتخطيط العناصر

* تجنب المواقع الثابتة : حاول قدر الامكان استخدام خاصية Alignment مع خاصية Margin لتحديد مواقع العناصر.
* تجنب الاحجام الثابتة : كل عنصر مرئي ، يوجد له خاصيتي باسم Width and Height .. دائما قدر الامكان اجعل قيمة هذه الخصائص تساوي Auto
* ابدا لاتستعمل canvas panel لتخطيط العناصر ، فإنها موجهة فقط لتخطيط الاشكال (Shapes)
* استعمل اداة StackPanel لتخطيط الButtons في ما لو كانت واجهتك عبارة عن Dialog

بعض الخصائص المسؤولة عن الـ Layout

الخصائص التي سنذكرها الان موجودة في جميع العناصر المرئية اي (الControls , Shapes , graphics) .

Vertical and Horizontal Alignment

تستخدم VerticalAlignment and HorizontalAlignmant لتثبيت العناصر في جهة معينة :-

---------------------

Margin and Padding

الMargin هي خاصية مهما جدا وستستعملها كثيرا ، فهي تعتبر كـاحد "البدلاء" لخاصية الLocation ان صح التعبير ..

* الMargin هي المساحة التي حول العناصر .

وينقسم الMargin الى 4 اقسام : Left , Right , Top , Down

شاهد الصورة المتحركة :

*اما الPadding فهي المساحة التي داخل العناصر وهو ينقسم ل4 اقسام ايضا

شاهد الصورة المتحركة:

---------------------

Clipping

هي ايضا خاصية توجد لبعض العناصر وبعض الContainers ابضا ، ووظيفتها تظهر عند احتواء الاشكال ، كما في الصورة التالية :

في الصورة اعلاه ، تم قص الدائرة لانها تجاوزت حدود الContainer

---------------------

Anchor

لعل جميع من تعامل مع الWindows Forms يدرك اهمية هذه الخاصية ..

فهذه الخاصية مسؤولة عن تثبيت المساحات بين الحدود

اي بعبارة اخرى ، تجعل قيمة الMargin لا تتغير مهما تغير حجم الWindow .

لكن طبعا ينتج عن ذلك "زيادة" حجم العنصر ..

وايضا Anchor تنقسم ل4 اقسام Top, Left, Down, Right

شاهد الصورة المتحركة :-

---------------------

Scrolling

عندما يكون حجم المحتوى اكبر من حجم الContainer ، لديك خيارين : اما قص المحتوى او زيادة حجم الContainer ..

في الحقيقة ان قررت زيادة حجم الContainer فهذا الموضوع قد لايتناسب مع حالتك ومع المحتوى لذلك بدل زيادة حجم الContainer قم بتوفير امكانية Scrolling

شاهد الصورة المتحركة :-

ملاحظة : تستخدم اداة ScrollViewer لأداء خاصية الـScrolling

الحمدلله اخذنا مقدمة كافية عن الLayout ، اتمنى ان يكون الشرح واضحا قدر الامكان

ومن الدروس القادمة راح اطبق نظام المهمات ..

يعني اعطيك الدرس وفي نهاية الدرس اطلب منك "مهمة" عليك تنفيذها (طبعا ان احببت)

وذلك لضمان اكبر امكانية لفهم الLayout وتتمكن من تحديد اداة الLayout التي عليك استخدامها .

(الصور المتحركة في المرفقات)

نلقاكم لاحقا ...

انتهى

RE: [WPF حتى الاحتراف] {3.1} - الـ Layout - salfig - 18-06-14

مشكور اخي الغالي

RE: [WPF حتى الاحتراف] {3.1} - الـ Layout - hoob computer - 18-06-14

جزاك الله خيراً و إلى الأمام ... إستمر أخي محمد.

السلام عليكم

RE: [WPF حتى الاحتراف] {3.1} - الـ Layout - Sajad - 20-06-14

السلام عليكم

بارك الله فيك شرح رائع

تحياتي لك

RE: [WPF حتى الاحتراف] {3.1} - الـ Layout - عبد الله - 21-06-14

وعليكم السلام ورحمة الله وبركاته

استمر أخينا محمد ، الشرح واضح ومفهوم.

RE: [WPF حتى الاحتراف] {3.1} - الـ Layout - محمود اكرم - 02-07-14

السلام عليكم ورحمة الله وبركاته
سؤال بالنسبة للأنكور وهو سؤال مهم جدا بالنسبة لي Blush

هل يمكن ان اثبت زر مثلا في زاوية معينة ومهما تغير حجم النافذة لا يتغير حجم الزر ولكن يتغير موقعه بحيث يبقى في الزاوية Angel

وشكرا

RE: [WPF حتى الاحتراف] {3.1} - الـ Layout - الشاكي لله - 02-07-14

(02-07-14, 03:37 PM)محمود اكرم كتب : السلام عليكم ورحمة الله وبركاته
سؤال بالنسبة للأنكور وهو سؤال مهم جدا بالنسبة لي
هل يمكن ان اثبت زر مثلا في زاوية معينة ومهما تغير حجم النافذة لا يتغير حجم الزر ولكن يتغير موقعه بحيث يبقى في الزاوية
وشكرا

نعم اخي العزيز ، استعمل فقط Vertical and Horizontal Alignment

مثلا لو حبيت تثبت زر في الزاويا العليا-اليمنى

نستعمل Horizontal = Right
ونستعمل Vertical = Top

RE: [WPF حتى الاحتراف] {3.1} - الـ Layout - الشاكي لله - 02-07-14

ملاحظة اخواني الاعزاء ..

ان خاصيتي Vertical and Horizontal Alignment وخاصية Anchor هما وجهين لعملة واحدة

بمعنى انك لو غيرت في الAnchor راح تتغير قيمة Vertical and Horizontal Alignment تلقائيا

RE: [WPF حتى الاحتراف] {3.1} - الـ Layout - ali.alfoly - 15-07-14

اخي محمد لي بعض الاسئلة
الاول هل تقصد بال Vertical and Horizontal Alignment ما بالصورة

السؤال الثاني الخاصية Anchor غير موجودة في صندوق الخصائص

السؤال الثالث والخاصية Clipping ايضا بحثت عنها ولم اجدها

ارجو شرح

إقتباس :* ابدا لاتستعمل canvas panel لتخطيط العناصر ، فإنها موجهة فقط لتخطيط الاشكال (Shapes)
* استعمل اداة StackPanel لتخطيط الButtons في ما لو كانت واجهتك عبارة عن Dialog

وشرح

إقتباس :ملاحظة : تستخدم اداة ScrollViewer لأداء خاصية الـScrolling

وجزاك الله خيرا

RE: [WPF حتى الاحتراف] {3.1} - الـ Layout - الشاكي لله - 15-07-14

(15-07-14, 06:59 AM)ali.alfoly كتب : اخي محمد لي بعض الاسئلة
الاول هل تقصد بال Vertical and Horizontal Alignment ما بالصورة

السؤال الثاني الخاصية Anchor غير موجودة في صندوق الخصائص

السؤال الثالث والخاصية Clipping ايضا بحثت عنها ولم اجدها

ارجو شرح

إقتباس :* ابدا لاتستعمل canvas panel لتخطيط العناصر ، فإنها موجهة فقط لتخطيط الاشكال (Shapes)
* استعمل اداة StackPanel لتخطيط الButtons في ما لو كانت واجهتك عبارة عن Dialog

وشرح

إقتباس :ملاحظة : تستخدم اداة ScrollViewer لأداء خاصية الـScrolling

وجزاك الله خيرا

يبدو انني لم اوفق في شرح Anchor

في الحقيقة Anchor ليست خاصية وانما افترضتها من نفسي

لكن لو ركزنا على الشباصات الاربعة ، نلاقي ان وضيفتها مثل وظيفة Anchor في WinForm

انما في الحقيقة الشباصات الاربعة هذي ماهي الا وسيلة لتغيير خاصيتي Vertical and Horizontal Alignment بشكل اسهل واسرع (يعني اختصار للوقت)

والا خاصية Anchor غير متواجدة ، انما انا اترجمها في عقلي على انها Anchor كما في الوندوز فورم . جرب تحط زر وتعطيه يمين وفوق ، ثم كبر الفورم او صغره وبتعرف النتيجة .

اما عن Clipping بالنسبة لي اراها واضحة ، وان حبيت اذكر لك استخدام / انا شخصيا استخدمتها مع الinner shadow كي اضمن عدم خروج الظل لخارج الزر مثلا ، ف clipping راح تقص الshadow عندما يتجاوز الحدود .

واما بقية اسئلتك فاجاباتهم لاحقا ، ارجو عدم الاستعجال في طرح هذه الاسئلة لان انا ماقدر اشرح كلشي في موضوع واحد ، كل موضوع منذكر شيئ بسيط عن خدع wpf وستأتينا لاحقا استخدامات للScrollViewer ..

بالنسبة للcanvas فهي مشروحة بالتفصيل الملل لاحقا