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



--




ذكرنا في الموضوع السابق ان الGrid من المنظور العام يمكن اعتبارها كـ Panel عادية كالتي نستعملها مع الWindows Forms.

لكن من منظور الLayout فالـ Grid لها استخدام اخر ونمط معين لترتيب العناصر .



في جميع الاحوال ، يمكنك اعتبارها كـ Panel عادية ، بغض النظر عن وظيفتها كـ اداة للـLayout.



بسم الله..











اداة الـ Grid


اداة الـ Grid هي اداة من ادوات نظام الLayout ، وتستخدم لترتيب العناصر بشكل "جدول" اي انها تحتوي على Columns و Rows :




^صورة 1.1 : استخدام الGrid لعملLayout للعناصر











Rows & Columns



بما ان نظام الLayout في الGrid هو نظام جدولي ، فبطبيعة الحال لابد من وجود شيئ يسمى Columns وشيئ يسمى Rows ، وهذا شيئ طبيعي لاي جدول في العالم .


لكن عملية تحديد مساحات الخلايا التي تكونها الRows او الColumns ، تتم ب 3 طرق :
1- Star - تحديد مساحة الخلية بواسطة النسبة
2- Auto - تحديد مساحة الخلية بواسطة حجم العنصر
3- Fixed - تحديد مساحة الخلية بشكل ثابت






اولا : Star (*)

شاهد الصورة التالية :




في الصورة السابقة ، يوجد لدينا عمود واحد قام بتقسيم الGrid الى خليتين ..

هما الخلية رقم 1 والخلية رقم 2 .. تلاحظون في اعلى الخليتين وجود رقم وجنبه نجمة (10*) و (30*) ..


هذا يعني ان الخلية رقم 1 اخذت نسبة 10% من مساحة الGrid ، اما الخلية رقم 2 اخذت 30% من مساحة الGrid

هذا هو معنى النجمة فهي تقوم بتحديد مساحات الخلايا بشكل نسبي .



هذا يعني انه كل مازاد حجم الـGrid زادت مساحات الخلايا


ملاحظة : مااقوله ينطبق على الRows ايضا




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





ثانيا : Auto

لما تحدد Auto ، يتم تحديد مساحة الخلية بناء على حجم العنصر التي تحتويه .



شاهد الصورة التالية :




في الصورة اعلاه : مساحة الخلية تساوي بالضبط عرض (width) الButton

هذا يعني ان مساحة الخلية تتغير بتغير حجم الbutton.





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





ثالثا : Fixed

اضنها لاتحتاج الى توضيح ، فما عليك الا ان تحدد عدد الPixel ليتم تحجيم الخلية



شاهد الصورة التالية :-




هذا يعني انه مهما تغير حجم الـGrid لن تتغير مساحات الخلايا










كود XAML & Codebehind



في اغلب دروس هذه الدورة ستجدون هذا القسم الذي يتم فيه عرض كود XAML المسؤول عن تكوين العناصر وتبعياتها، والCode-behind لو حبيت تتعامل مع العناصر برمجيا .


شاهد الصورة التالية :-


^ ماتذكركم بلعبة X-O Big GrinTongue



المهم الكود المسؤول عن توليد هذا الGrid -
كود Xaml :

PHP كود :
<Grid Margin="0" HorizontalAlignment="Center" Width="338" VerticalAlignment="Center" Height="193">
            <
Grid.ColumnDefinitions>
                <
ColumnDefinition Width="5*"/>
                <
ColumnDefinition Width="5*"/>
                <
ColumnDefinition Width="5*"/>
            </
Grid.ColumnDefinitions>
            <
Grid.RowDefinitions>
                <
RowDefinition Height="5*"/>
                <
RowDefinition Height="7*"/>
                <
RowDefinition Height="5*"/>
            </
Grid.RowDefinitions>
        </
Grid



اما لو حبيت تتعامل مع الCode-behind المملConfused :-

سي شارب :
PHP كود :
Grid grid = new Grid();
 
ColumnDefinition col1 = new ColumnDefinition();
col1.Width GridLength.Auto;
ColumnDefinition col2 = new ColumnDefinition();
col2.Width = new GridLength(1,GridUnitType.Star);
 
grid.ColumnDefinitions.Add(col1);
grid.ColumnDefinitions.Add(col2); 


فيجوال بيسك:

PHP كود :
Dim grid As New Grid()

Dim col1 As New ColumnDefinition()
col1.Width GridLength.Auto
Dim col2 
As New ColumnDefinition()
col2.Width = New GridLength(1GridUnitType.Star)

grid.ColumnDefinitions.Add(col1)
grid.ColumnDefinitions.Add(col2










جرعات اضافية



في هذا القسم سأتكلم عن امور ثانوية لست ملزما باستعمالها ، لكن قد تفيدك في المستقبل .






Use GridSpilter


هذه الاداة توفر لك امكانية تحجيم الخلايا وقت الRuntime ، كما هو ظاهر في الصورة التالية :








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





ShowGridLines Property

هذه الخاصية التابعة للGrid تقوم باظهار خطوط الGrid وقت الRuntime كما هو ظاهر في الصورة التالية :











فيديو قصير


في الاسفل تجدون فيديو قصير يشرح كيفية انشاء الGrid مع اضافة الRows + Columns مع شرح كيفية اضافة العناصر له .

















المهمة



مهمتكم اخواني الاعزاء في هذا الدرس هو عمل هذا النموذج باستعمال الGrid :






يالله ننتظر اعمالكم ..







انتهى


الرد }}}}
#2
السلام عليكم ورحمة الله و بركاته
شكرا جزيلا على هذه الدروس الرائعة
امد الله في عمرك و زاد من علمك استاذنا القدير
الملف في المرفقات


