[الشاكي لله]

السلام عليكم ورحمة الله وبركاته


في WPF ، دائما ما ارتبطت ميزة Styling بعدة ميزات اخرى مثل ( VSM, templates, triggers, and storyboards) .. حيث ان Styling جمعت بينهم جميعا .

والهدف من ذلك السماح للمطورين (او المصممين) الى انشاء تأثيرات بصرية مذهلة وخلق مظاهر متناغمة وجذابة.

وتفيدك ميزة Styling في سهولة مشاركة الStyle حيث يمكن نقل كود الStyle الى ملف xaml resourcedictionary وبالتالي يمكن توزيع الملف واعادة استخدام الStyle مع اي تطبيق اخر.

وابضا يمكنك التبديل بين الStyles ليجعل من برنامجك Multi-styles (متعدد الثيمات) < لتقريب المعنى ، وتفيد ايضا في صيانة تصميم البرنامج بكل سهولة.


ظاهريا ، يمكنك اطلاق اسم Skin على الStyle من حيث قابليته للنقل وتشابه الوظيفة.

---

Google Style

هذه الكلمات هي عنوان Style خاص قمت بتصميمه طبق الاصل من ازرار قوقل .

لكن كان من المفترض ان اقوم بإنشاء Style كامل لكل الControls التابعة لGoogle

حقيقة صناعة الStyle كامل امر بسيط جدا ولايتتطلب اكثر من ساعة او ساعتين لكن لغرض التبسيط والتعليم. قمت بعمل Styling لأزرار قوقل فقط ، لاني اعلم ان من يجيدون استخدام WPF هنا ينعدون على الاصابع .


لكن انا ديموقراطي ، يوجد في اعلى الموضوع استفتاء ما اذا كنت تريد ان افوم بعمل Style كامل لجميع مكونات والكونترول الخاصة بـ Google او فقط يكفي ستايل الازرار ؟؟ ...


هذا مايفعله الStyle ، حيث انه عمل اعادة-تشكيل للButton الافتراضي، فأعاد تشكيله الى هذا الشكل ادناه :

كما ترون ان الازرار طبق الاصل من ازرار Google ، حيث ان قيم الالوان جبتها دقيقة من خلال اداة كاشفة الالوان التابعة للفوتوشوب ، ومع توفر تأثير Drop shadow والعديد من الميزات الاخرى في WPF وبليند ، تمكنت من صناعة هذا الستايل في 5 دقائق تقريبا .

---

كود الStyle : يجب ان تقوم بوضعه في الResource :-

PHP كود :

        <Style x:Key="GoogleButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Background" >
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                        <GradientStop Color="#FFF4F4F4" Offset="0"/>
                        <GradientStop Color="#FFF1F1F1" Offset="1"/>
                </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush" Value="#FFD8D8D8"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Foreground" Value="#FF666666"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="Chrome" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"  SnapsToDevicePixels="true" BorderThickness="1" CornerRadius="3">
                            <Border.Effect>
                                <DropShadowEffect BlurRadius="4" ShadowDepth="1" Color="#FFEBEBEB" Opacity="0"/>
                            </Border.Effect>
                            <TextBlock x:Name="textBlock"  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Height="Auto" TextWrapping="Wrap" Text="{TemplateBinding Content}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
 Width="Auto" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" 
FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDefault" Value="True">
                                <Setter Property="Foreground" TargetName="textBlock" Value="#FF666666"/>
                                <Setter Property="Effect" TargetName="Chrome">
                                    <Setter.Value>
                                        <DropShadowEffect BlurRadius="4" Color="#FFEBEBEB" Opacity="0" ShadowDepth="1"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Background" TargetName="Chrome">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                            <GradientStop Color="#FFF4F4F4" Offset="0"/>
                                            <GradientStop Color="#FFF1F1F1" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#ADADAD"/>
                                <Setter Property="Background" TargetName="Chrome">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                            <GradientStop Color="#FFF7F7F7" Offset="0"/>
                                            <GradientStop Color="#FFF1F1F1" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Effect" TargetName="Chrome">
                                    <Setter.Value>
                                        <DropShadowEffect BlurRadius="2"
 Color="#FFEBEBEB" Direction="270" ShadowDepth="0.5" Opacity="0.66"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="BorderBrush" TargetName="Chrome" Value="#FFC6C6C6"/>
                                <Setter Property="Foreground" TargetName="textBlock" Value="#FF333333"/>
                            </Trigger>

                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                    <Condition Property="IsPressed" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Chrome">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                            <GradientStop Color="#FFF7F7F7" Offset="0"/>
                                            <GradientStop Color="#FFF1F1F1" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Foreground" TargetName="textBlock" Value="#FF333333"/>
                                <Setter Property="BorderBrush" TargetName="Chrome" Value="#FF4D90FE"/>
                                <Setter Property="Effect" TargetName="Chrome">
                                    <Setter.Value>
                                        <DropShadowEffect BlurRadius="4" 
