Trigger, DataTrigger & EventTrigger

Cho đến nay, chúng tôi đã làm việc với các styles bằng cách đặt giá trị tĩnh cho một thuộc tính cụ thể. Tuy nhiên, bằng cách sử dụng triggers, bạn có thể thay đổi giá trị của một thuộc tính nhất định, một khi một điều kiện nhất định thay đổi. Triggers có nhiều kiểu: Property triggers, event triggers và data triggers. Thay vào đó, chúng cho phép bạn thực hiện những thứ thường được thực hiện bằng code-behind, đây là một phần của quá trình phân tách style và code đang diễn ra.

Property trigger

Trigger phổ biến nhất là property trigger, trong phần đánh dấu được xác định đơn giản bằng phần tử <Trigger>. Nó xem một thuộc tính cụ thể trên quyền kiểm soát của chủ sở hữu và khi thuộc tính đó có giá trị khớp với giá trị được chỉ định, các thuộc tính có thể thay đổi. Về lý thuyết điều này nghe có vẻ hơi phức tạp, nhưng thực ra nó khá đơn giản một khi chúng ta biến lý thuyết thành một ví dụ:

<Window x:Class="WpfTutorialSamples.Styles.StyleTriggersSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyleTriggersSample" Height="100" Width="300">
    <Grid>
        <TextBlock Text="Hello, styled world!" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Foreground" Value="Blue"></Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="Red" />
                            <Setter Property="TextDecorations" Value="Underline" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>

Theo kiểu này, chúng tôi đặt thuộc tính Foreground thành màu xanh lam, để làm cho nó trông giống như một hyperlink. Sau đó, chúng tôi thêm một trigger, lắng nghe thuộc tính IsMouseOver - một khi thuộc tính này thay đổi thành True, chúng tôi áp dụng hai setters: Chúng tôi thay đổi Foreground thành màu đỏ và sau đó chúng tôi làm cho nó được gạch chân. Đây là một ví dụ tuyệt vời về việc dễ dàng sử dụng các triggers để áp dụng các thay đổi thiết kế, hoàn toàn không có bất kỳ code-behind code nào.

Chúng tôi xác định local style cho cụ thể TextBlock này, nhưng như được trình bày trong các bài viết trước, style này cũng có thể được định nghĩa toàn cầu, nếu chúng tôi muốn nó áp dụng cho tất cả các điều khiển TextBlock trong ứng dụng.

Data triggers

Data triggers, được biểu thị bằng phần tử <DataTrigger>, được sử dụng cho các thuộc tính không nhất thiết là thuộc tính phụ thuộc. Nó làm việc bằng cách tạo ra một ràng buộc với một giá trị thông thường, sau đó được theo dõi để thay đổi. Điều này cũng mở ra để ràng buộc trigger của bạn với một giá trị trên một điều khiển khác. Ví dụ, hãy xem xét ví dụ sau:

<Window x:Class="WpfTutorialSamples.Styles.StyleDataTriggerSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyleDataTriggerSample" Height="200" Width="200">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <CheckBox Name="cbSample" Content="Hello, world?" />
        <TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="48">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Text" Value="No" />
                    <Setter Property="Foreground" Value="Red" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=cbSample, Path=IsChecked}" Value="True">
                            <Setter Property="Text" Value="Yes!" />
                            <Setter Property="Foreground" Value="Green" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </StackPanel>
</Window>

Trong ví dụ này, chúng ta có một CheckBox và TextBlock. Sử dụng DataTrigger, chúng tôi liên kết TextBlock với thuộc tính IsChecked của CheckBox. Sau đó, chúng tôi cung cấp một default style, trong đó text is "No" và foreground là màu đỏ, và sau đó, bằng cách sử dụng DataTrigger, chúng tôi cung cấp một kiểu cho khi thuộc tính IsChecked của CheckBox được thay đổi thành True, trong trường hợp đó chúng tôi thực hiện nó màu xanh lá cây với một văn bản nói "Yes!" (như đã thấy trên ảnh chụp màn hình).

Event triggers

Event triggers, được đại diện bởi phần tử <EventTrigger>, hầu hết được sử dụng để trigger hoạt ảnh, để đáp ứng với một sự kiện được gọi. Chúng tôi chưa thảo luận về animations, nhưng để chứng minh cách event trigger hoạt động, chúng tôi sẽ sử dụng chúng theo cách nào. Có một cái nhìn về chương về animations để biết thêm chi tiết. Đây là ví dụ:

<Window x:Class="WpfTutorialSamples.Styles.StyleEventTriggerSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyleEventTriggerSample" Height="100" Width="300">
    <Grid>
        <TextBlock Name="lblStyled" Text="Hello, styled world!" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.300" Storyboard.TargetProperty="FontSize" To="28" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.800" Storyboard.TargetProperty="FontSize" To="18" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>

Đánh dấu có thể trông hơi quá, nhưng nếu bạn chạy ví dụ này và xem kết quả, bạn sẽ thấy rằng chúng tôi thực sự đã hoàn thành một animation khá hay, đi cả hai chiều, trong ~20 dòng XAML. Như bạn có thể thấy, tôi sử dụng EventTrigger để đăng ký hai sự kiện: MouseEnter và MouseLeave. Khi chuột vào, tôi thực hiện chuyển đổi mượt mà và animation sang FontSize 28 pixel trong 300 mili giây. Khi chuột rời đi, tôi thay đổi FontSize trở lại 18 pixel nhưng tôi làm nó chậm hơn một chút, chỉ vì nó trông khá tuyệt.

Tổng kết

WPF styles giúp dễ dàng có được một cái nhìn nhất quán và với các triggers, giao diện này trở nên năng động. Styles rất tuyệt trong ứng dụng của bạn, nhưng chúng thậm chí còn tốt hơn khi được sử dụng trong các mẫu điều khiển, v.v. Bạn có thể đọc thêm về điều đó ở nơi khác trong hướng dẫn này.

Trong bài viết tiếp theo, chúng ta sẽ xem xét multi triggers, cho phép chúng ta áp dụng các kiểu dựa trên nhiều thuộc tính.