[الشاكي لله]

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


--


اليوم درسنا بسيط سيتكلم عن اداة ال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)
^ اجراء احترازي لو انحذفت الصور

انتهى