08-07-14, 11:51 PM
(آخر تعديل لهذه المشاركة : 18-01-17, 08:17 PM {2} بواسطة الشاكي لله.)
السلام عليكم ورحمة الله وبركاته
الـ Style
هو كود XAML يعبر عن مجموعة Value لخصائص معينة .
الStyle لابد ان يكون مستهدفا لنوع واحد من الControls ، يعني لو قمت بإنشاء Style وقمت باستهداف الButton ، فسيصبح الStyle مخصصا للButton فقط ولا يجوز استعماله مع Textbox او اي نوع اخر من الControls .
كل Controls في WPF يوجد له خاصية باسم Style من خلالها تحدد الStyle الذي تريد تطبيقه على الControl
فائدة الStyle
مبدأيا ، فائدة الStyle لاتتعدى كونها اختصارا للأكواد الطويلة وتسهيل نقل الكود من مكان الى اخر .
شاهد الصورة التالية :-
هل تعرف طول الكود الذي قام بتكوين هذا الشكل ؟ :
PHP كود :
<Button Content="button" HorizontalAlignment="Left" Margin="43,53,0,0"
VerticalAlignment="Top" Width="183" Height="62"
FontFamily="Rockwell Extra Bold" FontStyle="Italic" FontWeight="Bold" FontSize="36" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleX="19.527"/>
<RotateTransform/>
<TranslateTransform X="-18.796"/>
</TransformGroup>
</Button.RenderTransform>
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.013"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFE6E6E6" Offset="0.447"/>
<GradientStop Color="#FFE6DEDE" Offset="0.46"/>
</LinearGradientBrush>
</Button.Background>
</Button>
الان لو قررنا صناعة المثال التالي :-
مسامحة الجوع مأثر شوي
في المثال السابق يوجد 6 ازرار يشتركون في نفس الخصائص ماعدا خاصية Content (اسم الطبق) وهي تختلف من زر الى اخر .
ولكن مازال الكود طويل جدا لاحظوا هذا كود البرنامج كامل (لاحظوا اغلب الاكواد متكررة 6 مرات) !!! :-
PHP كود :
<Window x:Class="WpfApplication5.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">
<Grid>
<Button Content="بيتزا جبن" HorizontalAlignment="Left" Margin="43,53,0,0" VerticalAlignment="Top" Width="183" Height="62"
FontFamily="Rockwell Extra Bold" FontStyle="Italic" FontWeight="Bold" FontSize="36" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleX="19.527"/>
<RotateTransform/>
<TranslateTransform X="-18.796"/>
</TransformGroup>
</Button.RenderTransform>
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.013"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFE6E6E6" Offset="0.447"/>
<GradientStop Color="#FFE6DEDE" Offset="0.46"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="باستا" HorizontalAlignment="Left" Margin="54,145,0,0" VerticalAlignment="Top" Width="183" Height="62"
FontFamily="Rockwell Extra Bold" FontStyle="Italic" FontWeight="Bold" FontSize="36" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleX="19.527"/>
<RotateTransform/>
<TranslateTransform X="-18.796"/>
</TransformGroup>
</Button.RenderTransform>
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.013"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFE6E6E6" Offset="0.447"/>
<GradientStop Color="#FFE6DEDE" Offset="0.46"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="برياني لحم" HorizontalAlignment="Left" Margin="67,231,0,0" VerticalAlignment="Top" Width="183"
Height="62" FontFamily="Rockwell Extra Bold"
FontStyle="Italic" FontWeight="Bold" FontSize="36" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleX="19.527"/>
<RotateTransform/>
<TranslateTransform X="-18.796"/>
</TransformGroup>
</Button.RenderTransform>
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.013"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFE6E6E6" Offset="0.447"/>
<GradientStop Color="#FFE6DEDE" Offset="0.46"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="سمبوسة" HorizontalAlignment="Left" Margin="316,52,0,0" VerticalAlignment="Top" Width="183"
Height="62" FontFamily="Rockwell Extra Bold" FontStyle="Italic" FontWeight="Bold" FontSize="36" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleX="19.527"/>
<RotateTransform/>
<TranslateTransform X="-18.796"/>
</TransformGroup>
</Button.RenderTransform>
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.013"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFE6E6E6" Offset="0.447"/>
<GradientStop Color="#FFE6DEDE" Offset="0.46"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="فتوش" HorizontalAlignment="Left" Margin="326,144,0,0" VerticalAlignment="Top" Width="183"
Height="62" FontFamily="Rockwell Extra Bold" FontStyle="Italic" FontWeight="Bold" FontSize="36" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleX="19.527"/>
<RotateTransform/>
<TranslateTransform X="-18.796"/>
</TransformGroup>
</Button.RenderTransform>
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.013"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFE6E6E6" Offset="0.447"/>
<GradientStop Color="#FFE6DEDE" Offset="0.46"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="شوربة" HorizontalAlignment="Left" Margin="332,231,0,0" VerticalAlignment="Top" Width="183"
Height="62" FontFamily="Rockwell Extra Bold" FontStyle="Italic" FontWeight="Bold" FontSize="36" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleX="19.527"/>
<RotateTransform/>
<TranslateTransform X="-18.796"/>
</TransformGroup>
</Button.RenderTransform>
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.013"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFE6E6E6" Offset="0.447"/>
<GradientStop Color="#FFE6DEDE" Offset="0.46"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Label Content="ماذا تريد ان تفطر اليوم ؟" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="20"
HorizontalContentAlignment="Right" Foreground="Red"/>
</Grid>
</Window>
في هذه الحالة بما ان لدينا عدة Controls يشتركون في نفس الخصائص ، نقدر نستعمل معهم الSyle لاختصار الكود بدل ان يتكرر 6 مرات ، وهذا ماسنقوم به في الاجزاء التالية .
مفهوم الResource
نقوم بكتابة الStyle في منطقة تسمى الResource وهي منطقة تضع فيها اكوادك لاستعمالها لاحقا ..
وهو شبيه جدا بمفهوم الResource في الWindows Forms حيث كنا في الWinForm نستعمل تلك المنطقة لحفظ الصور والملفات التي نحتاجها مع الPictureBox وغيرها من الامور التي لاتخفى على اي مبرمج WinForm
نفس الشيئ في WPF هناك منطقة تسمى Resource ولكن ليست لحفظ الصور والملفات .. وانما نستخدمها لحفظ كود XAML فقط .
اين توجد هذه المنطقة ؟
في الحقيقة هذه ليست منطقة بل "مناطق" ان صح التعبير .
لان الWindow وجميع ادوات الLayout والUI element تحتوي على هذه المنطقة :
PHP كود :
<Window x:Class="WpfApplication6.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">
<Window.Resources>
<!--here resource arae for Window-->
</Window.Resources>
<Grid>
<Border>
<Border.Resources>
<!--here resource arae for Grid-->
</Border.Resources>
</Border>
<Button>
<Button.Resources>
<!--here resource arae for Button-->
</Button.Resources>
</Button>
</Grid>
</Window>
كما ترون ايها السادة الكرام ، الWindow له منطقة Resource وكذلك الBorder والButton
لكن انتبهوا ، لايمكن الوصول للResource من عنصر ليس له علاقة Child-Parent مع العنصر صاحب الResource .
بمعنى ، في الكود السابق يوجد هناك Border و Button لكن ليس بينهم علاقة Parent-Child فكلاهما Brothers تحت مظلة الوالد الـGrid
لذلك لو اردت ان تصل الى كود في منطقة الResource التابعة للBorder من خلال الButton لن يمكنك ذلك لان لاتوجد بينهما علاقة Child-Parent .
لذلك الحالة الاكثر شيوعا هو استخدام منطقة الResource التابعة للWindow لان طبيعيا الWindow هو الParent لجميع العناصر :
PHP كود :
<Window x:Class="WpfApplication6.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">
<Window.Resources>
<!--here resource arae for Window-->
</Window.Resources>
<Grid>
</Grid>
</Window>
وهناك ايضا من يستعمل منطقة الResouce الخاصة بملف App.xaml ليحصل على امكانية الوصول من اي مكان في البرنامج .
ملاحظة : نستخدم هذه الصيغة <!--comment--> لكتابة تعليق في XAML
كتابة الStyle
كما قلنا في الجزء السابق ، نقوم بكتابة كود الStyle في منطقة الResource ..
وسنستعمل منطقة الResource الخاصة بالWindow لان ذلك هو الاستخدام الاكثر شيوعا .
الصيغة العامة لكتابة Style :-
PHP كود :
<Style x:Key="yourKey" TargetType="controlType" >
<Setter Property="propertyName" Value="propertyValue" />
</Style>
مثال :-
PHP كود :
<Style x:Key="ButtonStyle" TargetType="Button" >
<Setter Property="Background" Value="Red" />
<Setter Property="FontSize" Value="20" />
</Style>
شرح الكود :-
الان كل Button يرتبط بهذا الStyle يتم استبدال قيمة خاصيتي Backgroud , Fontsize للButton بالموجود في الStyle .
ربط الStyle بالControl
نستطيع ربط الStyle بالControl من خلال صندوق الخصائص او يدويا بكتابة كود XAML
وانا انصح باستعمال الطريقة اليدوية دائما لتعتاد على الكتابة بXAML .
الان في الجزء السابق قمنا بكتابة Style يقوم بتغيير الBackground الى Red والFontSize الى 20 .
اولا نقوم باضافة زر عادي الى ال Window :
هذا الزر يحتوي على خاصية Background وتساوي Gray
ويحتوي ايضا على خاصية FontSize وتساوي 8
لاحظ كود الStyle لازال موجودا في منطقة الResource الا انه لم يُطبق على الButton حتى الان
كيف نقوم بالربط ؟
ببساطة الطريقة ستكون كالتالي :-
PHP كود :
<Button Content="Button" Margin="174,128,192,101" Width="151" Height="90" Style="{StaticResource ButtonStyle}"/>
كما تلاحظ ، قمنا بجعل خاصية Style تأخذ قيمة {StaticResource ButtonStyle}
وبالتالي اصبح شكل الButton بعد تطبيق الكود السابق بالشكل التالي :-
تم استبدال خاصيتي Background & FontSize بالموجود في الـ Style
الـ Markup Extension
ذكرنا في ثالث موضوع من هذه الدورة اهمية الMarkup Extension وقلنا انه صيغة معينة تتكون من (مُعامل ومفتاح) تشير الى قيمة في مكان ما ، وتكتب الMarkup Extension بين قوسين {} .
نرجع للجزء السابق حين ربطنا الStyle بالButoon
PHP كود :
Style="{StaticResource ButtonStyle}"
--
الButtonStyle هو مفتاح الوصول (x:key) للStyle كما هو ظاهر :-
PHP كود :
<Style x:Key="ButtonStyle" TargetType="Button" >
<Setter Property="Background" Value="Red" />
<Setter Property="FontSize" Value="20" />
</Style>
اما الStaticResource فهو المعامل الذي يشير ان هذا الStyle موجود في منطقة Resource
--
المعامل StaticResource من الممكن ان يستبدل بالمعامل DynamicResource
PHP كود :
Style="{DynamicResource ButtonStyle}"
هناك فرق وسيتم توضيحه في الرد القادم .
مثال كتابة الStyle
في بداية الموضوع شاهدنا المثال التالي :-
ولاحظنا كيف ان الكود الذي قام بتكوين هذا الشكل كان طويل جدا ومتكرر اكثر من مرة :-
PHP كود :
<Button Content="بيتزا جبن" HorizontalAlignment="Left" Margin="43,53,0,0" VerticalAlignment="Top" Width="183" Height="62"
FontFamily="Rockwell Extra Bold" FontStyle="Italic" FontWeight="Bold" FontSize="36" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleX="19.527"/>
<RotateTransform/>
<TranslateTransform X="-18.796"/>
</TransformGroup>
</Button.RenderTransform>
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.013"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFE6E6E6" Offset="0.447"/>
<GradientStop Color="#FFE6DEDE" Offset="0.46"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="باستا" HorizontalAlignment="Left" Margin="54,145,0,0" VerticalAlignment="Top" Width="183" Height="62"
FontFamily="Rockwell Extra Bold" FontStyle="Italic" FontWeight="Bold" FontSize="36" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleX="19.527"/>
<RotateTransform/>
<TranslateTransform X="-18.796"/>
</TransformGroup>
</Button.RenderTransform>
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.013"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFE6E6E6" Offset="0.447"/>
<GradientStop Color="#FFE6DEDE" Offset="0.46"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="برياني لحم" HorizontalAlignment="Left" Margin="67,231,0,0" VerticalAlignment="Top" Width="183"
Height="62" FontFamily="Rockwell Extra Bold" FontStyle="Italic" FontWeight="Bold" FontSize="36" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleX="19.527"/>
<RotateTransform/>
<TranslateTransform X="-18.796"/>
</TransformGroup>
</Button.RenderTransform>
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.013"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFE6E6E6" Offset="0.447"/>
<GradientStop Color="#FFE6DEDE" Offset="0.46"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="سمبوسة" HorizontalAlignment="Left" Margin="316,52,0,0" VerticalAlignment="Top" Width="183"
Height="62" FontFamily="Rockwell Extra Bold" FontStyle="Italic" FontWeight="Bold" FontSize="36" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleX="19.527"/>
<RotateTransform/>
<TranslateTransform X="-18.796"/>
</TransformGroup>
</Button.RenderTransform>
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.013"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFE6E6E6" Offset="0.447"/>
<GradientStop Color="#FFE6DEDE" Offset="0.46"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="فتوش" HorizontalAlignment="Left" Margin="326,144,0,0" VerticalAlignment="Top" Width="183" Height="62"
FontFamily="Rockwell Extra Bold" FontStyle="Italic" FontWeight="Bold" FontSize="36" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleX="19.527"/>
<RotateTransform/>
<TranslateTransform X="-18.796"/>
</TransformGroup>
</Button.RenderTransform>
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.013"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFE6E6E6" Offset="0.447"/>
<GradientStop Color="#FFE6DEDE" Offset="0.46"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="شوربة" HorizontalAlignment="Left" Margin="332,231,0,0" VerticalAlignment="Top" Width="183" Height="62"
FontFamily="Rockwell Extra Bold" FontStyle="Italic" FontWeight="Bold" FontSize="36" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleX="19.527"/>
<RotateTransform/>
<TranslateTransform X="-18.796"/>
</TransformGroup>
</Button.RenderTransform>
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.013"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFE6E6E6" Offset="0.447"/>
<GradientStop Color="#FFE6DEDE" Offset="0.46"/>
</LinearGradientBrush>
</Button.Background>
</Button>
يمكننا التقليل من طول هذا الكود وجعله في Style واحد وبالتالي لن يتكرر ابدا .
مرحلة كتابة الStyle
---
اولا :- التعريف بالستايل :
PHP كود :
<Style x:Key="myFirstStyle" TargetType="Button">
ثانيا :- كتابة الخصائص :-
PHP كود :
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontStyle" Value="Italic" />
<Setter Property="FontFamily" Value="Rockwell Extra Bold" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="36" />
<Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleX="19.527"/>
<RotateTransform/>
<TranslateTransform X="-18.796"/>
</TransformGroup>
</Setter.Value>
</Setter>
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.013"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFE6E6E6" Offset="0.447"/>
<GradientStop Color="#FFE6DEDE" Offset="0.46"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
نلاحظ ان هناك Setter تستخدم ميزة Property as element ، مثل Setter Background
حيث لايمكننا وضع الValue في سطر واحد ، فقمنا بفتح Element باسم Setter.Value وكتبنا قيمة الBackground المطلوبة فيه .
الان نربط الازرار ال6 بالستايل :-
PHP كود :
<Button Content="بيتزا جبن" Margin="48,55,286,202" Width="183" Height="62" Style="{StaticResource myFirstStyle}" />
<Button Content="باستا" Margin="48,149,286,108" Width="183" Height="62" Style="{StaticResource myFirstStyle}" />
<Button Content="برياني لحم" Margin="53,240,281,17" Width="183" Height="62" Style="{StaticResource myFirstStyle}" />
<Button Content="سمبوسة" Margin="287,59,47,198" Width="183" Height="62" Style="{StaticResource myFirstStyle}" />
<Button Content="فتوش" Margin="307,149,27,108" Width="183" Height="62" Style="{StaticResource myFirstStyle}" />
<Button Content="شوربة" Margin="326,241,8,16" Width="183" Height="62" Style="{StaticResource myFirstStyle}" />
لاحظ تخلصنا من الاكواد المكررة والطويلة بواسطة تجميع الخصائص ووضعها داخل ال Style
للمزيد من التفاصيل حول الMarkup Extension والPropertie as element راجع الدرس الثالث من هذه الدورة .
سهولة صيانة الStyle
احدى الاهداف التي تحققها مع ميزة الStyle هي انه بكل سهولة وراحة تستطيع تغيير خصائص الControls بكود واحد ، والسبب واضح وهو انهم جميعا مرتبطين بالStyle
شاهد الصورة المتحركة :-
لاحظ من خلال تغيير بسيط في اكواد الStyle استطيع تغيير خصائص الازرار كامل
حقيقا هذا ماتفعله البرامج الكبرى التي تحتوي على ثيمات
فلما تستخدم الثيم الاسود ، يتم تغيير FontColor الى اللون الابيض ، هل تضن انهم يقومون بعمل Foreach لكل Control ويقومون بتغيير لونه ؟؟
لالا فقط يقومون بكتابة سطر واحد ويقوم ذلك السطر بتغيير كامل الوان الControls
كما هو واضح في الصورة المتحركة .
المهمة
المهمة في هذا الدرس شيئ مهم جدا ، حيث اتقان الStyle من اهم الامور لك كمبرمج WPF
لذلك المطلوب منكم اخواني كتابة Style يقوم بجعل هذه الControls بهذا الشكل :-
لاريد اكواد مكررة بهذا الشكل :
PHP كود :
<Button Content="دجاج" HorizontalAlignment="Left" Margin="123,88,0,0" VerticalAlignment="Top" Width="264" Height="33"
FontFamily="Courier New" FontSize="18">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE2E2E2" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="WhiteSmoke" Offset="0.637"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="لحم" HorizontalAlignment="Left" Margin="123,138,0,0" VerticalAlignment="Top" Width="264" Height="33"
FontFamily="Courier New" FontSize="18">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE2E2E2" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="WhiteSmoke" Offset="0.637"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="سمك" HorizontalAlignment="Left" Margin="123,190,0,0" VerticalAlignment="Top" Width="264" Height="33"
FontFamily="Courier New" FontSize="18">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE2E2E2" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="WhiteSmoke" Offset="0.637"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="لا اريد شيئا" HorizontalAlignment="Left" Margin="123,241,0,0" VerticalAlignment="Top" Width="264"
Height="33" FontFamily="Courier New" FontSize="18">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE2E2E2" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="WhiteSmoke" Offset="0.637"/>
</LinearGradientBrush>
</Button.Background>
</Button>
اريد كود Style يجمع كل هذه الخصائص ، كما فعلنا في الاجزاء السابقة .
يتبع ..