محرک ها (Triggers) در WPF – آموزش WPF

دوشنبه ۲۵ مرداد ۱۴۰۰
بازدید ۸۶۹ نفر
سعید سیفی زاده
(5 امتیاز از 1 رای)
Loading...

تصویر wpf-triggers_10687 محرک ها (Triggers) در WPF - آموزش WPF

محرک ها (Triggers) در WPF

به طور کلی محرک ها در WPF این قابلیت را به ما می دهند تا بتوانیم بر اساس مقدار یک یا چند خاصیت اعمالی را انجام دهیم. برای مثال وقتی مقدار خاصتی IsEnabled برابر با True شود، میزان شفافیت کنترل را کم میکنیم. این قابلیت کمک می کند تا به صورت پویا ظاهر و یا رفتار کنترل را تغییر دهیم بدون اینکه نیاز به ایجاد مورد جدیدی باشد. در WPF سه نوع محرک وجود دارد:

محرک های مبتی بر خاصیت (Property Triggers)
محرک های مبتی بر داده (Data Triggers)
محرک های مبتنی بر رویداد (Event Triggers)

محرک های مبتی بر خاصیت (Property Triggers)

در این نوع محرک ها، زمانی که مقدار یک خاصیت تغییر می کند، تغییراتی در سایر خاصیت ها اعمال می شود. برای مثال می توانید از این قابلیت برای تغییر ظاهر یک دکمه زمانی که ماوس بر روی آن قرار گرفت استفاده کنید. در مثال زیر نحوه تغییر رنگ متن دکمه وقتی که ماوس بر روی آن قرار میگیرد را بررسی کرده ایم.

<Window x:Class = "WPFPropertyTriggers.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Window.Resources> 
      <Style x:Key = "TriggerStyle" TargetType = "Button"> 
         <Setter Property = "Foreground" Value = "Blue" /> 
         <Style.Triggers> 
            <Trigger Property = "IsMouseOver" Value = "True"> 
               <Setter Property = "Foreground" Value = "Green" /> 
            </Trigger> 
         </Style.Triggers> 
      </Style> 
   </Window.Resources> 
	
   <Grid> 
      <Button Width = "100" Height = "70"
         Style = "{StaticResource TriggerStyle}" Content = "Trigger"/> 
   </Grid> 
	
</Window>

<Window x:Class = "WPFPropertyTriggers.MainWindow"

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

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

Title = "MainWindow" Height = "350" Width = "604">

<Window.Resources>

<Style.Triggers>

</Trigger>

</Style.Triggers>

</Style>

</Window.Resources>

<Grid>

<Button Width = "100" Height = "70"

Style = "{StaticResource TriggerStyle}" Content = "Trigger"/>

</Grid>

</Window>

زمانی که مثال فوق را کامپایل و اجرا کنید، خروجی زیر را تولید خواهد کرد:

تصویر wpf-triggers_10687_1 محرک ها (Triggers) در WPF - آموزش WPF

اگر ماوس را بر روی دکمه ببرید رنگ متن آن به سبز تغییر خواهد کرد:

تصویر wpf-triggers_10687_2 محرک ها (Triggers) در WPF - آموزش WPF

محرک های مبتنی بر داده (Data Triggers)

همانطور که از اسم این محرک ها نیز مشخص است، زمانی که داده بایند شده، شرایط مشخص شده را داشته باشد، اعمالی را انجام می دهد. برای درک بهتر به مثال زیر توجه کنید که در آن مقدار خاصیت IsChecked کنترل CheckBox به عنوان شرط تغییر رنگ متن و حالت اشاره گر ماوس کنترل TextBlock تنظیم شده است.

