+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (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 حتى الاحتراف] {4.2} - الـ Style ومنطقة الـResource (/showthread.php?tid=3423)
الصفحات:
1
2
[WPF حتى الاحتراف] {4.2} - الـ Style ومنطقة الـResource - الشاكي لله - 08-07-14
السلام عليكم ورحمة الله وبركاته
الـ 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 يجمع كل هذه الخصائص ، كما فعلنا في الاجزاء السابقة .
يتبع ..
RE: [WPF حتى الاحتراف] {4.2} - الـ Style ومنطقة الـResource - الشاكي لله - 09-07-14
DynamicResource Vs StaticResource
الفرق بين المعامل DynamicResource و StaticResource يظهر في وقت الRuntime عند التعامل برمجيا مع الCode-behind .
مثال :-
دعنا نُعًرف هذا الكود في منطقة الResource :
PHP كود :
<Window.Resources>
<SolidColorBrush x:Key="myColor" Color="Red" />
</Window.Resources
منطقة الResource كما ترون ليست مخصصة لوضع الStyle فقط ، بل يمكنك وضع اي كود Xaml تريده
الكود السابق هو يٌعرف Brush وهو يعني "لون"
الان لنفرض انه لدينا الWindow التالية :-
الLabel الذي باسم "فيجوال بيسك العرب" مربوط بالBrush الموجود في الResource
لاحظ المعامل المستعمل هو DynamicResource :
الان لو دخلنا على برمجة الزر ، وكتبنا التالي :-
PHP كود :
private void Button_Click_1(object sender, RoutedEventArgs e)
{
this.Resources["myColor"] = new SolidColorBrush(Colors.Green);
}
عند الضغط على الزر سيتم تغيير لون الLabel الى الاخضر
اما عند استخدام الStaticResource فلن يحصل شيئ وسيقى الLabel على اللون الاحمر .
السبب في ذلك ان StaticResource لاتفحص الCode-behind لمعرفة هل تم تغيير قيمة الResource او لا .
اما الDynamicResouce فلديها آليات تتبع من خلالها تستطيع ان تعرف هل تم تغيير قيمة الResource او لا ، فإذا تم هنالك تغيير سيتغير الLabel ايضا.
اذن في الحالات التي تتطلب تغيير الResource برمجيا نستخدم الDynamicResource
اما في الحالات الي تكون فيها غير محتاج لتغيير الResource طوال فترة عمل البرنامج نستخدم Static
فكلمة Static تعني "ثابت"
وكلمة Dynamic تعني "قابل للتغيير" (ديناميكي)
اضن وضحت الفكرة .
انتهى
RE: [WPF حتى الاحتراف] {4.2} - الـ Style ومنطقة الـResource - VanToM - 09-07-14
بارك الله فيك والله يعطيك الف عافية
والله درس رااااااااائع
تطبيقي بالمرفقات !
حاولت ان اطبق بالإستايل الـ Height , Width
لكن لما اركب الاستايل للزر ما يتغير الطول والعرضـ
RE: [WPF حتى الاحتراف] {4.2} - الـ Style ومنطقة الـResource - hoob computer - 09-07-14
مشكوووووووووووور أخوية العزيز على هذا الدرس ...
الله يبارك فيك و يجزيك خير ...
السلام عليكم
RE: [WPF حتى الاحتراف] {4.2} - الـ Style ومنطقة الـResource - Sajad - 09-07-14
السلام عليكم
جزاكم الله خيرا و وفقكم لكل ما يرضيه
دروس اكثر من رائعة
تحياتي لك
RE: [WPF حتى الاحتراف] {4.2} - الـ Style ومنطقة الـResource - الشاكي لله - 09-07-14
(09-07-14, 08:34 AM)VanToM كتب : بارك الله فيك والله يعطيك الف عافية
والله درس رااااااااائع
تطبيقي بالمرفقات !
حاولت ان اطبق بالإستايل الـ Height , Width
لكن لما اركب الاستايل للزر ما يتغير الطول والعرضـ
شكرا لك على التطبيق واتمنى انك استفدت
بالنسبة الى Height , Width فهو نفس الخصائص العادية ممكن ان تغير قيمته من خلال الStyle
لكن ليش ماتغير لما ربطت الستايل ؟؟
السبب لاحظ انت ويش كاتب
PHP كود :
<Button Content="دجاج" HorizontalAlignment="Left" Height="20" Margin="106,78,0,0" VerticalAlignment="Top" Width="132" Style="{StaticResource ButtonStyle}"/>
حتى لو كان الStyle معرف فيه Setter باسم Width , Height ولكن لو كان العنصر معرف فيه Width , Height كما في الكود اعلاه فلن يتم اخذ الSetter في الاعتبار ولن يتم تطبيقه
لذلك عليك بازالة Height="20" و Width="132" من الكود السابق وراح يعمل مع الStyle
بسم الله ماشاء الله - delegater - 10-07-14
بسم الله ماشاء الله اخى الكريم
حضرتك مثال رائع لزكاة نشر العالم
اتمنى من قلبى ان لا تتوقف وتكمل الكورس حتى نهايته بمواضيع متقدمه حتى تكون ال wpf
مفهومة عند المبرمجين كالويندوز فورم
ويارب موضوع حضرتك يكون مرجع عربى متقدم ورائع
اعانك الله على التكملة
RE: [WPF حتى الاحتراف] {4.2} - الـ Style ومنطقة الـResource - السندبااد - 11-09-14
وعليكم السلام وحمة الله وبركاته
درس مهم للغاية والحمد لله الدرس واضح وأنا متابع الدروس كلها
وقد قمت بتطبيق هذا الدرس مع الدرس الذي يليه والخاص بالتعديل على الـ Template
وجمعت بينهما من خلال تعديل Template زر ما ثم تطبيق ستايل هذا الزر على زر آخر والملف في المرفقات
لكن لدي سؤال :
إضافة الستايل في الريسورس من دون الكتابة اليدوية قمت بها من خلال برنامج Blend ونجح معي والحمد لله كما هو واضح بالمرفقات
ولكن كيف أقوم بعمل ذات الشيء دون أن أكتب يدوياً حتى ينتج معي هذا الكود أو ما يشابهه :
أنا أريد أن أضيف هذا الكود وأمثاله دون أن أكتبه يدوياً فكيف يتم ذلك سواء عن طريق برنامج Blend أو غيره ؟
ليتك توضح لي هذه الجزئية وأكون لك من الشاكرين وجزاك الله عنا كل خير
درس مهم للغاية والحمد لله الدرس واضح وأنا متابع الدروس كلها
وقد قمت بتطبيق هذا الدرس مع الدرس الذي يليه والخاص بالتعديل على الـ Template
وجمعت بينهما من خلال تعديل Template زر ما ثم تطبيق ستايل هذا الزر على زر آخر والملف في المرفقات
لكن لدي سؤال :
إضافة الستايل في الريسورس من دون الكتابة اليدوية قمت بها من خلال برنامج Blend ونجح معي والحمد لله كما هو واضح بالمرفقات
ولكن كيف أقوم بعمل ذات الشيء دون أن أكتب يدوياً حتى ينتج معي هذا الكود أو ما يشابهه :
PHP كود :
<Window.Resources>
<SolidColorBrush x:Key="myColor" Color="Red" />
</Window.Resources
ليتك توضح لي هذه الجزئية وأكون لك من الشاكرين وجزاك الله عنا كل خير
RE: [WPF حتى الاحتراف] {4.2} - الـ Style ومنطقة الـResource - الشاكي لله - 11-09-14
^ اهلا بك اخي العزيز
نعم هناك خاصية تقوم بكتابة الكود الذي ذكرته اليا
وان شاء الله سأتطرق لها خصيصا في الفيديو القادم الي راح يكون اليوم او غدا صباحا
RE: [WPF حتى الاحتراف] {4.2} - الـ Style ومنطقة الـResource - السندبااد - 11-09-14
جزاك الله ووالديك الفردوس الأعلى أخي الكريم
ونحن بانتظارك وأنا تابعت كل دروس الدورة وقمت بتطبيقها والحمد لله
وبانتظار الدرس القادم إن شاء الله على أحر من الجمر
نسأل الله لك التوفيق والتسديد
وللفائدة هذا كود تطبيق ستايل ما على زر ما أو أي شيء آخر :
ونحن بانتظارك وأنا تابعت كل دروس الدورة وقمت بتطبيقها والحمد لله
وبانتظار الدرس القادم إن شاء الله على أحر من الجمر
نسأل الله لك التوفيق والتسديد
وللفائدة هذا كود تطبيق ستايل ما على زر ما أو أي شيء آخر :
PHP كود :
'تطبيق الستايل على الزر الثالث
Btn3.Style = FindResource("ButtonStyle1")
'حذف الستايل من الزر الثاني
Btn2.Style = TryFindResource("")