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


--


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



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


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




انتهى


الملفات المرفقة
.rar   anchor.rar (الحجم : 403.52 ك ب / التحميلات : 136)
.rar   margin.rar (الحجم : 304.84 ك ب / التحميلات : 116)
.rar   padding.rar (الحجم : 398.16 ك ب / التحميلات : 117)
.rar   scroll.rar (الحجم : 212.06 ك ب / التحميلات : 126)
الرد }}}}
#2
مشكور اخي الغالي
الرد }}}}
تم الشكر بواسطة:
#3
جزاك الله خيراً و إلى الأمام ... إستمر أخي محمد.


السلام عليكم
الرد }}}}
تم الشكر بواسطة:
#4
السلام عليكم

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

تحياتي لك
الرد }}}}
تم الشكر بواسطة:
#5
وعليكم السلام ورحمة الله وبركاته

استمر أخينا محمد ، الشرح واضح ومفهوم.
قال رسول الله صلى الله عليه وسلم ( من قال لا إله إلا الله دخل الجنة ) حديث صحيح.
قال رسول الله صلى الله عليه وسلم ( كلمتان خفيفتان على اللسان ثقيلتان في الميزان حبيبتان للرحمن : سبحان الله وبحمده سبحان الله العظيم ) حديث صحيح.
الرد }}}}
تم الشكر بواسطة:
#6
Information 
السلام عليكم ورحمة الله وبركاته
سؤال بالنسبة للأنكور وهو سؤال مهم جدا بالنسبة ليBlush
هل يمكن ان اثبت زر مثلا في زاوية معينة ومهما تغير حجم النافذة لا يتغير حجم الزر ولكن يتغير موقعه بحيث يبقى في الزاويةAngel
وشكرا
الرد }}}}
تم الشكر بواسطة:
#7
(02-07-14, 03:37 PM)محمود اكرم كتب : السلام عليكم ورحمة الله وبركاته
سؤال بالنسبة للأنكور وهو سؤال مهم جدا بالنسبة ليBlush
هل يمكن ان اثبت زر مثلا في زاوية معينة ومهما تغير حجم النافذة لا يتغير حجم الزر ولكن يتغير موقعه بحيث يبقى في الزاويةAngel
وشكرا


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

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



نستعمل Horizontal = Right
ونستعمل Vertical = Top
الرد }}}}
تم الشكر بواسطة: محمود اكرم
#8
ملاحظة اخواني الاعزاء ..


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

بمعنى انك لو غيرت في الAnchor راح تتغير قيمة Vertical and Horizontal Alignment تلقائيا
الرد }}}}
تم الشكر بواسطة: hoob computer , salfig
#9
اخي محمد لي بعض الاسئلة
الاول هل تقصد بال Vertical and Horizontal Alignment ما بالصورة


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

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

ارجو شرح

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

وشرح

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

وجزاك الله خيرا
الرد }}}}
تم الشكر بواسطة:
#10
(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 فهي مشروحة بالتفصيل الملل لاحقا
الرد }}}}
تم الشكر بواسطة: Ahmed-IT


المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الاول) الشاكي لله 5 733 أمس, 11:07 PM
آخر رد: alsef
  [WPF حتى الاحتراف] {1} - إنشاء برنامجك الاول الشاكي لله 29 6,139 16-08-16, 11:09 AM
آخر رد: أبوبكر سويدان
  [WPF حتى الاحتراف] {4.3} - الـTemplate ومقدمة عن الـTrigger الشاكي لله 7 1,618 13-08-16, 07:01 PM
آخر رد: Anas gafer
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (3- الانميشن) الشاكي لله 16 673 02-06-16, 02:53 PM
آخر رد: CLARO
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (2- البرمحة) الشاكي لله 1 181 14-05-16, 11:54 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (1- التصميم) الشاكي لله 1 178 14-05-16, 11:27 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] {3.3} - اداة الـ Grid الشاكي لله 14 2,689 31-03-16, 11:11 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] {4.6} - الـ Data Template و الـ Sample Data الشاكي لله 12 2,306 14-02-16, 10:54 AM
آخر رد: السندبااد
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الخامس) الشاكي لله 4 483 18-10-15, 11:46 PM
آخر رد: الشاكي لله
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الرابع) الشاكي لله 4 584 26-09-15, 02:48 PM
آخر رد: أبو عمر

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


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