استایل دهی در WPF – آموزش WPF

چهارشنبه ۲۷ مرداد ۱۴۰۰
بازدید ۱,۱۷۶ نفر
AmRo
(5 امتیاز از 1 رای)
Loading...

تصویر wpf-styles_10641 استایل دهی در WPF - آموزش WPF

استایل دهی در WPF

در WPF و فریم ورک .NET استراتژی های مختلفی برای شخصی سازی ظاهر یک برنامه وجود دارد. استفاده از استایل دهی در WPF به ما این قابلیت را می دهد که مقادیر تعدادی خاصیت را در قالب یک Style تعریف کرده و در جاهای مختلف از آن استفاده کنیم.

استایل دهی در WPF به منظور ایجاد ظاهری یک شکل و مشابه برای مجموعه ای از کنترل ها استفاده می شود. برای مثال فرض کنید سه Button داریم و میخوایم مقدار خاصیت های Width و Height آن ها مشابه باشد. به شکل زیر توجه کنید:

تصویر wpf-styles_10641_1 استایل دهی در WPF - آموزش WPF

از آن جایی که در مثال فوق فقط سه عدد Button وجود دارد، تنظیم مقدار خاصیت ها به شکل بالا هیچ اشکالی ندارد اما در برنامه های واقعی تعداد کنترل ها خیلی بیشتر از سه عدد Button است و اگر مقدار خاصیت های هر یک از کنترل ها به صورت جداگانه تنظیم شود، در هنگام توسعه برنامه به مشکل برمیخوریم. قطعا روش بهتری نیز وجود دارد. به شکل زیر توجه کنید:

تصویر wpf-styles_10641_2 استایل دهی در WPF - آموزش WPF

در شکل فوق ما خاصیت های مورد نظر را در قالب یک Style تنظیم کرده و در هر سه Button از آن استفاده نموده ایم.

مثال

برای درک بهتر یک پروژه WPF با نام WPFSTyle ایجاد کرده و آن مانند نمونه زیر تغییر دهید. محتوای فایل MainWindow.xaml:

<Window x:Class = "WPFStyle.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:local = "clr-namespace: WPFStyle" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel> 
      <Button Content = "Button1" Height = "30" Width = "80" 
         Foreground = "Blue" FontSize = "12" Margin = "10"/> 
      <Button Content = "Button2" Height = "30" Width = "80" 
         Foreground = "Blue" FontSize = "12" Margin = "10"/> 
      <Button Content = "Button3" Height = "30" Width = "80" 
         Foreground = "Blue" FontSize = "12" Margin = "10"/> 
   </StackPanel> 
	
</Window>

<Window x:Class = "WPFStyle.MainWindow"

xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local = "clr-namespace: WPFStyle"

mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604">

<Button Content = "Button1" Height = "30" Width = "80"

Foreground = "Blue" FontSize = "12" Margin = "10"/>

<Button Content = "Button2" Height = "30" Width = "80"

Foreground = "Blue" FontSize = "12" Margin = "10"/>

<Button Content = "Button3" Height = "30" Width = "80"

Foreground = "Blue" FontSize = "12" Margin = "10"/>

</StackPanel>

</Window>

در کد فوق ما کد مشابه به شکل اول را نوشته ایم که سه Button با مقادیر مشابه برای خاصیت های Height، Width، Foreground، FontSize و Margin دارد. زمانی که مثال فوق را کامپایل و اجرا کنید، خروجی زیر را تولید خواهد کرد:

تصویر wpf-styles_10641_4 استایل دهی در WPF - آموزش WPF

حال کد فوق را مانند نمونه زیر تغییر دهید:

<Window x:Class = "XAMLStyle.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local = "clr-namespace:XAMLStyle" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604">
	
   <Window.Resources> 
      <Style x:Key = "myButtonStyle" TargetType = "Button"> 
         <Setter Property = "Height" Value = "30" /> 
         <Setter Property = "Width" Value = "80" /> 
         <Setter Property = "Foreground" Value = "Blue" /> 
         <Setter Property = "FontSize" Value = "12" /> 
         <Setter Property = "Margin" Value = "10" /> 
      </Style> 
   </Window.Resources> 
	
   <StackPanel> 
      <Button Content = "Button1" Style = "{StaticResource myButtonStyle}" /> 
      <Button Content = "Button2" Style = "{StaticResource myButtonStyle}" /> 
      <Button Content = "Button3" Style="{StaticResource myButtonStyle}" /> 
   </StackPanel> 
	
</Window>

<Window x:Class = "XAMLStyle.MainWindow"

xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local = "clr-namespace:XAMLStyle"

mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604">

<Window.Resources>

</Style>

</Window.Resources>

</StackPanel>

</Window>

همانطور که مشاهده میکنید، ما مقادیر مشابه را به صورت یک Style تنظیم کرده ایم (شکل دوم). خروجی مثال تغییر یافته:

تصویر wpf-styles_10641_4 استایل دهی در WPF - آموزش WPF

خروجی در هر دو حالت یکسان است اما استفاده از Style مزایای خیلی زیادی دارد. تعریف Style می تواند در سطوح زیر انجام شود:

Control Level: فقط در همان کنترل در دسترس خواهد بود.
Layout Level: در دسترس کنترل لایه بندی (مثل StackPanel) و کنترل های فرزند خواهد بود.
Window Level: در دسترس کل کنترل های موجود در Window خواهد بود.
Application Level: در کل برنامه در دسترس خواهد بود.