24-06-2011, 11:39 AM
النتيجة
[attachment=91420:image006.png]
استخدام Grid:
يعتبر هذا اللوح من افضل الألواح على الأطلاق ويمكننا بواسطته عمل كل شئ يقوم به اي لوح آخر(تقريباً).
يقوم هذا اللوح بتقسيم المساحة المعطاة له إلى صفوف واعمدة غير مرئية ، ويمكن وضع العناصر داخل الخلايا (الناتجة من تقاطع الصف مع العمود) . والجميل هنا انه يمكن وضع اكثر من عنصر في نفس الخلية، وبشكل افتراضي كل Grid يتكون من صف واحد وعمود واحد ، ما يعني بانه يتكون من خلية واحدة بشكل افتراضي.
من اجل اضافة الصفوف و الأعمدة إلى Grid ، فإن علينا استخدام الخاصيتين Grid.RowDefinitions و Grid.ColumnDefinitions ، فلو اردنا اضافة صفين وثلاثة اعمدة فإننا نستخدم:
تكون الصفوف متساوية في الأرتفاع ، والأعمدة متساوية في العرض بشكل افتراضي.
ملاحظة:
لاحظ انه يجب استخدام العنصر Grid.RowDefinitions ، والعنصر Grid.ColumnDefinitions من اجل تحديد الصفوف والأعمدة المطلوبة. تسمى هذه الصيغة في Xaml بـ "صيغة العنصر الخاصية" (Property Element Syntax) وهي طريقة اخرى لتعيين الخصائص في الكائن إلى جانب "صيغة الواصفة" (Attribute Syntax) .
بعد ذلك يمكننا إضافة العناصر إلى Grid وتحديد الصف والعمود الذي يقع فيه كل عنصر عن طريق الخصائص المرفقة Grid.Row و Grid.Column:
الصفوف والأعمدة في Grid ترقم على الأساس الصفري ، بمعنى ان الصف الأول يكون رقمه 0 والصف الثاني يكون رقمه 1 وهكذا.
إذا لم نقم بتحديد الصف او العمود لعنصر معين فإن هذا العنصر يتم وضعه في الصف الأول والعمود الأول ، بسبب ان القيمة الأفتراضية للخصائص المرفقة Grid.Row و Grid.Column هي صفر(بمعنى الأول).
[attachment=91421:image007.png]
حجم الأعمدة والصفوف:
تقدم Grid ثلاث طرق لتحديد ارتفاع الصف وعرض الأعمدة:
- الحجم المطلق (Absolute size): حيث يتم تعيين رقم يمثل عدد الوحدات التي يشغلها العرض او الأرتفاع
- الحجم التلقائي(Automatic size): حيث يعطى الصف او العمود القدر الذي يحتاج اليه تماما (استنادا على حجم المحتوى)
- الحجم النسبي(Proportional size): حيث يتم تقسيم المساحة المعطاة على الصفوف اوالأعمدة
وبشكل افتراضي، يكون التناسب متساويا ما لم نقم بإضافة رقم معين يسبق النجمة مثل:
بهذا تكون نسبة الصف الأول إلى الصف الثاني هي 1 إلى 2.
عمل مربع الحوار السابق باستخدام Grid:
باستخدام هذه الطرق في التحجيم فإنه يمكننا استخدام Grid من اجل إنشاء نفس مربع الحوار السابق على النحو التالي :
الخاصية ShowGridLines:
يمكن عرض خطوط الشبكة في Grid بتعيين هذه الخاصية إلى True (كما يظهر في المثال السابق).
الخصائص المرفقة Grid.RowSpan و Grid.ColumnSpan
يمكننا ان نجعل العنصر يشغل اكثر من صف واحد او عمود واحد من خلال الخصائص Grid.RowSpan و Grid.ColumnSpan، فعلى سبيل المثال لو اردنا ان يكون الزر في الصف الأول والعمود الأول ويشغل صفين وعمودين فإننا نكتب :
تقسيم النوافذ باستخدام GridSplitter
باستخدام GridSplitter يمكننا ان نجعل المستخدم قادرا على تغيير عرض العمود او ارتفاع الصف بنفس الطريقة التي تظهر في نوافذ مثل Windows Explorer حيث يكون بالأمكان تغيير عرض قائمة المجلدات عن طريق سحب حافتها في الأتجاه المطلوب.
[attachment=91422:image009.png]
إضافة GridSplitter إلى Grid عملية سهلة رغم ان الطريقة غريبة بعض الشئ،
ومن الجيد ان نتذكر التالي:
- يجب وضع GridSplitter داخل خلية في Grid ، هذه الخلية يمكن ان تحتوي على عناصر اخرى وفي هذه الحالة يجب ان نتأكد من هذه العناصر لا تقوم بإخفاء GridSplitter (بمعنى تغطيه) عن طريق تعيين الهوامش (Margin). والأفضل ان نقوم بعمل عمود او صف مخصص لـ GridSplitter
- لا يقوم GridSplitter بتعديل حجم الخلية فقط انما يقوم بتعديل حجم الصف او العمود بالكامل، ولكي نجعل هذا السلوك ينسجم مع المظهر في UI فإن علينا ان نجعل GridSplitter يمتد على طول الصف او العمود المطلوب باستخدام الخصائص Grid.RowSpan و Grid.ColumnSpan.
- مبدأيا يكون GridSplitter غير مرئيا ، ومن اجل ان نجعله مرئيا فلا بد من اعطائه حجم معين ينسجم مع الأتجاه الذي يعمل عليه. عن طريق اعطائه عرض معين (مع الأعمدة) او طول معين (مع الصفوف).
- تحدد محاذاة GridSplitter طريقة عمله ، بمعنى هل سيعمل كمقسم افقي (لتغيير حجم الصفوف) او كمقسم رأسي (لتغيير حجم الأعمدة) ، فمن اجل ان يعمل كمقسم افقي فإنه يجب تعيين الخاصية VerticalAlignment إلى Center بحيث يتم تغيير حجم الصف في الأعلى والصف في الأسفل. ومن اجل ان يعمل كمقسم رأسي فإنه يجب تعيين الخاصية HorizontalAlignment إلى Center بحيث يتم تغيير حجم العمود في اليسار والعمود في اليمين. (يمكن ايضاً استخدام الخصائص ResizeDirection و ResizeBehavior في GridSplitter من اجل تحديد السلوك المطلوب)
المثال التالي يوضح كيفية عمل مقسم رأسي لتغيير حجم الأعمدة :
[attachment=91422:image009.png]
الخاصية ShowsPreview :
تكون قيمة الخاصية ShowsPreview في GridSplitter هي False بشكل افتراضي ، مايعني ان GridSplitter سوف يقوم بتغيير حجم العمود او الصف مباشرة خلال عملية السحب، وعند تغيير هذه الخاصية إلى True فإن GridSplitter سوف يسمح للمستخدم ان يقوم بمعاينة الحجم المحدد اولا وعند تحرير زر الماوس فإن الحجم الجديد يتم تطبيقه.
[attachment=91420:image006.png]
استخدام Grid:
يعتبر هذا اللوح من افضل الألواح على الأطلاق ويمكننا بواسطته عمل كل شئ يقوم به اي لوح آخر(تقريباً).
يقوم هذا اللوح بتقسيم المساحة المعطاة له إلى صفوف واعمدة غير مرئية ، ويمكن وضع العناصر داخل الخلايا (الناتجة من تقاطع الصف مع العمود) . والجميل هنا انه يمكن وضع اكثر من عنصر في نفس الخلية، وبشكل افتراضي كل Grid يتكون من صف واحد وعمود واحد ، ما يعني بانه يتكون من خلية واحدة بشكل افتراضي.
من اجل اضافة الصفوف و الأعمدة إلى Grid ، فإن علينا استخدام الخاصيتين Grid.RowDefinitions و Grid.ColumnDefinitions ، فلو اردنا اضافة صفين وثلاثة اعمدة فإننا نستخدم:
كود :
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>ملاحظة:
لاحظ انه يجب استخدام العنصر Grid.RowDefinitions ، والعنصر Grid.ColumnDefinitions من اجل تحديد الصفوف والأعمدة المطلوبة. تسمى هذه الصيغة في Xaml بـ "صيغة العنصر الخاصية" (Property Element Syntax) وهي طريقة اخرى لتعيين الخصائص في الكائن إلى جانب "صيغة الواصفة" (Attribute Syntax) .
بعد ذلك يمكننا إضافة العناصر إلى Grid وتحديد الصف والعمود الذي يقع فيه كل عنصر عن طريق الخصائص المرفقة Grid.Row و Grid.Column:
كود :
<Grid>
………
<Button Grid.Row="0" Grid.Column="0">Top Left</Button>
<Button Grid.Row="0" Grid.Column="1">Middle Left</Button>
<Button Grid.Row="1" Grid.Column="2">Bottom Right</Button>
<Button Grid.Row="1" Grid.Column="1">Bottom Middle</Button>
………
</Grid>إذا لم نقم بتحديد الصف او العمود لعنصر معين فإن هذا العنصر يتم وضعه في الصف الأول والعمود الأول ، بسبب ان القيمة الأفتراضية للخصائص المرفقة Grid.Row و Grid.Column هي صفر(بمعنى الأول).
[attachment=91421:image007.png]
حجم الأعمدة والصفوف:
تقدم Grid ثلاث طرق لتحديد ارتفاع الصف وعرض الأعمدة:
- الحجم المطلق (Absolute size): حيث يتم تعيين رقم يمثل عدد الوحدات التي يشغلها العرض او الأرتفاع
كود :
<ColumnDefinition Width="100"/>كود :
<ColumnDefinition Width="Auto"/>كود :
<ColumnDefinition Width="*"/>وبشكل افتراضي، يكون التناسب متساويا ما لم نقم بإضافة رقم معين يسبق النجمة مثل:
كود :
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>عمل مربع الحوار السابق باستخدام Grid:
باستخدام هذه الطرق في التحجيم فإنه يمكننا استخدام Grid من اجل إنشاء نفس مربع الحوار السابق على النحو التالي :
كود :
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<TextBox Margin="10" Grid.Row="0">This is a test.</TextBox>
<StackPanel Grid.Row="1" HorizontalAlignment="Right" Orientation="Horizontal">
<Button Margin="10,10,2,10" Padding="3">OK</Button>
<Button Margin="2,10,10,10" Padding="3">Cancel</Button>
</StackPanel>
</Grid>الخاصية ShowGridLines:
يمكن عرض خطوط الشبكة في Grid بتعيين هذه الخاصية إلى True (كما يظهر في المثال السابق).
الخصائص المرفقة Grid.RowSpan و Grid.ColumnSpan
يمكننا ان نجعل العنصر يشغل اكثر من صف واحد او عمود واحد من خلال الخصائص Grid.RowSpan و Grid.ColumnSpan، فعلى سبيل المثال لو اردنا ان يكون الزر في الصف الأول والعمود الأول ويشغل صفين وعمودين فإننا نكتب :
كود :
<Button Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2">Span Button</Button>تقسيم النوافذ باستخدام GridSplitter
باستخدام GridSplitter يمكننا ان نجعل المستخدم قادرا على تغيير عرض العمود او ارتفاع الصف بنفس الطريقة التي تظهر في نوافذ مثل Windows Explorer حيث يكون بالأمكان تغيير عرض قائمة المجلدات عن طريق سحب حافتها في الأتجاه المطلوب.
[attachment=91422:image009.png]
إضافة GridSplitter إلى Grid عملية سهلة رغم ان الطريقة غريبة بعض الشئ،
ومن الجيد ان نتذكر التالي:
- يجب وضع GridSplitter داخل خلية في Grid ، هذه الخلية يمكن ان تحتوي على عناصر اخرى وفي هذه الحالة يجب ان نتأكد من هذه العناصر لا تقوم بإخفاء GridSplitter (بمعنى تغطيه) عن طريق تعيين الهوامش (Margin). والأفضل ان نقوم بعمل عمود او صف مخصص لـ GridSplitter
- لا يقوم GridSplitter بتعديل حجم الخلية فقط انما يقوم بتعديل حجم الصف او العمود بالكامل، ولكي نجعل هذا السلوك ينسجم مع المظهر في UI فإن علينا ان نجعل GridSplitter يمتد على طول الصف او العمود المطلوب باستخدام الخصائص Grid.RowSpan و Grid.ColumnSpan.
- مبدأيا يكون GridSplitter غير مرئيا ، ومن اجل ان نجعله مرئيا فلا بد من اعطائه حجم معين ينسجم مع الأتجاه الذي يعمل عليه. عن طريق اعطائه عرض معين (مع الأعمدة) او طول معين (مع الصفوف).
- تحدد محاذاة GridSplitter طريقة عمله ، بمعنى هل سيعمل كمقسم افقي (لتغيير حجم الصفوف) او كمقسم رأسي (لتغيير حجم الأعمدة) ، فمن اجل ان يعمل كمقسم افقي فإنه يجب تعيين الخاصية VerticalAlignment إلى Center بحيث يتم تغيير حجم الصف في الأعلى والصف في الأسفل. ومن اجل ان يعمل كمقسم رأسي فإنه يجب تعيين الخاصية HorizontalAlignment إلى Center بحيث يتم تغيير حجم العمود في اليسار والعمود في اليمين. (يمكن ايضاً استخدام الخصائص ResizeDirection و ResizeBehavior في GridSplitter من اجل تحديد السلوك المطلوب)
المثال التالي يوضح كيفية عمل مقسم رأسي لتغيير حجم الأعمدة :
كود :
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition MinWidth="50"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
<Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
<Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
<Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
<GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"
Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center"
ShowsPreview="False"></GridSplitter>
</Grid>الخاصية ShowsPreview :
تكون قيمة الخاصية ShowsPreview في GridSplitter هي False بشكل افتراضي ، مايعني ان GridSplitter سوف يقوم بتغيير حجم العمود او الصف مباشرة خلال عملية السحب، وعند تغيير هذه الخاصية إلى True فإن GridSplitter سوف يسمح للمستخدم ان يقوم بمعاينة الحجم المحدد اولا وعند تحرير زر الماوس فإن الحجم الجديد يتم تطبيقه.

