WPF程序给按钮增加不同状态的图片

news2024/10/7 16:18:51

首先我们在资源里添加几个图片，Up，Over和Down状态。
然后我们创建一个Style。默认我们的背景设置成Up

然后在Triggers里添加代码，当Property：IsMouseOver为True的时候更换成Over；当Property：IsPressed为True的时候更换成Down；

这样就可以了。代码如下：

<Window.Resources>
    
    <ImageBrush  x:Key="btnCloseUp" ImageSource="/source/guanbi.png"></ImageBrush>
    <ImageBrush  x:Key="btnCloseOver" ImageSource="/source/guanbi1.png"></ImageBrush>
    <ImageBrush  x:Key="btnCloseDown" ImageSource="/source/guanbi1 1.png"></ImageBrush>
    
    <Style x:Key="btnCloseStyle" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="{StaticResource btnCloseUp}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="button"
                    BorderThickness="0"
                    Background="{TemplateBinding Background}"
                            
                    SnapsToDevicePixels="True" IsEnabled="False">
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="button" Value="{StaticResource btnCloseOver}"></Setter>
                        </Trigger>

                        <Trigger Property="IsPressed"  Value="True">
                            <Setter Property="Background" TargetName="button" Value="{StaticResource btnCloseDown}"></Setter>
                        </Trigger>

                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    

</Window.Resources>

当然如果需要不可用的时候显示成灰色，可以添加其他的状态：

<Trigger Property="IsEnabled"  Value="False">
    <Setter Property="Background" TargetName="button" Value="{StaticResource btnUpdateImgDisable}"></Setter>
</Trigger>