۱۹
اسفند

جلسه ۱۷ : بررسی Trigger ها در WPF

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

دوستان و علاقمندان به مباحث WPF وقتتون بخیر. با آموزش WPF از وب سایت آموزشی پی وی لرن همراهتون هستیم. بررسی Trigger ها در WPF را در این بخش از آموزش، خواهیم داشت.

فهرست

بررسی Trigger ها در WPF

Triggerدر اصل شما را قادر می سازد مقادیر خاصیت را تغییر داده یا براساس مقدار یک خاصیت اقدام کنید. بنابراین ، به شما امکان می دهد ظاهر و یا رفتار کنترل خود را به طور دینامیکی تغییر دهید بدون این که نیازی به ایجاد یک نوع جدید داشته باشید.

در صورت رضایت از شرایط خاص ، از Triggerها برای تغییر ارزش هر خاصیت داده شده استفاده می شود. Trigger ها معمولاً در استایل یا ریشه سندی تعریف می شوند که برای آن کنترل خاص اعمال می شود. سه نوع Trigger وجود دارد.

Triggerهای Property
Triggerهای Data
Triggerهای Event

Trigger های Property

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

کد مثال زیر نحوه تغییر رنگ پیش زمینه یک دکمه در هنگام حرکت ماوس بر روی دکمه را نشان می دهد.

مثال :

<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>

وقتی کد بالا را کامپایل و اجرا می کنید ، پنجره زیر را تولید می کند.

بررسی Trigger ها در WPF

هنگامی که ماوس روی دکمه شناور شد ، رنگ پیش زمینه آن به رنگ سبز تغییر می کند.

بررسی Trigger ها در WPF

Trigger های Data

هنگامی که داده های محدود برخی شرایط را برآورده می کند ، یک Trigger داده برخی اقدامات را انجام می دهد. اجازه دهید نگاهی به کد XAML زیر بیندازیم که در آن یک کادر تأیید و یک بلوک متنی با برخی از خصوصیات ایجاد می شود. هنگامی که کادر تأیید (checkbox) بررسی شد ، رنگ پیش زمینه آن به قرمز تغییر می کند.

مثال :

<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>

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

بررسی Trigger ها در WPF

هنگامی که کادر تأیید را تیک می زنید ، بلوک متن رنگ پیش زمینه خود را به رنگ قرمز تغییر می دهد.

بررسی Trigger ها در WPF

Triggerهای Event

هنگامی که یک رویداد خاص روشن شود ، یک Trigger رویداد برخی اقدامات را انجام می دهد. معمولاً برای انجام برخی از انیمیشن ها روی کنترل هایی مانند DoubleAnumatio ، ColorAnimation و غیره استفاده می شود. در مثال زیر یک دکمه ساده ایجاد خواهیم کرد. هنگامی که رویداد کلیک خارج شد ، عرض و ارتفاع دکمه را افزایش می دهد.

مثال :

<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>

<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.Triggers>

<EventTrigger.Actions>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty =

"Width" Duration = "0:0:4">

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Height"

Duration = "0:0:4">

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Button.Triggers>

</Button>

</Grid>

</Window>

وقتی کد بالا را کامپایل و اجرا می کنید ، پنجره زیر را تولید می کند.

بررسی Trigger ها در WPF

با کلیک بر روی دکمه ، مشاهده می کنید که شروع به افزایش در هر دو بعد خواهد کرد.

بررسی Trigger ها در WPF

توصیه می کنیم نمونه های فوق را کامپایل و اجرا کنید و Trigger ها را بر روی سایر خواص نیز بکار ببرید.

کلام پایانی

بررسی Trigger ها در WPF را در این بخش از آموزش wpf دنبال نمودیم. در بخش بعد به بررسی Debugging خواهیم پرداخت. با وب سایت آموزشی پی وی لرن همراه باشید.

به اشتراک بگذارید

Trigger ها در WPF ,آموزش wpf ,تریگرهای Data ,تریگرهای Event ,تریگرهای Property

دیدگاه کاربران

تعداد دیدگاه : 1

eisa.aghajani
آذر ۲۹, ۱۴۰۲
خیلی خوب بود، به کارم اومد
پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۷ : بررسی Trigger ها در WPF

بررسی Trigger ها در WPF

Trigger های Property

Trigger های Data

Triggerهای Event

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