XAML - Mức độ ứng dụng

Việc xác định kiểu ở cấp Ứng dụng giúp bạn có thể truy cập được kiểu đó trong toàn bộ ứng dụng. Hãy xem cùng một ví dụ; chỉ cần đặt các kiểu trong tệp app.xaml để làm cho nó có thể truy cập được trong toàn bộ ứng dụng. Dưới đây là mã XAML trong app.xaml.

<Application x:Class = "Styles.App" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   StartupUri = "MainWindow.xaml">
	
   <Application.Resources>
      <Style TargetType = "TextBlock">
         <Setter Property = "FontSize" Value = "24" />
         <Setter Property = "Margin" Value = "5" />
         <Setter Property = "FontWeight" Value = "Bold" />
      </Style>
		
      <Style TargetType = "TextBox">
         <Setter Property = "HorizontalAlignment" Value = "Left" />
         <Setter Property = "FontSize" Value = "24" />
         <Setter Property = "Margin" Value = "5" />
         <Setter Property = "Width" Value = "200" />
         <Setter Property = "Height" Value = "40" />
      </Style>
   </Application.Resources>
	
</Application>

Đây là mã XAML trong đó các khối văn bản và hộp văn bản được tạo.

<Window x:Class = "Styles.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>
      <Grid.RowDefinitions>
         <RowDefinition Height = "Auto" />
         <RowDefinition Height = "Auto" />
         <RowDefinition Height = "Auto" />
         <RowDefinition Height = "*" />
      </Grid.RowDefinitions>
		
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width = "*" />
         <ColumnDefinition Width = "2*" />
      </Grid.ColumnDefinitions>
		
      <TextBlock Text = "First Name: "/>
      <TextBox Name = "FirstName" Grid.Column = "1" />
      <TextBlock Text = "Last Name: " Grid.Row = "1" />
      <TextBox Name = "LastName" Grid.Column = "1" Grid.Row = "1" />
      <TextBlock Text = "Email: " Grid.Row = "2" />
      <TextBox Name = "Email" Grid.Column = "1" Grid.Row = "2"/>
   </Grid>
	
</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. Quan sát rằng đầu ra vẫn giống hệt nhau.

XAML – Trình kích hoạt

Về cơ bản, 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, về cơ bản, nó cho phép bạn thay đổi động diện mạo và / hoặc hành vi của điều khiển mà không cần phải tạo mới.

Các 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 định nghĩa 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 một 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 nếu bạn muốn thay đổi giao diện của nút khi chuột qua nút.

Thí dụ

Ví dụ sau minh họa cách thay đổi màu nền trước của một nút khi chuột vào vùng của nó.

<Window x:Class = "XAMLPropertyTriggers.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 kết quả sau:

Khi chuột vào vùng nút, màu nền trước sẽ chuyển thành màu xanh lục.

Kích hoạt dữ liệu

Một trình kích hoạt dữ liệu thực hiện một số hành động khi dữ liệu bị ràng buộc 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 thành màu đỏ.

<Window x:Class = "XAMLDataTrigger.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 bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra kết quả sau:

Khi hộp kiểm được chọn, màu nền trước của khối văn bản sẽ chuyể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 như DoubleAnimation, ColorAnimation, v.v. Khối mã sau 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 = "XAMLEventTrigger.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 kết quả sau: