منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب قسم لغات البرمجة الاخرى قسم البرمجة بتقنية WPF قسم دورات تقنية WPF [WPF حتى الاحتراف] {4.2} - الـ Style ومنطقة الـResource
تقييم الموضوع :
  • 3 أصوات - بمعدل 5
  • 1
  • 2
  • 3
  • 4
  • 5
ادوات الموضوع
[WPF حتى الاحتراف] {4.2} - الـ Style ومنطقة الـResource
الشاكي لله غير متصل
المدير الفني
المشاركات : 1,733
المواضيع 147
الإنتساب : Sep 2012
السمعة : 215
الشكر: 8463
تم شكره 12163 مرات في 1145 مشاركات

a2
#1
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> 





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



مسامحة الجوع مأثر شوي 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 يجمع كل هذه الخصائص ، كما فعلنا في الاجزاء السابقة .







يتبع ..



البحث
الرد }}}
تم الشكر بواسطة: abulayth , hoob computer , Sajad , VanToM , عبد الله , السندبااد , مبرمج بلا حدود


الردود في هذا الموضوع
[WPF حتى الاحتراف] {4.2} - الـ Style ومنطقة الـResource - بواسطة الشاكي لله - 08-07-14, 11:51 PM
بسم الله ماشاء الله - بواسطة delegater - 10-07-14, 03:09 AM

المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الثاني) الشاكي لله 9 8,219 06-12-20, 04:09 AM
آخر رد: Mohammed1991
  [WPF حتى الاحتراف] {1} - إنشاء برنامجك الاول الشاكي لله 30 23,673 14-10-18, 08:34 AM
آخر رد: qadar elzaman
  [WPF حتى الاحتراف] {0} - نظرة عامة عن WPF الشاكي لله 14 12,884 14-10-18, 07:58 AM
آخر رد: qadar elzaman
  [WPF حتى الاحتراف] {4.6} - الـ Data Template و الـ Sample Data الشاكي لله 14 11,966 05-03-17, 09:47 AM
آخر رد: dabas
  [WPF حتى الاحتراف] {4.3} - الـTemplate ومقدمة عن الـTrigger الشاكي لله 8 7,675 25-01-17, 04:45 AM
آخر رد: hero2199
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الاول) الشاكي لله 5 5,740 02-12-16, 11:07 PM
آخر رد: alsef
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (3- الانميشن) الشاكي لله 16 9,934 02-06-16, 02:53 PM
آخر رد: CLARO
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (2- البرمحة) الشاكي لله 1 3,153 14-05-16, 11:54 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (1- التصميم) الشاكي لله 1 3,078 14-05-16, 11:27 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] {3.3} - اداة الـ Grid الشاكي لله 14 10,421 31-03-16, 11:11 PM
آخر رد: السندبااد

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


يقوم بقرائة الموضوع: