+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : قسم لغات البرمجة الاخرى (http://vb4arb.com/vb/forumdisplay.php?fid=4)
+--- قسم : قسم البرمجة بتقنية WPF (http://vb4arb.com/vb/forumdisplay.php?fid=86)
+---- قسم : قسم دورات تقنية WPF (http://vb4arb.com/vb/forumdisplay.php?fid=87)
+---- الموضوع : [WPF حتى الاحتراف] {3.2} - اداة الـ Border (/showthread.php?tid=3265)
الصفحات:
1
2
[WPF حتى الاحتراف] {3.2} - اداة الـ Border - الشاكي لله - 19-06-14
السلام عليكم ورحمة الله وبركاته
--
اليوم درسنا بسيط سيتكلم عن اداة ال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)
^ اجراء احترازي لو انحذفت الصور
^ اجراء احترازي لو انحذفت الصور
انتهى
RE: [WPF حتى الاحتراف] {3.2} - اداة الـ Border - شمس الدين 03 - 20-06-14
بارك الله فيك وجزاك خيرا
احاول اتابع الدروس
RE: [WPF حتى الاحتراف] {3.2} - اداة الـ Border - Japan - 20-06-14
السلام عليكم و رحمة الله و بركاته
بارك الله فيك وزاد من علمك يا استاذنا القدير
الملف في المرفقات
RE: [WPF حتى الاحتراف] {3.2} - اداة الـ Border - الشاكي لله - 20-06-14
(20-06-14, 07:34 AM)Japan كتب : السلام عليكم و رحمة الله و بركاته
بارك الله فيك وزاد من علمك يا استاذنا القدير
الملف في المرفقات
رااائع جدا اخي العزيز
والي عجبني في مثالك اكثر هو استخدام الدالة DragMove المسؤولة عن تحريك مكان الفورم بالضغط على الborder.
PHP كود :
private void Border_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
this.DragMove();
}
وايضا ارى انك استخدمت الstyle وهذا الامر انا لحد الان ماتطرقت اليه ، فعلا ممتاز
RE: [WPF حتى الاحتراف] {3.2} - اداة الـ Border - Sajad - 20-06-14
السلام عليكم
بارك الله فيك اخونا العزيز جزاك الله خيرا لاتحافك المنتدى بهكذا دورات
تحياتي لك
RE: [WPF حتى الاحتراف] {3.2} - اداة الـ Border - عبد الله - 21-06-14
السلام عليكم ورحمة الله وبركاته
هذا عملي للدرس ،،، وفعلاً صدقت أخي محمد ، العمل العملي هو اللي يثبت المعلومة.
[attachment=2041]
-
RE: [WPF حتى الاحتراف] {3.2} - اداة الـ Border - الشاكي لله - 21-06-14
(21-06-14, 07:20 PM)عبد الله كتب : السلام عليكم ورحمة الله وبركاته
هذا عملي للدرس ،،، وفعلاً صدقت أخي محمد ، العمل العملي هو اللي يثبت المعلومة.
-
رائع جدا ياغالي ، وهذا المطلوب بالفعل ..
بارك الله فيك ، وعلى هذا المنوال بتكون وصلت لمستوى عالي في wpf لانك تطبق معاي
فكل ماوصلنا لدروس متقدمة راح يكون التطبيق اعقد واعقد ، عشان تكون مستعد لتصميم برامج حقيقية لwpf
RE: [WPF حتى الاحتراف] {3.2} - اداة الـ Border - VanToM - 22-06-14
بارك الله فيك يا غالي
سلمت يداك على هذا الابداع
التطبيق بالمرفقات
لكن هنالك مشكلة صغيرة عند عمل Maximize
لا اعرف ماهو الخطأ الذي وقعت به او المشكلة
!
RE: [WPF حتى الاحتراف] {3.2} - اداة الـ Border - hoob computer - 22-06-14
(22-06-14, 04:55 AM)VanToM كتب : بارك الله فيك يا غالي
سلمت يداك على هذا الابداع
التطبيق بالمرفقات
لكن هنالك مشكلة صغيرة عند عمل Maximize
لا اعرف ماهو الخطأ الذي وقعت به او المشكلة
عدلتك على مثالك, كان عندك خطأ في الـ Margin و أيضاً عدم وضع البوردر في وضع Strech ... إقرأ كود Xaml و ستعرف ما أقصده
مثالك بعد التعديل ستجده في المرفقات.
السلام عليكم
RE: [WPF حتى الاحتراف] {3.2} - اداة الـ Border - ali.alfoly - 15-07-14
السلام عليكم
جزاك الله خيرا اخي محمد
وهذا تطبيقي
