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






الـ 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





الان لو قررنا صناعة المثال التالي :-



مسامحة الجوع مأثر شوي Sad




في المثال السابق يوجد 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 Big Grin
لذلك لو اردت ان تصل الى كود في منطقة ال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 يجمع كل هذه الخصائص ، كما فعلنا في الاجزاء السابقة .







يتبع ..

الرد }}}
#2
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 senderRoutedEventArgs e)
 
       {
 
           this.Resources["myColor"] = new SolidColorBrush(Colors.Green);
 
       





عند الضغط على الزر سيتم تغيير لون الLabel الى الاخضر





اما عند استخدام الStaticResource فلن يحصل شيئ وسيقى الLabel على اللون الاحمر .





السبب في ذلك ان StaticResource لاتفحص الCode-behind لمعرفة هل تم تغيير قيمة الResource او لا .

اما الDynamicResouce فلديها آليات تتبع من خلالها تستطيع ان تعرف هل تم تغيير قيمة الResource او لا ، فإذا تم هنالك تغيير سيتغير الLabel ايضا.



اذن في الحالات التي تتطلب تغيير الResource برمجيا نستخدم الDynamicResource
اما في الحالات الي تكون فيها غير محتاج لتغيير الResource طوال فترة عمل البرنامج نستخدم Static



فكلمة Static تعني "ثابت"
وكلمة Dynamic تعني "قابل للتغيير" (ديناميكي)




اضن وضحت الفكرة .






انتهى
الرد }}}
#3
بارك الله فيك والله يعطيك الف عافية Shy
والله درس رااااااااائع Heart
تطبيقي بالمرفقات !
حاولت ان اطبق بالإستايل الـ Height , Width
لكن لما اركب الاستايل للزر ما يتغير الطول والعرضـ Confused


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

.rar   Wpf4.2.rar (الحجم : 72.52 ك ب / التحميلات : 72)
الرد }}}
تم الشكر بواسطة:
#4
مشكوووووووووووور أخوية العزيز على هذا الدرس ...

الله يبارك فيك و يجزيك خير ...


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

جزاكم الله خيرا و وفقكم لكل ما يرضيه

دروس اكثر من رائعة

تحياتي لك
الرد }}}
تم الشكر بواسطة: الشاكي لله
#6
(09-07-14, 08:34 AM)VanToM كتب : بارك الله فيك والله يعطيك الف عافية Shy
والله درس رااااااااائع Heart
تطبيقي بالمرفقات !
حاولت ان اطبق بالإستايل الـ Height , Width
لكن لما اركب الاستايل للزر ما يتغير الطول والعرضـ Confused


شكرا لك على التطبيق واتمنى انك استفدت


بالنسبة الى 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 Wink


الرد }}}
تم الشكر بواسطة: VanToM , kslawy , Sajad , مبرمج بلا حدود
#7
بسم الله ماشاء الله اخى الكريم

حضرتك مثال رائع لزكاة نشر العالم

اتمنى من قلبى ان لا تتوقف وتكمل الكورس حتى نهايته بمواضيع متقدمه حتى تكون ال wpf

مفهومة عند المبرمجين كالويندوز فورم

ويارب موضوع حضرتك يكون مرجع عربى متقدم ورائع
اعانك الله على التكملة
الرد }}}
تم الشكر بواسطة: الشاكي لله
#8
Question 
وعليكم السلام وحمة الله وبركاته
درس مهم للغاية والحمد لله الدرس واضح وأنا متابع الدروس كلها
وقد قمت بتطبيق هذا الدرس مع الدرس الذي يليه والخاص بالتعديل على الـ Template
وجمعت بينهما من خلال تعديل Template زر ما ثم تطبيق ستايل هذا الزر على زر آخر والملف في المرفقات
لكن لدي سؤال :
إضافة الستايل في الريسورس من دون الكتابة اليدوية قمت بها من خلال برنامج Blend ونجح معي والحمد لله كما هو واضح بالمرفقات
ولكن كيف أقوم بعمل ذات الشيء دون أن أكتب يدوياً حتى ينتج معي هذا الكود أو ما يشابهه :
PHP كود :
<Window.Resources>
        <
SolidColorBrush x:Key="myColor" Color="Red" />
</
Window.Resources 
أنا أريد أن أضيف هذا الكود وأمثاله دون أن أكتبه يدوياً فكيف يتم ذلك سواء عن طريق برنامج Blend أو غيره ؟
ليتك توضح لي هذه الجزئية وأكون لك من الشاكرين وجزاك الله عنا كل خير


الملفات المرفقة
.rar   Button.rar (الحجم : 51.3 ك ب / التحميلات : 65)
فاعلم أنه لا إله إلا الله
الرد }}}
تم الشكر بواسطة:
#9
^ اهلا بك اخي العزيز

نعم هناك خاصية تقوم بكتابة الكود الذي ذكرته اليا

وان شاء الله سأتطرق لها خصيصا في الفيديو القادم الي راح يكون اليوم او غدا صباحا
الرد }}}
تم الشكر بواسطة: السندبااد
#10
جزاك الله ووالديك الفردوس الأعلى أخي الكريم
ونحن بانتظارك وأنا تابعت كل دروس الدورة وقمت بتطبيقها والحمد لله
وبانتظار الدرس القادم إن شاء الله على أحر من الجمر
نسأل الله لك التوفيق والتسديد

وللفائدة هذا كود تطبيق ستايل ما على زر ما أو أي شيء آخر :
PHP كود :
'تطبيق الستايل على الزر الثالث
Btn3.Style = FindResource("ButtonStyle1")
'
حذف الستايل من الزر الثاني
Btn2
.Style TryFindResource(""
فاعلم أنه لا إله إلا الله
الرد }}}
تم الشكر بواسطة: مبرمج بلا حدود


المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الثاني) الشاكي لله 9 7,532 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,982 25-01-17, 04:45 AM
آخر رد: hero2199
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الاول) الشاكي لله 5 5,208 02-12-16, 11:07 PM
آخر رد: alsef
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (3- الانميشن) الشاكي لله 16 8,950 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,718 31-03-16, 11:11 PM
آخر رد: السندبااد

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


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