1. Kiểu (Style) trong WPF

Trong WPF, bạn có thể định nghĩa các kiểu (Style) giống như CSS trong các ứng dụng web để áp dụng thiết kế đồng bộ cho các thành phần kiểm soát (control). Kiểu là một dạng tài nguyên, chẳng hạn như định nghĩa nền và font chữ chung cho các nút bấm (Button):

<Window.Resources>
    <Style TargetType="Button">
        <Setter Property="Background" Value="LightBlue"/>
        <Setter Property="Padding" Value="10"/>
        <Setter Property="FontFamily" Value="Arial"/>
        <Setter Property="FontSize" Value="16"/>
    </Style>
</Window.Resources>
<StackPanel>
    <Button Content="Nút A"/>
    <Button Background="White" Foreground="Green" Content="Nút B"/>
</StackPanel>

Kết quả:

• Các thuộc tính được định nghĩa trong Style sẽ ảnh hưởng đến tất cả các Button trong cửa sổ.
• Bạn có thể ghi đè các thuộc tính của Style bằng cách chỉ định trực tiếp trên từng Button.

Kiểu này tương tự như selector theo loại trong CSS.

Bạn cũng có thể thêm thuộc tính x:Key để tạo kiểu cụ thể và sử dụng BasedOn để thừa kế từ kiểu đã tồn tại:

<Window.Resources>
    <Style TargetType="Button" x:Key="CustomButtonStyle">
        <Setter Property="Background" Value="DarkCyan"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontSize" Value="20"/>
    </Style>
    <Style TargetType="Button" x:Key="ExtendedButtonStyle" BasedOn="{StaticResource CustomButtonStyle}">
        <Setter Property="FontWeight" Value="Bold"/>
    </Style>
</Window.Resources>
<StackPanel>
    <Button Style="{StaticResource CustomButtonStyle}" Content="Nút C"/>
    <Button Style="{StaticResource ExtendedButtonStyle}" Content="Nút D"/>
</StackPanel>

2. Mẫu kiểm soát (ControlTemplate)

Khi cần thay đổi giao diện của một kiểm soát mà không muốn tạo kiểm soát tùy chỉnh, bạn có thể sử dụng ControlTemplate. Ví dụ, tạo một nút tròn:

<Window.Resources>
    <Style TargetType="Button" x:Key="CircularButtonStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Ellipse Fill="{TemplateBinding Background}"/>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Background">
            <Setter.Value>
                <RadialGradientBrush Center="0.5,0.5" GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                    <GradientStop Color="Yellow" Offset="0"/>
                    <GradientStop Color="Red" Offset="1"/>
                </RadialGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<StackPanel>
    <Button Style="{StaticResource CircularButtonStyle}" Width="120" Height="120" Content="Tròn"/>
    <Button Content="Thường"/>
</StackPanel>

3. Bộ kích hoạt (Triggers)

Để thay đổi giao diện dựa trên trạng thái của kiểm soát, bạn có thể sử dụng Triggers. Ví dụ, thay đổi màu chữ khi con trỏ chuột di chuyển qua hoặc khi kiểm soát nhận được tiêu điểm từ bàn phím:

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Foreground" Value="Blue"/>
    </Trigger>
    <Trigger Property="IsKeyboardFocusWithin" Value="True">
        <Setter Property="Foreground" Value="Orange"/>
    </Trigger>
</ControlTemplate.Triggers>