Color="#FFEBEBEB" Direction="270" ShadowDepth="1" Opacity="0.66"/>
                                    </Setter.Value>
                                </Setter>
                            </MultiTrigger>
                            <Trigger Property="IsFocused" Value="True">
                                <Setter Property="Background" TargetName="Chrome">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                            <GradientStop Color="#FFF7F7F7" Offset="0"/>
                                            <GradientStop Color="#FFF1F1F1" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="BorderBrush" TargetName="Chrome" Value="#FF4D90FE"/>
                                <Setter Property="Background" TargetName="Chrome">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                            <GradientStop Color="#FFF4F4F4" Offset="0"/>
                                            <GradientStop Color="#FFF1F1F1" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>

                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="#ADADAD"/>
                                <Setter Property="Effect" TargetName="Chrome">
                                    <Setter.Value>
                                        <DropShadowEffect BlurRadius="4" Color="#FFEBEBEB" Opacity="0" ShadowDepth="1"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style> 


---

طريقة تطبيق الStyle

بعد لصق كود الStyle داخل الResource ، الان يمكنك اضافة ازرار عادية واضافة الستايل لها :-

الطريقة الاولى : من خلال صندوق الادوات :-

اختر الStyle



تم تطبيق الStyle






الطريقة الثانية : من خلال كود xaml :

PHP كود :

    <Button Content="Google بحث" HorizontalAlignment="Left" Height="35" Margin="100,160,0,0" VerticalAlignment="Top" Width="100" 
Style="{DynamicResource GoogleButtonStyle}" /> 


اهم شي في الكود اعلاه هي المواصفة الStyle ،فبواسطتها تعين الStyle المراد تطبيقه على الزر.

---

طريقة تطبيق الستايل بالفيديو

طبعا بما انه اول ستايل في المنتدى ولاتوجد شروحات عن طريقة اضافته ، قمت بعمل شرح فيديو قصير

طبعا كما ترون قمت بلصق الاكواد فقط ، قمت بالتصوير على برنامج Visual studio بدل Blend رغم ان Blend هو من قمت بتصميم الStyle فيه ، لكن الاغلبية عنده Visual studio والطريقة اصلا ماتختلف بين البرنامجين.

---

في النهاية احب اذكركم بالتصويت على الستايل في اعلى هذا الموضوع

وتصويتكم يهمني حتى اعرف شنو اكثر شي يهتم فيه الاعضاء .

شكرا لكم ، وموفقين ان شاء الله .

انتهى

[salfig]

وعليكم السلام ورحمة الله وبركاته

استمر يا بطل

[hoob computer]

وعليكم السلام و رحمة الله و بركاته,

يمكن بس أني وياك نعرف نسوي الـ Style هنا في المنتدى هههههههه

يا أخي ما شفت أي تفاعل حقيقي مع هذه التقنية الرائعة من قبل الأعضاء.
غريبة !!!!!!!

بالمناسبة, الـ Style حق كوكل شيء روعة. كمل و انا وياك إذا تحتاج شي بالتصميم أني حاضر بالخدمة



السلام عليكم

[ali.alfoly]

فعلا خطير اخي محمد والشرح روعة وقمة في الجمال
تقنية خطيرة حقا
هذه المواضيع كنز حقيقي
ولو امكن تعمل شرح ولو صغير لطرقة عمل Style لاي اوبجكت
شكرا مقدما