WPF 触发器介绍控件模板重写（自定义模板）

原创已于 2023-08-07 15:37:35 修改 · 863 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#wpf

于 2023-07-22 09:52:26 首次发布

WPF 专栏收录该内容

15 篇文章

订阅专栏

这篇文章介绍了WPF中触发器的概念和类型，如Trigger、MultiTrigger、DataTrigger等，它们用于响应依赖属性变化、数据变化或事件。通过示例展示了如何在样式和控件模板中使用触发器来改变按钮的样式，例如在鼠标悬停时改变前景色和字体大小。此外，还演示了如何重写控件模板并添加触发器以实现更复杂的交互效果。

触发器可以理解为，当达到了触发的条件，那么就执行预期内的响应，可以是样式、数据变化、动画等。
触发器通过 Style.Triggers集合连接到样式中，每个样式都可以由任意多歌触发器，并且每个触发器都是System.Windows.TriggerBase的派生类实例。以下是触发器的类型：

Trigger：检测依赖属性的变化、触发器生效
MultiTrigger：通过多个条件的设置、达到满足条件、触发器生效
DataTrigger：通过数据的变化、触发器生效
MultiDataTrigger：多个数据条件的触发器
EventTrigger：事件触发器，触发了某类事件时，触发器生效。

<Window.Resources>
        <Style x:Key="BaseStyle" TargetType="Button">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="Foreground" Value="Red"/>
            
            <!--触发器，一般声明在样式里-->
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Blue"/>
                    <Setter Property="FontSize" Value="20"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Foreground" Value="Red"/>
                    <Setter Property="FontSize" Value="10"/>
                </Trigger>
            </Style.Triggers>
        </Style>
        
        <!--继承-->
        <Style x:Key="style1" TargetType="Button" BasedOn="{StaticResource BaseStyle}">
            <Setter Property="Content" Value="Hello"/>
        </Style>
    </Window.Resources>
    <Grid >
        <StackPanel>
            <Button Style="{StaticResource style1}"/>
            <Button Style="{StaticResource style1}"/>
            <Button Style="{StaticResource style1}"/>
            <Button Style="{StaticResource style1}"/>
            <Button Style="{StaticResource style1}"/>
        </StackPanel>
    </Grid>

控件模板重写

<Grid>
        <Button Width="300" Height="100" Content="自定义按钮" Background="#0078d4" FontSize="50" Foreground="White" BorderBrush="Black" BorderThickness="4">
            <!--自定义-->
            <Button.Template>
                <ControlTemplate TargetType="Button">  <!--或者TargetType="{x:Type Button}"-->
                    <Border x:Name="boder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10">
                        <TextBlock x:Name="txtContent" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>

                    <!--触发器-->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="boder" Property="Background" Value="Black"/>
                            <Setter TargetName="txtContent" Property="FontSize" Value="100"/>
                        </Trigger>

                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="boder" Property="Background" Value="WhiteSmoke"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
                
                
            </Button.Template>
        </Button>
        
    </Grid>