• أنشئ تطبيق WPF جديد ثم أضف الكود Background="Azure" في نهاية السطر الذي يبدأ بـ Title وقبل القوس > لتغيير لون خلفية النموذج إلى الأزرق الفاتح وسنقوم بتغيير مظهر الأزرار في مقالنا هذا لنعطي فكرة عن كيفية القيام بذلك
• استبدل <Grid> بـ <StackPanel> و <Grid/> بـ <StackPanel/> في محرر Xaml الخاص بـ Window1
• أضف الكود التالي بعد <StackPanel> مباشرة لكي نقوم بإضافة ComboBox للنافذة
<ComboBox Width="100px" Height="Auto"> <ComboBoxItem>Item One</ComboBoxItem> <ComboBoxItem>Item Tow</ComboBoxItem> <ComboBoxItem>Item Three</ComboBoxItem> </ComboBox>
• أضف الكود التالي بعد الكود السابق مباشرة كي نضيف StackPanel آخر للنافذة مع تحديد أن الاصطفاف سيكون نحو المركز والاتجاه أفقي
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> </StackPanel>
• داخل الـ StackPanel الذي أضفناه مؤخرا أضف الكود التالي الذي يقوم بإضافة ثلاثة أزرار Add و Edit و Delete للنموذج
<Button>Add</Button> <Button>Edit</Button> <Button>Delete</Button>
• حتى هذه النقطة يجب أن يكون كود xaml الخاص بالنافذة لديك على الشكل
<Window x:Class="Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300" Background="Azure"> <StackPanel> <ComboBox Width="100px" Height="Auto"> <ComboBoxItem>Item One</ComboBoxItem> <ComboBoxItem>Item Tow</ComboBoxItem> <ComboBoxItem>Item Three</ComboBoxItem> </ComboBox> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> <Button>Add</Button> <Button>Edit</Button> <Button>Delete</Button> </StackPanel> </StackPanel> </Window>
• سنقوم الآن بتطبيق بعض الخصائص التي ستغير مظهر الأزرار استبدل الكود الخاص بالزر Delete بالكود التالي
<Button Margin="10,5,2,5"> <Button.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0.25" Color="#FFFF1122"></GradientStop> <GradientStop Offset="0.85" Color="#FFFFFFFF"></GradientStop> </LinearGradientBrush> </Button.Background> Delete</Button>
• حيث استخدمنا الخاصية Margin لتحديد الهوامش الخاصة بالزر ثم استخدمنا الفرشاة LinearGradientBrush لملئ الزر بلون متدرج حيث حددت الخاصية StartPoint نقطة بدء الملئ و EndPoint نقطة النهاية وحدد قسم GradientStop الأول والثاني اللونين الخاصين بالتدرج والإزاحة الخاصة بكل لون حيث نلاحظ بعد تطبيق هذه الخاصة تغير مظهر الزر Delete إلى لون متدرج من الأحمر للأبيض
• وإن أردنا تطبيق مظهر واحد لجميع الأزرار في النموذج نضيف قسم <Window.Resources> في أعلى نافذة كود xaml وبعد الأسطر العلوية التي تحدد النموذج حيث نفتح قسم Style بداخله ونحدد أن النوع المستهدف من هذا المظهر هو Button
<Window.Resources> <Style TargetType="Button"> </Style> </Window.Resources>
• وبداخل قسم Style نفتح قسم آخر هو Setter ونحدد فيه ان الخاصية المستهدفة هي Background كما يلي
<Setter Property="Background"> </Setter>
• ثم نحدد المظهر كما فعلنا سابقا مع الزر Delete وذلك باستخدام LinearGradientBrush وبنفس الطريقة السابقة تماما فيصبح كود قسم setter كما يلي
<Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0.3" Color="#FFFFFF55"/> <GradientStop Offset="0.8" Color="#AA5555FF"/> </LinearGradientBrush> </Setter.Value> </Setter>
• ومباشرة بعد قسم setter الذي أضفناه للتو سنضيف قسم Setter آخر الغرض منه هو تحديد الهوامش الخاصة بالأزرار وسيكون الكود الخاص به كما يلي
<Setter Property="Margin" Value="2,5,2,5"></Setter>
• وبذلك يصبح كود xaml الكامل للنافذة حتى هذه النقطة كما يلي
<Window x:Class="Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300" Background="Azure"> <Window.Resources> <Style TargetType="Button"> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0.3" Color="#FFFFFF55"/> <GradientStop Offset="0.8" Color="#AA5555FF"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Margin" Value="2,5,2,5"></Setter> </Style> </Window.Resources> <StackPanel> <ComboBox Width="100px" Height="Auto"> <ComboBoxItem>Item One</ComboBoxItem> <ComboBoxItem>Item Tow</ComboBoxItem> <ComboBoxItem>Item Three</ComboBoxItem> </ComboBox> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> <Button>Add</Button> <Button>Edit</Button> <Button Margin="10,5,2,5"> <Button.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0.25" Color="#FFFF1122"></GradientStop> <GradientStop Offset="0.85" Color="#FFFFFFFF"></GradientStop> </LinearGradientBrush> </Button.Background> Delete </Button> </StackPanel> </StackPanel> </Window>
• حيث نلاحظ أن المظهر الذي قمنا بتحديده كمظهر عام لجميع الأزرار في النموذج قد تم تطبيقه على الزرين Add و Edit ولم يتم تطبيقه على الزر Delete وذلك بسبب أن الزرين Add و Delete لم نقم بتحديد مظهر خاص بهما فيأخذان المظهر العام الذي قمنا بتحديده في البداية لجميع الأزرار في النموذج وبما أننا قمنا بتحديد مظهر خاص بالزر Delete ملتصق به مباشرة لذا يأخذ المظهر الأقرب له
• أضف زرا جديدا وليكن Search ضمن مجموعة أزرار النموذج وقبل الزر add مباشرة وسنقوم الآن بإضافة مظهر مخصص له بطريقة أخرى وهي تحديد Key يميز هذا المظهر حيث نربطه مع الزر الذي نرغب بتطبيقه عليه باستخدام الخاصية Style لذلك الزر ولعمل ذلك قم بإضافة كود قسم style التالي بعد قسم Style السابق مباشرة وقبل </Window.Resources>
<Style TargetType="Button" x:Key="MySearch"> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0.3" Color="#FF11FF11"/> <GradientStop Offset="0.8" Color="#CCFFBB11"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Margin" Value="2,5,10,5"></Setter> </Style>
• حيث نلاحظ إضافة الخاصية x:Key في بداية تعريف قسم Style والتي يمكننا من خلالها ربط أي زر مع هذه الخاصية حيث سنقوم بتعديل كود الزر Search ليرتبط مع المظهر الجديد ليصبح كما يلي
<Button Style="{StaticResource MySearch}">Search</Button>وبهذا نكون قد غطينا فكرة مبدئية عن كيفية تغيير مظهر التحكمات في برنامج WPF برمجيا وفيما يلي سرد كامل لكود Xaml الخاص بهذا الموضوع متضمن كافة الأفكار التي تم طرحها هنا
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300" Background="Azure">
<Window.Resources>
<Style TargetType="Button">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.3" Color="#FFFFFF55"/>
<GradientStop Offset="0.8" Color="#AA5555FF"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Margin" Value="2,5,2,5"></Setter>
</Style>
<Style TargetType="Button" x:Key="MySearch">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.3" Color="#FF11FF11"/>
<GradientStop Offset="0.8" Color="#CCFFBB11"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Margin" Value="2,5,10,5"></Setter>
</Style>
</Window.Resources>
<StackPanel>
<ComboBox Width="100px" Height="Auto">
<ComboBoxItem>Item One</ComboBoxItem>
<ComboBoxItem>Item Tow</ComboBoxItem>
<ComboBoxItem>Item Three</ComboBoxItem>
</ComboBox>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Style="{StaticResource MySearch}">Search</Button>
<Button>Add</Button>
<Button>Edit</Button>
<Button Margin="10,5,2,5">
<Button.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.25" Color="#FFFF1122"></GradientStop>
<GradientStop Offset="0.85" Color="#FFFFFFFF"></GradientStop>
</LinearGradientBrush>
</Button.Background>
Delete
</Button>
</StackPanel>
</StackPanel>
</Window>وسيكون مظهر النافذة بعد هذه التعديلات كالصورة
