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

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

wpf styles 10641 تصویر

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

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

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

wpf styles 10641 1 تصویر

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

wpf styles 10641 2 تصویر

در شکل فوق ما خاصیت های مورد نظر را در قالب یک 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 تصویر

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

<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 تصویر

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

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