[الشاكي لله]

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


--


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

انتهى

[شمس الدين 03]

بارك الله فيك وجزاك خيرا


احاول اتابع الدروس

[Japan]

السلام عليكم و رحمة الله و بركاته
بارك الله فيك وزاد من علمك يا استاذنا القدير
الملف في المرفقات

[الشاكي لله]

السلام عليكم و رحمة الله و بركاته
بارك الله فيك وزاد من علمك يا استاذنا القدير
الملف في المرفقات

رااائع جدا اخي العزيز

والي عجبني في مثالك اكثر هو استخدام الدالة DragMove المسؤولة عن تحريك مكان الفورم بالضغط على الborder.

PHP كود :

        private void Border_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            this.DragMove();
        } 


وايضا ارى انك استخدمت الstyle وهذا الامر انا لحد الان ماتطرقت اليه ، فعلا ممتاز

[Sajad]

السلام عليكم

بارك الله فيك اخونا العزيز جزاك الله خيرا لاتحافك المنتدى بهكذا دورات

تحياتي لك

[عبد الله]

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

هذا عملي للدرس ،،، وفعلاً صدقت أخي محمد ، العمل العملي هو اللي يثبت المعلومة.

   

-

[الشاكي لله]

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

هذا عملي للدرس ،،، وفعلاً صدقت أخي محمد ، العمل العملي هو اللي يثبت المعلومة.



-

رائع جدا ياغالي ، وهذا المطلوب بالفعل ..

بارك الله فيك ، وعلى هذا المنوال بتكون وصلت لمستوى عالي في wpf لانك تطبق معاي

فكل ماوصلنا لدروس متقدمة راح يكون التطبيق اعقد واعقد ، عشان تكون مستعد لتصميم برامج حقيقية لwpf

[VanToM]

بارك الله فيك يا غالي
سلمت يداك على هذا الابداع
التطبيق بالمرفقات
لكن هنالك مشكلة صغيرة عند عمل Maximize
لا اعرف ماهو الخطأ الذي وقعت به او المشكلة !

[hoob computer]

بارك الله فيك يا غالي
سلمت يداك على هذا الابداع
التطبيق بالمرفقات
لكن هنالك مشكلة صغيرة عند عمل Maximize
لا اعرف ماهو الخطأ الذي وقعت به او المشكلة !

عدلتك على مثالك, كان عندك خطأ في الـ Margin و أيضاً عدم وضع البوردر في وضع Strech ... إقرأ كود Xaml و ستعرف ما أقصده

مثالك بعد التعديل ستجده في المرفقات.


السلام عليكم

[ali.alfoly]

السلام عليكم
جزاك الله خيرا اخي محمد
وهذا تطبيقي