WPF - Trình kích hoạt

Về cơ bản, một trình kích hoạt cho phép bạn thay đổi giá trị thuộc tính hoặc thực hiện các hành động dựa trên giá trị của thuộc tính. Vì vậy, nó cho phép bạn tự động thay đổi giao diện và / hoặc hành vi của điều khiển của mình mà không cần phải tạo mới.

Trình kích hoạt được sử dụng để thay đổi giá trị của bất kỳ thuộc tính nhất định nào, khi các điều kiện nhất định được thỏa mãn. Các trình kích hoạt thường được xác định trong một kiểu hoặc trong thư mục gốc của tài liệu được áp dụng cho điều khiển cụ thể đó. Có ba loại trình kích hoạt -

  • Kích hoạt thuộc tính
  • Kích hoạt dữ liệu
  • Trình kích hoạt sự kiện

Kích hoạt thuộc tính

Trong trình kích hoạt thuộc tính, khi một thay đổi xảy ra trong một thuộc tính, nó sẽ mang lại thay đổi ngay lập tức hoặc thay đổi động trong thuộc tính khác. Ví dụ: bạn có thể sử dụng trình kích hoạt thuộc tính để thay đổi giao diện của nút khi chuột di chuột qua nút.

Đoạn mã ví dụ sau cho biết cách thay đổi màu nền trước của nút khi di chuột qua nút.

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

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra cửa sổ sau:

Khi di chuột qua nút, màu nền trước của nó sẽ chuyển thành màu xanh lục.

Kích hoạt dữ liệu

Trình kích hoạt dữ liệu thực hiện một số hành động khi dữ liệu liên kết thỏa mãn một số điều kiện. Hãy xem đoạn mã XAML sau, trong đó hộp kiểm và khối văn bản được tạo với một số thuộc tính. Khi hộp kiểm được chọn, nó sẽ thay đổi màu nền trước của nó thành màu đỏ.

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

Khi đoạn mã trên được biên dịch và thực thi, nó sẽ tạo ra kết quả sau:

Khi bạn đánh dấu vào hộp kiểm, khối văn bản sẽ thay đổi màu nền trước của nó thành màu đỏ.

Trình kích hoạt sự kiện

Trình kích hoạt sự kiện thực hiện một số hành động khi một sự kiện cụ thể được kích hoạt. Nó thường được sử dụng để thực hiện một số hoạt ảnh trên điều khiển như DoubleAnumatio, ColorAnimation, v.v. Trong ví dụ sau, chúng ta sẽ tạo một nút đơn giản. Khi sự kiện nhấp chuột được kích hoạt, nó sẽ mở rộng chiều rộng và chiều cao của nút.

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

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra cửa sổ sau:

Khi nhấp vào nút, bạn sẽ thấy rằng nó sẽ bắt đầu mở rộng theo cả hai chiều.

Chúng tôi khuyên bạn nên biên dịch và thực thi các ví dụ trên, đồng thời áp dụng các trình kích hoạt cho các thuộc tính khác.