<Window x:Class = "WPFDataTrigger.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "Data Trigger" Height = "350" Width = "604">
	
   <StackPanel HorizontalAlignment = "Center"> 
      <CheckBox x:Name = "redColorCheckBox" 
         Content = "Set red as foreground color" Margin = "20"/> 
			
      <TextBlock Name = "txtblock" VerticalAlignment = "Center" 
         Text = "Event Trigger" FontSize = "24" Margin = "20"> 
         <TextBlock.Style> 
            <Style> 
               <Style.Triggers> 
                  <DataTrigger Binding = "{Binding ElementName = redColorCheckBox, Path = IsChecked}" 
                     Value = "true"> 
                     <Setter Property = "TextBlock.Foreground" Value = "Red"/> 
                     <Setter Property = "TextBlock.Cursor" Value = "Hand" /> 
                  </DataTrigger> 
               </Style.Triggers> 
            </Style> 
         </TextBlock.Style> 
      </TextBlock> 
		
   </StackPanel> 
	
</Window>

<Window x:Class = "WPFDataTrigger.MainWindow"

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

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

Title = "Data Trigger" Height = "350" Width = "604">

<CheckBox x:Name = "redColorCheckBox"

Content = "Set red as foreground color" Margin = "20"/>

<TextBlock Name = "txtblock" VerticalAlignment = "Center"

Text = "Event Trigger" FontSize = "24" Margin = "20">

<TextBlock.Style>

<Style>

<Style.Triggers>

<DataTrigger Binding = "{Binding ElementName = redColorCheckBox, Path = IsChecked}"

Value = "true">

</DataTrigger>

</Style.Triggers>

</Style>

</TextBlock.Style>

</TextBlock>

</StackPanel>

</Window>

زمانی که مثال فوق کامپایل و اجرا شود، خروجی زیر را تولید خواهد کرد:

تصویر wpf-triggers_10687_3 محرک ها (Triggers) در WPF - آموزش WPF

حال اگر بر تیک CheckBox را بزنید، رنگ متن و اشاره گر ماوس مربوط به TextBlock تغییر خواهد کرد:

تصویر wpf-triggers_10687_4 محرک ها (Triggers) در WPF - آموزش WPF

محرک های مبتنی بر رویداد (Event Triggers)

این نوع محرک ها زمانی که یک رویداد خاصی اتفاق بیافتد، اعمالی را انجام می دهند. در مثال زیر ما یک دکمه ساده ایجاد و برای رویداد Click آن انیمیشنی تعریف کرده ایم که طول و عرض دکمه را هنگام کلیک شدن افزایش می دهد.

<Window x:Class = "WPFEventTrigger.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid> 
      <Button Content = "Click Me" Width = "60" Height = "30">
		
         <Button.Triggers> 
            <EventTrigger RoutedEvent = "Button.Click"> 
               <EventTrigger.Actions> 
                  <BeginStoryboard> 
                     <Storyboard> 
							
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = 
                           "Width" Duration = "0:0:4"> 
                           <LinearDoubleKeyFrame Value = "60" KeyTime = "0:0:0"/> 
                           <LinearDoubleKeyFrame Value = "120" KeyTime = "0:0:1"/> 
                           <LinearDoubleKeyFrame Value = "200" KeyTime = "0:0:2"/> 
                           <LinearDoubleKeyFrame Value = "300" KeyTime = "0:0:3"/> 
                        </DoubleAnimationUsingKeyFrames>
								
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Height" 
                           Duration = "0:0:4"> 
                           <LinearDoubleKeyFrame Value = "30" KeyTime = "0:0:0"/> 
                           <LinearDoubleKeyFrame Value = "40" KeyTime = "0:0:1"/> 
                           <LinearDoubleKeyFrame Value = "80" KeyTime = "0:0:2"/> 
                           <LinearDoubleKeyFrame Value = "150" KeyTime = "0:0:3"/> 
                        </DoubleAnimationUsingKeyFrames>
								
                     </Storyboard> 
                  </BeginStoryboard> 
               </EventTrigger.Actions> 
            </EventTrigger> 
         </Button.Triggers> 
			
      </Button> 
   </Grid> 
	
</Window>