تقييم الموضوع :
  • 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


انتهى


الملفات المرفقة
.rar   [WPF حتى الاحتراف] {3.2} - اداة الـ Border.part2.rar (الحجم : 76.82 ك ب / التحميلات : 112)
.rar   [WPF حتى الاحتراف] {3.2} - اداة الـ Border.part1.rar (الحجم : 976.56 ك ب / التحميلات : 134)
الرد }}}}
#2
بارك الله فيك وجزاك خيرا


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


الملفات المرفقة
.rar   vb4arb.rar (الحجم : 217.42 ك ب / التحميلات : 83)
الرد }}}}
تم الشكر بواسطة: 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 ك ب / التحميلات : 47)
الرد }}}}
تم الشكر بواسطة:
#9
(22-06-14, 04:55 AM)VanToM كتب : بارك الله فيك يا غالي
سلمت يداك على هذا الابداع
التطبيق بالمرفقات Wink
لكن هنالك مشكلة صغيرة عند عمل Maximize
لا اعرف ماهو الخطأ الذي وقعت به او المشكلة Smile !

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

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


السلام عليكم


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


المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الاول) الشاكي لله 5 775 02-12-16, 11:07 PM
آخر رد: alsef
  [WPF حتى الاحتراف] {1} - إنشاء برنامجك الاول الشاكي لله 29 6,273 16-08-16, 11:09 AM
آخر رد: أبوبكر سويدان
  [WPF حتى الاحتراف] {4.3} - الـTemplate ومقدمة عن الـTrigger الشاكي لله 7 1,653 13-08-16, 07:01 PM
آخر رد: Anas gafer
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (3- الانميشن) الشاكي لله 16 708 02-06-16, 02:53 PM
آخر رد: CLARO
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (2- البرمحة) الشاكي لله 1 198 14-05-16, 11:54 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (1- التصميم) الشاكي لله 1 188 14-05-16, 11:27 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] {3.3} - اداة الـ Grid الشاكي لله 14 2,745 31-03-16, 11:11 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] {3.1} - الـ Layout الشاكي لله 13 2,918 17-03-16, 12:14 PM
آخر رد: mtalma
  [WPF حتى الاحتراف] {4.6} - الـ Data Template و الـ Sample Data الشاكي لله 12 2,368 14-02-16, 10:54 AM
آخر رد: السندبااد
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الخامس) الشاكي لله 4 498 18-10-15, 11:46 PM
آخر رد: الشاكي لله

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


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