Blue Square on Button Hover

Question

I'm new to WPF, and I'm simply experimenting with creating a gui to load a bunch of movie titles, and randomly select one. Currently, I'm working on getting my own custom close button to work. I want to replace the image with a different one, when the mouse hovers over it. However, when I do this, I get a blue square that comes up, instead of my image. Any idea why?

Also, how would I implement a new image to be shown when the button is clicked?

I have the following code:

<Button x:Name="xbutton" Height="34" Margin="765,0,0,0" VerticalAlignment="Top">
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Background">
                        <Setter.Value>
                            <ImageBrush ImageSource="images\ExNoHover.png"/>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background">
                                <Setter.Value>
                                    <ImageBrush ImageSource="images/ExHover.png"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>

Thanks

score 1 · Answer 1 · edited May 23 '17 at 10:31

1

You will need to create a custom template for your button.

See this for an example: WPF - How to create image button with template

edited May 23 '17 at 10:31

Community

1
1

answered Mar 05 '14 at 00:04

robertos

1,810
10
12

score 1 · Answer 2 · edited May 23 '17 at 12:03

This post has the answer to your question

button template

I changed it a bit to suit you

 <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <ControlTemplate.Resources>
                        <Style x:Key="ShadowStyle">
                            <Setter Property="Control.Background">
                                <Setter.Value>
                                    <ImageBrush ImageSource="../Images/D.png"/>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ControlTemplate.Resources>
                    <Border Name="border" BorderThickness="1" Padding="4,2" BorderBrush="DarkGray" CornerRadius="3" Background="{TemplateBinding Background}">
                        <Grid >
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="contentShadow" Style="{StaticResource ShadowStyle}">
                                <ContentPresenter.RenderTransform>
                                    <TranslateTransform X="1.0" Y="1.0" />
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="content"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Control.Background">
                    <Setter.Value>
                        <ImageBrush ImageSource="../Images/F.png"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

put this inside and apply this style to your button

 <Button x:Name="xbutton" Height="34"  
         Style="{DynamicResource MouseOverButtonStyle}">
 </Button>

score 1 · Answer 3 · answered Mar 05 '14 at 06:30

Add Image as content of Button and apply triggers on Image instead.

    <Button>
        <Image Stretch="Fill">
            <Image.Style>
                <Style TargetType="Image">
                    <Setter Property="Source" Value="Images/Normal.png"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsMouseOver,
                            RelativeSource={RelativeSource Self}}" Value="True">
                            <Setter Property="Source" Value="Images/Hover.png"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
    </Button>

Blue Square on Button Hover

3 Answers3