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



--




ذكرنا في الموضوع السابق ان ال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

المهم الكود المسؤول عن توليد هذا ال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 الممل :-

سي شارب :

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(1, GridUnitType.Star)

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


---

جرعات اضافية

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

Use GridSpilter

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

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

ShowGridLines Property

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

---

فيديو قصير

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

إقتباس :http://www.youtube.com/watch?v=r3wBtCZIvg0

---

المهمة

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

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

انتهى

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

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

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