19-06-14, 09:55 PM
(آخر تعديل لهذه المشاركة : 11-01-17, 04:04 AM {2} بواسطة الشاكي لله.)
السلام عليكم ورحمة الله وبركاته
--
اليوم درسنا بسيط سيتكلم عن اداة الBorder وهي اداة لاتعتبر من ادوات الLayout ، فاستخداماتها عامة ، ولكن ضروري نتعرف عليها قبل الجميع .
بسم الله
--
اليوم درسنا بسيط سيتكلم عن اداة الBorder وهي اداة لاتعتبر من ادوات الLayout ، فاستخداماتها عامة ، ولكن ضروري نتعرف عليها قبل الجميع .
بسم الله
ماهي اداة الـBorder
جميع الـContainer الخاصة بالLayout والتي ذكرنا اسمائها في الموضوع السابق ..
تلك الـContainer لاتدعم رسم حدود حول نفسها، فالBorder اداة وظيفتها بسيطة ، تقوم برسم حدود حول نفسها .
شاهد الصورة التالية :-
^ تم استعمال Border واستخدام اللون الاحمر .
الخصائص المهمة للـBorder
خاصية BorderBrush
خاصية تحدد فيها اللون المستعمل لرسم الحدود :
بعد التطبيق :
الكود المسؤول عن تطبيق الشكل السابق :-
PHP كود :
<Border BorderThickness="1" Height="195" Margin="123,69,0,0" Width="273" BorderBrush="#FF00E8D3"/>
--------------------
خاصية BackgroundBrush
خاصية مهمة وتستعمل دائما في المشاريع وهي موجودة في جميع العناصر وحتى الContainers :
بعد التطبيق :
الكود المسؤول عن تطبيق الشكل السابق :-
PHP كود :
<Border BorderThickness="1" Height="195" Margin="126,54,118,71" Width="273" BorderBrush="#FF00E8D3">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF172951" Offset="0"/>
<GradientStop Color="#FFBACCF5" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
--------------------
خاصية BorderThickness
من اسمها واضح انها تحدد سمك الحدود :
بعد التطبيق:
الكود المسؤول عن تطبيق الشكل السابق:
PHP كود :
<Border BorderThickness="5" Height="195" Margin="123,69,0,0" Width="273" BorderBrush="#FF00E8D3"/>
--------------------
خاصية CornerRadius
هي خاصية تقوم بتنعيم الزوايا :
بعد التطبيق :
وايضا هناك امكانية لتنعيم زاوية محدد فقط ، يعني مثلا تريد تنعيم الزاوية العليا-اليسرى والزاوية السفلى-اليمنى فقط :
بعد التطبيق :
الكود المسؤول عن تطبيق الشكل السابق :-
PHP كود :
<Border BorderThickness="5" Height="195" Margin="123,69,0,0" Width="273" BorderBrush="#FF00E8D3" CornerRadius="40,0,40,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF172951" Offset="0"/>
<GradientStop Color="#FFBACCF5" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
فلسفة الـChild الواحد
بعض الContainer في WPF ، لاتقبل سوى عنصر واحد بداخلها ..
والBorder هي احداها ، حيث انها تقبل عنصر واحد داخلها فقط .
شاهد الصورة التالية :
في الصورة اعلاه يقولك ، سيتم استبدال الbtn1 بالbtn2 ، حيث لايمكن ان يتواجد عنصرين داخل الBorder
وال Diagram التالي يوضح المقصد جيدا :
لذلك اداة Border هي حاوية (Container) تسمح بعنصر واحد فقط بداخلها ، لذلك ان احببت وضع اكثر من عنصر بداخلها قم باستعمال ال Grid داخل الBorder :
حيث ان الكود المسؤول عن تكوين العناصر اعلاه هو :-
PHP كود :
<Border BorderThickness="1" HorizontalAlignment="Left" Height="195" Margin="123,69,0,0"
VerticalAlignment="Top" Width="273" BorderBrush="#FF00E8D3">
<Grid>
<Button Content="Button" HorizontalAlignment="Left" Margin="139,91,0,0" VerticalAlignment="Top" Width="75"/>
<RadioButton Content="RadioButton" HorizontalAlignment="Left" Margin="63,32,0,0" VerticalAlignment="Top"/>
<Label Content="Label" HorizontalAlignment="Left" Margin="63,142,0,0" VerticalAlignment="Top"/>
<CheckBox Content="CheckBox" HorizontalAlignment="Left" Margin="63,91,0,0" VerticalAlignment="Top"/>
</Grid>
</Border>
وهذا هو المخطط يوضح العملية بشكل افضل :-
امثلة على الBorder في برامج فعلية
هذا وغير الكثير من الBorder فهو يستعمل في كل مكان ..
على طاري الWindow Rounded Border التي تتمتع بها واجهة Peerviewer ، فيمكن عملها ببساطة كما في الصورة المتحركة :
الكود المسؤول عن تكوين الشكل السابق :
PHP كود :
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" WindowStyle="None" Background="{x:Null}">
<Border BorderBrush="Black" BorderThickness="1" Background="White" CornerRadius="10"/>
</Window>
المهمة
كما اتفقنا في الموضوع السابق ، عند نهاية كل درس اطلب منك القيام بمهمة تنفذها وبعدين ترفع الصورة او المثال
وكل هذا لستفيد قدر الامكان ، لاني اؤمن ان WPF لايمكن اتقانها بشكل نظري فقط ، لابد من دخول الجانب العملي لأتقان هذه التقنية ..
لذلك المهمة المطلوبة منكم اخواني الاعزاء ..
* انشاء Window بحيث يكون الBorder المحيط بها بشكل Rounded (زوايا ناعمة)
وايضا قم باضافة ازرار Close & Minimize & Maxmize : وبرمجتها ان امكن
يمكنك استعمال كل ماتعلمته سابقا مثل خواص Margin & Padding وماتعلمته في هذا الدرس لإنتاج الشكل اعلاه ، بالطبع المهمة التي اطلبها منك لاتتعدى ماتعلمناه في هذا الدرس لذلك ان لم تستطع تصميم الواجهة اعلاه ، قم بقراءة الدرس مرة او مرتين وستتمكن من ذلك ان شاء الله
ملاحظة: زر Maximize يستعمل الرمز التالي : □
في الدرس القادم راح يكون هناك شرح مفصل للGrid ، لكن حتى الان يمكنك اعتبار الGrid كانها Panel عادية كالتي نستخدمها في Windows forms .
يالله في انتظار اعمالكم .
(في المرفقات تجدون الدرس بكامل صوره وتنسيقه جاهز للمشاهدة Offline)
^ اجراء احترازي لو انحذفت الصور
^ اجراء احترازي لو انحذفت الصور
انتهى