无法更改Button的背景图片

Question

I have a problem with button control. When I hover over it, the button's image is missing. However, when mouse leaves it, the image comes back. I want to preserve the image when mouse over is true.

this is when mouse is over

this is normal status

and this is my code

 <Button Name="miliage_btn" Canvas.Left="775" Canvas.Top="57" Width="239" Height="80" Click="Button_Click" >
                    <Button.Background>
                        <ImageBrush ImageSource="D:\남경현\로드오브다이스 시뮬/pack0.jpg">
                        </ImageBrush>
                    </Button.Background>
                </Button>

and i try this code

<Button.Style>
                        <Style TargetType="Button">
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter Property="Background">
                                        <Setter.Value>
                                            <ImageBrush ImageSource="D:\남경현\로드오브다이스 시뮬/1회뽑기.png"/>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>

Can it be fixed either in xaml or c#?

Answer 1

There are a few things to consider when creating a control style.

First, when you declare a Trigger, the target property of any Setters in that Trigger must not be set directly on the control (like you did by assigning Button.Background directly). It must instead also be set by a Setter in the Style. The reason is explained in Dependency Property Value Precedence .

Second, the default ControlTemplate of a Button shows a visual overlay for mouse over, which overlays the Background. You should replace that by declaring your own ControlTemplate.

Instead of loading images from absolute file paths, you should consider adding the image files to your Visual Studio project (eg in a folder called Images) and set their Build Action to Resource .

<Button Content="Hello">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="Images/StandardBackground.png"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background">
                        <Setter.Value>
                            <ImageBrush ImageSource="Images/MouseOverBackground.png"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>