18-06-14, 05:20 AM
(آخر تعديل لهذه المشاركة : 15-01-17, 05:36 AM {2} بواسطة الشاكي لله.)
السلام عليكم ورحمة الله وبركاته
--
اليوم ان شاء الله سندخل في باب جديد وهو يعتبر من اهم اسباب نجاح تقنية WPF
في هذا الباب سنتعرف على نظام ال Layout في WPF واهميته الكبيرة وماهي ادواته وكيف تستعمل بالاضافة الى بعض النصائح عن استخدامه .
بسم الله ...
--
اليوم ان شاء الله سندخل في باب جديد وهو يعتبر من اهم اسباب نجاح تقنية 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 التي عليك استخدامها .
(الصور المتحركة في المرفقات)
نلقاكم لاحقا ...
انتهى
ومن الدروس القادمة راح اطبق نظام المهمات ..
يعني اعطيك الدرس وفي نهاية الدرس اطلب منك "مهمة" عليك تنفيذها (طبعا ان احببت)
وذلك لضمان اكبر امكانية لفهم الLayout وتتمكن من تحديد اداة الLayout التي عليك استخدامها .
(الصور المتحركة في المرفقات)
نلقاكم لاحقا ...
انتهى