Thứ tư, ngày 7 tháng 12 năm 2016

WPF – Style và Trigger

Ngày đăng: 26/3/2012, 8:39:15PM | Lượt xem: 2,567
Hot!

Style là một kĩ thuật để định dạng cách hiển thị, xử lý cho một/nhiều control bằng cách gán giá trị cho các property, event. Sử dụng Style giúp cho việc thiết kế giao diện trở nên dễ dàng và linh hoạt hơn nhiều so với Windows Forms.

Style là một kĩ thuật để định dạng cách hiển thị, xử lý cho một/nhiều control bằng cách gán giá trị cho các property, event. Sử dụng Style giúp cho việc thiết kế giao diện trở nên dễ dàng và linh hoạt hơn nhiều so với Windows Forms.

Setter và EventSetter

Lớp Style chứa một collection các đối tượng SetterBase và được truy xuất thông qua property Style.Setters. Có hai lớp được thừa kế từ SetterBase là Setter dùng để gán giá trị cho property và EventSetter để gán giá trị cho các event.

Một Style đơn giản viết theo kiểu in-line:

<Button Content="Hello">
    <Button.Style>
        <Style>
            <Setter Property="Button.FontSize" Value="20"/>
            <Setter Property="Control.Foreground" Value="Blue"/>
            <EventSetter Event="Button.Click" Handler="Button_Click" />
        </Style>
    </Button.Style>
</Button>

Thay vì dùng cách trên, thông thường ta sẽ tách riêng style bằng cách tạo trong phần resource,  bằng cách này ta có thể sử dụng style nhiều lần:

<Window.Resources>
    <Style x:Key="style1">
        <Setter Property="Button.FontSize" Value="20"/>
        <Setter Property="Control.Foreground" Value="Blue"/>
        <EventSetter Event="Button.Click" Handler="Button_Click" />
    </Style>
</Window.Resources>
…
<Button Content="Hello" Style="{StaticResource style1}"/>

Extending và Overriding

Các style có thể thừa kế nhau thông qua việc gán giá trị cho thuộc tính BaseOn (kiểu Style). Ví dụ style 2 sau sẽ có đầy đủ các Setter mà bạn thêm vào style1:

<Window.Resources>
    <Style x:Key="style1">
        <Setter Property="Button.FontSize" Value="20"/>
    </Style>
    <Style x:Key="style2" BasedOn="{StaticResource style1}">
        <Setter Property="Control.Foreground" Value="Blue"/>
    </Style>
</Window.Resources>
...
<Button Content="Hello" Style="{StaticResource style2}"/>

Khi muốn ghi đè giá trị của một property thuộc control đã được áp dụng style, bạn chỉ việc gán lại giá trị mới cho property đó.

Target Type

Style được tạo ra có thể được áp dụng cho một kiểu control nhất định thông qua thuộc tính TargetType (kiểu System.Type). Lưu ý là khi sử dụng cách này, bạn không cần đặt key cho style, bất kì control nào có kiểu được xác định bởi TargetType sẽ tự động được áp dụng style này.

<Style TargetType="Button" >
    <Setter Property="FontSize" Value="20"/>
</Style>

Trigger

Trigger là phương pháp giúp bạn đặt giá trị cho các property dựa trên một điều kiện cụ thể. Các Trigger được lưu trong collection Style.Triggers. Một Trigger bao gồm hai phần chính là:

-       Điều kiện kích hoạt Trigger được tạo bằng cách gán hai giá trị Trigger.Property và Trigger.Value.

-       Một collection SetterBase để thay đổi giá trị của các property khi điều kiện của Trigger được đáp ứng.

Ví dụ sau tôi sử dụng các Trigger để tự động thay đổi màu chữ của Button khi property Button.Content chỉ ra tên của màu đó:

 <Style TargetType="Button">
    <Style.Triggers>
        <Trigger Property="Content" Value="Blue" >
            <Setter Property="Foreground" Value="Blue" />
        </Trigger>
        ...
        <Trigger Property="Content" Value="Purple" >
            <Setter Property="Foreground" Value="Purple" />
        </Trigger>
    </Style.Triggers>
</Style>
…
<Button Content="Purple" />

MultiTrigger

Khi cần đặt nhiều điều kiện cho Trigger, bạn cần sử dụng lớp MultiTrigger. Lớp này chứa một collection các đối tượng Condition tương ứng với mỗi điều kiện mà bạn đặt. Với Condition, bạn có thể đặt điều kiện bằng cách xác định property hoặc sử dụng binding. Tuy nhiên bạn chỉ được phép dùng binding khi làm việc với lớp MultiDataTrigger (giới thiệu ở phần dưới).

<Style TargetType="Button">
    <Style.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="Content" Value="Blue" />
                <Condition Property="FontSize" Value="12" />
            </MultiTrigger.Conditions>
            <Setter Property="Foreground" Value="Blue"/>
        </MultiTrigger>
    </Style.Triggers>
</Style>

DataTrigger và MultiDataTrigger

Đặc điểm chính của DataTrigger là không xét điều kiện dựa trên các property mà dựa trên binding. Như vậy bạn sử dụng DataTrigger tương tự như Trigger chỉ khác ở điểm bạn cần sử dụng thuộc tính Binding thay vì Property.

Ví dụ sau sử dụng binding kết hơp với style để highlight các item có giá trị đặc biệt trong một ListBox.

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        listBox1.ItemsSource = new Person[]{
            new Person() { Age = 11, Name = "Alan" },
            new Person() { Age = 11, Name = "Tessa" },
            new Person() { Age = 12, Name = "Lenny" }
        };
    }
}
public class Person
{
    public int Age
    {
        get; set;
    }

    public string Name
    {
        get; set;
    }

    public override string ToString()
    {
        return Name + " - age: " + Age;
    }

}

DataTrigger:

<Window.Resources>
    <Style TargetType="ListBoxItem">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=Age}" Value="11">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Grid Width="300" Height="100">
    <ListBox Name="listBox1"/>
</Grid>

và MultiDataTrigger:

<Style TargetType="{x:Type ListBoxItem}">
    <Style.Triggers>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=Age}" Value="11" />
                <Condition Binding="{Binding Path=Name}" Value="Tessa" />
            </MultiDataTrigger.Conditions>
            <Setter Property="Background" Value="Yellow" />
        </MultiDataTrigger>
    </Style.Triggers>
</Style>

Kết quả:

EventTrigger

Thay vì sử dụng điều kiện là property và binding như các loại Trigger trên, EventTrigger được kích hoạt khi một event xảy ra trên control. EventTrigger không cho phép bạn thay đổi các property của control mà chỉ cho phép sử dụng các animation để áp dụng cho control.

Ví dụ sau thực hiện animation đổi màu của các đối tượng Ellipse khi bạn rê chuột vào trong control (Mouse.MouseEnter).

<Style TargetType="Ellipse">
    <Style.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation
                            Storyboard.TargetProperty="Fill.Color"
                            To="Orange" Duration="0:0:0.5" AutoReverse="True" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Style.Triggers>
</Style>
...
 <Ellipse Width="100" Height="100" Fill="LightBlue"/>

Kết quả:

http://yinyangit.wordpress.com

Đọc thêm:

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.