WPF杂谈

Style

WPF中关于Style的作用，我们从一个简单的例子开始：

<UniformGrid>
    <Button
        Width="120"
        Height="32"
        Background="Blue">
        Button1
    </Button>
    <Button
        Width="120"
        Height="32"
        Background="Blue">
        Button2
    </Button>
    <Button
        Width="120"
        Height="32"
        Background="Blue">
        Button3
    </Button>
    <Button
        Width="120"
        Height="32"
        Background="Blue">
        Button4
    </Button>
</UniformGrid>

例子中，我们有4个Button, 都设置了宽高和背景色:

<Button
        Width="120"
        Height="32"
        Background="Blue"/>

这是抄自微软MSDN的一句话：

You can think of a Style as a convenient way to apply a set of property values to multiple elements.

来源：Styles and templates - WPF .NET | Microsoft Learn

译：可以把Style看成是将【一组属性值】应用到【多个不同元素】的一种便利方式。

<UserControl.Resources>
    <Style x:Key="BLUE_BTN" TargetType="{x:Type Button}">
        <Setter Property="Width" Value="120" />
        <Setter Property="Height" Value="32" />
        <Setter Property="Background" Value="Blue" />
    </Style>
</UserControl.Resources>
<UniformGrid>
    <Button Style="{StaticResource BLUE_BTN}">
        Button1
    </Button>
    <Button Style="{StaticResource BLUE_BTN}">
        Button2
    </Button>
    <Button Style="{StaticResource BLUE_BTN}">
        Button3
    </Button>
    <Button Style="{StaticResource BLUE_BTN}">
        Button4
    </Button>
</UniformGrid>

ControlTemplates

WPF中ControlTemplate定义了控件的外观，下面是一个例子通过重写Button的Template实现IconButton.

<Button Width="48" Height="48">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid>
                <Image x:Name="img" Source="image/play.png" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Trigger.Setters>
                         <Setter TargetName="img" Property="Source" Value="image/pause.png" />
                    </Trigger.Setters>
               </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

Triggers

当属性值发生变化或引发事件时，触发器设置属性或启动动作(例如动画)。Style，ControlTemplate和DataTemplate都有触发器。

PropertyTriggers

<Window.Resources>
    <!-- .... other resources .... -->

    <Style TargetType="ListBoxItem">
        <Setter Property="Opacity" Value="0.5" />
        <Setter Property="MaxHeight" Value="75" />
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Trigger.Setters>
                    <Setter Property="Opacity" Value="1.0" />
                </Trigger.Setters>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

事件触发器和故事板

<Button.Style>
    <Style TargetType="Button">
        <Style.Triggers>
            <EventTrigger RoutedEvent="Mouse.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetProperty="Width"
                                To="64"
                                Duration="0:0:0.2" />
                            <DoubleAnimation
                                Storyboard.TargetProperty="Height"
                                To="64"
                                Duration="0:0:0.2" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="Mouse.MouseLeave">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Width" Duration="0:0:0.2" />
                            <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:0.2" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</Button.Style>