الملفات المرفقة
.rar   vb4arb.rar (الحجم : 195.68 ك ب / التحميلات : 80)
الرد }}}}
تم الشكر بواسطة: kslawy
#3
السلام عليكم ورحمة الله وبركاته

الله يوفقك لإكمال هذه الدروس حتى الاحتراف Shy

أخي في شرح الفيديو لا يظهر الماوسSad ، ظهوره مهم لنعرف ما هو المكان الذي ضغطت عليه Wink
(وَقُل رَّبِّ زِدْنِي عِلْمًا)

الرد }}}}
تم الشكر بواسطة:
#4
(21-06-14, 07:15 PM)kslawy كتب : السلام عليكم ورحمة الله وبركاته

الله يوفقك لإكمال هذه الدروس حتى الاحتراف Shy

أخي في شرح الفيديو لا يظهر الماوسSad ، ظهوره مهم لنعرف ما هو المكان الذي ضغطت عليه Wink


اي والله صح مانتبهت

هذا لاني مصور على غير العادة ببرنامج snagit وليس camtasia ، هل تضن اني بحاجة الى اعادة تصوير الفيديو او يمشي الحال .؟؟؟
الرد }}}}
تم الشكر بواسطة:
#5
(21-06-14, 12:36 PM)Japan كتب : السلام عليكم ورحمة الله و بركاته
شكرا جزيلا على هذه الدروس الرائعة
امد الله في عمرك و زاد من علمك استاذنا القدير
الملف في المرفقات


رائع جدا باين ان عندك ذوق في التصميم ..



لكن عندي ملاحظتين :-

الملاحظة الاولى انك استخدمت star للعمود الاول الذي يحتوي على الTextbox لهذه جرب تكبر الWindow ـ بتلاقي الtext يكبر معاها بعد ، وهذا الامر غير محبذ ، افضل شيئ لهذا الموقف هو استعمال Auto

الملاحظة الثانية :- استخدام Textbox ، هذا خطا فادح ، التيكست بوكس كما عرفناها نستعملها لادخال البيانات من المستخدم ، ولبس لعرض النصوص!!


البديل هو استخدام اداة الLabel او الTextblock وانا افضل الاخيرة لانها اخف .
الرد }}}}
تم الشكر بواسطة: Japan
#6
بارك الله فيك وجعله في ميزان حسناتك يا غالي Heart
والله دروسك اكثر من رائعة ومفيده جداً ومفهومه Smile
تطبيقي بالمرفقات Wink


الملفات المرفقة صورة/صور
   

.rar   WpfApplication2.rar (الحجم : 234.4 ك ب / التحميلات : 40)
الرد }}}}
تم الشكر بواسطة:
#7
السلام عليكم ورحمة الله و بركاته,

دروس ممتعة جداً و مفيدة اكثر, حتى بالنسبة لي (كمبرمج بهذه التقنية WPF) لا أستخف بهكذا دروس, هنالك امور ربما لا نلاحظها اثناء برمجتنا للبرامج.
لكن, هكذا مقالات و دروس مفيدة و لو كانت بدائية لكنها مفيدة جداً.
فإن الأساسيات مهمة جداً في البرمجة Smile

جزاك الله خيراً أخوية محمد على كل ما تقدمه للمنتدى Smile.


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

هذا عملي للدرس ، ودرس ممتع ونافع بُورك فيك.

   
قال رسول الله صلى الله عليه وسلم ( من قال لا إله إلا الله دخل الجنة ) حديث صحيح.
قال رسول الله صلى الله عليه وسلم ( كلمتان خفيفتان على اللسان ثقيلتان في الميزان حبيبتان للرحمن : سبحان الله وبحمده سبحان الله العظيم ) حديث صحيح.
الرد }}}}
تم الشكر بواسطة: الشاكي لله
#9
السلام عليكم

بارك الله فيك اخونا الغالي جزاك الله خيرا

تحياتي
الرد }}}}
تم الشكر بواسطة: الشاكي لله
#10
بارك الله فيكم اخواني

ان شاء الله اليوم درسنا 3.4 الي بكون عن stackpanel
الرد }}}}
تم الشكر بواسطة: Japan


المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الاول) الشاكي لله 5 748 02-12-16, 11:07 PM
آخر رد: alsef
  [WPF حتى الاحتراف] {1} - إنشاء برنامجك الاول الشاكي لله 29 6,231 16-08-16, 11:09 AM
آخر رد: أبوبكر سويدان
  [WPF حتى الاحتراف] {4.3} - الـTemplate ومقدمة عن الـTrigger الشاكي لله 7 1,638 13-08-16, 07:01 PM
آخر رد: Anas gafer
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (3- الانميشن) الشاكي لله 16 682 02-06-16, 02:53 PM
آخر رد: CLARO
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (2- البرمحة) الشاكي لله 1 190 14-05-16, 11:54 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (1- التصميم) الشاكي لله 1 183 14-05-16, 11:27 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] {3.1} - الـ Layout الشاكي لله 13 2,898 17-03-16, 12:14 PM
آخر رد: mtalma
  [WPF حتى الاحتراف] {4.6} - الـ Data Template و الـ Sample Data الشاكي لله 12 2,348 14-02-16, 10:54 AM
آخر رد: السندبااد
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الخامس) الشاكي لله 4 491 18-10-15, 11:46 PM
آخر رد: الشاكي لله
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الرابع) الشاكي لله 4 592 26-09-15, 02:48 PM
آخر رد: أبو عمر

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


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