تقييم الموضوع :
  • 5 أصوات - بمعدل 5
  • 1
  • 2
  • 3
  • 4
  • 5
[WPF حتى الاحتراف] {3.1} - الـ Layout
#11
بالنسبة لخاصية Clipping فهي موجودة في الخصائص باسم ClipToBound

يوجد عندك مكان للبحث عن الخصائص فوق الصندوق
الرد }}}
تم الشكر بواسطة:
#12
طيب بالنسبة لـ Vertical and Horizontal Alignment لماذا لا يمكنني جعل قيمتهما None مثل ويندوز فورم
الرد }}}
تم الشكر بواسطة:
#13
جزاك الله كل خير أخي الكريم
على هذه الدروس الرائعة والقيمة
وجلعها الله في ميزان حسناتك
وفقك الله وبارك الله لك وفيك
ولك جزيل الشكر والتقدير
الرد }}}
تم الشكر بواسطة:
#14
(18-06-14, 05:20 AM)الشاكي لله كتب :
السلام عليكم ورحمة الله وبركات

--


اليوم ان شاء الله سندخل في باب جديد وهو يعتبر من اهم اسباب نجاح تقنية 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 التي عليك استخدامها .



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


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




انتهى

عاشت ايدك على هذا الشرح المبسط والمفهوم يارب يكون في ميزان اعمالك
الرد }}}
تم الشكر بواسطة:


المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الثاني) الشاكي لله 9 7,529 06-12-20, 04:09 AM
آخر رد: Mohammed1991
  [WPF حتى الاحتراف] {1} - إنشاء برنامجك الاول الشاكي لله 30 21,880 14-10-18, 08:34 AM
آخر رد: qadar elzaman
  [WPF حتى الاحتراف] {0} - نظرة عامة عن WPF الشاكي لله 14 11,812 14-10-18, 07:58 AM
آخر رد: qadar elzaman
  [WPF حتى الاحتراف] {4.6} - الـ Data Template و الـ Sample Data الشاكي لله 14 10,963 05-03-17, 09:47 AM
آخر رد: dabas
  [WPF حتى الاحتراف] {4.3} - الـTemplate ومقدمة عن الـTrigger الشاكي لله 8 6,979 25-01-17, 04:45 AM
آخر رد: hero2199
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الاول) الشاكي لله 5 5,208 02-12-16, 11:07 PM
آخر رد: alsef
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (3- الانميشن) الشاكي لله 16 8,946 02-06-16, 02:53 PM
آخر رد: CLARO
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (2- البرمحة) الشاكي لله 1 2,881 14-05-16, 11:54 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (1- التصميم) الشاكي لله 1 2,747 14-05-16, 11:27 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] {3.3} - اداة الـ Grid الشاكي لله 14 9,713 31-03-16, 11:11 PM
آخر رد: السندبااد

التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم