تقييم الموضوع :
  • 3 أصوات - بمعدل 5
  • 1
  • 2
  • 3
  • 4
  • 5
[WPF حتى الاحتراف] {3.3} - اداة الـ Grid
#11
(23-06-14, 01:04 PM)الشاكي لله كتب : بارك الله فيكم اخواني

ان شاء الله اليوم درسنا 3.4 الي بكون عن stackpanel

بانتظار الدرس ، ولعلي ألزمت نفسي بمتابعت دروسك ولا اذهب للمواقع العالمية حتى لا اتشتت كثيراً ، قليل نافع خير من كثير بلا فائدة ولا نفع ، والتدرج كذلك مطلوب حتى تثبت المعلومات صح.
قال رسول الله صلى الله عليه وسلم ( من قال لا إله إلا الله دخل الجنة ) حديث صحيح.
قال رسول الله صلى الله عليه وسلم ( كلمتان خفيفتان على اللسان ثقيلتان في الميزان حبيبتان للرحمن : سبحان الله وبحمده سبحان الله العظيم ) حديث صحيح.
الرد }}}
تم الشكر بواسطة:
#12
ارجو النظر في مثالي و هل يوجد ملاحظات ......
مشكلتي لا يتم الغاء الاطار التقليدي للويندوز ......


الملفات المرفقة
.rar   Wpf4.rar (الحجم : 107.2 ك ب / التحميلات : 39)
..................  و فوق كل ذي علم عليم  ................
الرد }}}
تم الشكر بواسطة:
#13
وعليكم السلام ورحمة الله وبركاته
شيء مبهر ومذهل هذا التخطيط الذي يحجم لك الأدوات آلياً تصغيراً وتكبيراً
كنا نكتب عشرات الأكواد من أجل ذلك والآن الأمر يتم بسهولة مع هذه التقينة الرائعة
أيضاً أداة GridSpilter مميزة للغاية وسهلة التعامل
تحية لك ولما تخطه يمينك أخي الحبيب
أسأل الله تعالى أن يجعله في موازينك
فاعلم أنه لا إله إلا الله
الرد }}}
تم الشكر بواسطة:
#14
(21-06-14, 01:25 AM)الشاكي لله كتب :
السلام عليكم ورحمة الله وبركاته



--




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

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



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




بسم الله..







كيف يمكن استخدام الاداة Use GridSpilter


اداة الـ 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 :








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








انتهى

كيف يمكن استخدام الاداة Use GridSpilter
الرد }}}
تم الشكر بواسطة:
#15
السلام عليكم ورحمة الله وبركاته
أخ mtalma هنا الجواب الشافي لسؤالك :
https://msdn.microsoft.com/ar-sa/library...00%29.aspx
فاعلم أنه لا إله إلا الله
الرد }}}
تم الشكر بواسطة: الشاكي لله , الشاكي لله


المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الثاني) الشاكي لله 9 7,530 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,964 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,947 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,748 14-05-16, 11:27 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] {3.1} - الـ Layout الشاكي لله 13 8,731 17-03-16, 12:14 PM
آخر رد: mtalma

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


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