تقييم الموضوع :
  • 3 أصوات - بمعدل 5
  • 1
  • 2
  • 3
  • 4
  • 5
[WPF حتى الاحتراف] {3.2} - اداة الـ Border
#1
السلام عليكم ورحمة الله وبركاته


--


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



انتهى
الرد }}}
#2
بارك الله فيك وجزاك خيرا


احاول اتابع الدروس
الرد }}}
تم الشكر بواسطة:
#3
السلام عليكم و رحمة الله و بركاته
بارك الله فيك وزاد من علمك يا استاذنا القدير
الملف في المرفقات


الملفات المرفقة
.rar   vb4arb.rar (الحجم : 217.42 ك ب / التحميلات : 136)
الرد }}}
تم الشكر بواسطة: kslawy , السندبااد
#4
(20-06-14, 07:34 AM)Japan كتب : السلام عليكم و رحمة الله و بركاته
بارك الله فيك وزاد من علمك يا استاذنا القدير
الملف في المرفقات


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

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

PHP كود :
        private void Border_MouseLeftButtonDown(object senderSystem.Windows.Input.MouseButtonEventArgs e)
        {
            
this.DragMove();
        } 

وايضا ارى انك استخدمت الstyle وهذا الامر انا لحد الان ماتطرقت اليه ، فعلا ممتاز
الرد }}}
تم الشكر بواسطة: Japan
#5
السلام عليكم

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

تحياتي لك
الرد }}}
تم الشكر بواسطة: الشاكي لله
#6
السلام عليكم ورحمة الله وبركاته

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

   

-
قال رسول الله صلى الله عليه وسلم ( من قال لا إله إلا الله دخل الجنة ) حديث صحيح.
قال رسول الله صلى الله عليه وسلم ( كلمتان خفيفتان على اللسان ثقيلتان في الميزان حبيبتان للرحمن : سبحان الله وبحمده سبحان الله العظيم ) حديث صحيح.
الرد }}}
تم الشكر بواسطة:
#7
(21-06-14, 07:20 PM)عبد الله كتب : السلام عليكم ورحمة الله وبركاته

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



-



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

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

فكل ماوصلنا لدروس متقدمة راح يكون التطبيق اعقد واعقد ، عشان تكون مستعد لتصميم برامج حقيقية لwpf
الرد }}}
تم الشكر بواسطة:
#8
بارك الله فيك يا غالي
سلمت يداك على هذا الابداع
التطبيق بالمرفقات Wink
لكن هنالك مشكلة صغيرة عند عمل Maximize
لا اعرف ماهو الخطأ الذي وقعت به او المشكلة Smile !


الملفات المرفقة صورة/صور
   

.rar   WpfApplication2.rar (الحجم : 67.41 ك ب / التحميلات : 80)
الرد }}}
تم الشكر بواسطة:
#9
(22-06-14, 04:55 AM)VanToM كتب : بارك الله فيك يا غالي
سلمت يداك على هذا الابداع
التطبيق بالمرفقات Wink
لكن هنالك مشكلة صغيرة عند عمل Maximize
لا اعرف ماهو الخطأ الذي وقعت به او المشكلة Smile !

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

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


السلام عليكم


الملفات المرفقة
.rar   WpfApplication2.rar (الحجم : 72.08 ك ب / التحميلات : 69)
الرد }}}
تم الشكر بواسطة: VanToM
#10
السلام عليكم
جزاك الله خيرا اخي محمد
وهذا تطبيقي
الرد }}}
تم الشكر بواسطة: الشاكي لله , ابو ابراهيم


المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الثاني) الشاكي لله 9 7,530 06-12-20, 04:09 AM
آخر رد: Mohammed1991
  [WPF حتى الاحتراف] {1} - إنشاء برنامجك الاول الشاكي لله 30 21,881 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,981 25-01-17, 04:45 AM
آخر رد: hero2199
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الاول) الشاكي لله 5 5,208 02-12-16, 11:07 PM
آخر رد: alsef
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (3- الانميشن) الشاكي لله 16 8,948 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,749 14-05-16, 11:27 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] {3.3} - اداة الـ Grid الشاكي لله 14 9,716 31-03-16, 11:11 PM
آخر رد: السندبااد

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


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