WPF | 修改鼠標停留在Button上時的Style

這里用到屬性觸發器，當Button的IsMouseOver屬性值為True時，我們對其樣式進行修改，這里以修改Button背景色為例。

首先是啟動后未觸發時的效果圖：

 

 

我一開始想到的就是直接修改其Background屬性，代碼如下：

        <Button Height="30" Width="150" BorderBrush="{x:Null}" BorderThickness="0">
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Background" Value="#dd1144 "/>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#3f48cc"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>

 但是實際運行效果沒達到預期，鼠標停留在Button上時仍然是原來自帶的樣式ORZ（截圖截不到鼠標。。。

 

 

然后我又做了一個嘗試，修改了Button的Template屬性，代碼如下：

        <Button Height="30" Width="150" BorderBrush="{x:Null}" BorderThickness="0">
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Background" Value="#dd1144 "/>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Rectangle Fill="#3f48cc"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>

一顆賽艇，這次成功達到預期效果了：