How to create a button Image in WPF

Question

I have a button that I am trying to use with certain images. Xaml for the button is below.

    <Button Name="Button1" Grid.Row="1" Grid.Column="1" Background="Transparent" BorderBrush="Transparent" Click="Button1_Click" MouseEnter="Button1_MouseEnter" MouseLeave="Button1_MouseLeave">            
            <Image Name="Button1_Image" Source="/Assets/Button1Passive.png"/>            
    </Button>

The code behind:

private void Button1_Click(object sender, RoutedEventArgs e)
    {
        if (!Button1Active)
        {
            BitmapImage Image1 = new BitmapImage(new Uri("/Assets/Button1Selected.png", UriKind.Relative));
            Button1_Image.Source = Image1;
            Button1Active = true;
        }
        else
        {
            BitmapImage Image1 = new BitmapImage(new Uri("/Assets/Button1Passive.png", UriKind.Relative));
            Button1_Image.Source = Image1;
            Button1Active = false;
        }
    }

    private void Button1_MouseEnter(object sender, MouseEventArgs e)
    {
        if (!Button1Active)
        {
            BitmapImage Image1 = new BitmapImage(new Uri("/Assets/Button1RolledOver.png", UriKind.Relative));
            Button1_Image.Source = Image1;


        }
    }

    private void Button1_MouseLeave(object sender, MouseEventArgs e)
    {
        if (!Button1Active)
        {
            BitmapImage Image1 = new BitmapImage(new Uri("/Assets/Button1Passive.png", UriKind.Relative));
            Button1_Image.Source = Image1;
        }
    }

The problem that I am having is that the image does not take up the entire button and there is a blue box that is around the image when the mouse rolls over it.

WPF Box

I have looked to see if there is another solution and everything that I could find did not allow me to change the image programmatically.

Thanks in advance.

score 4 · Answer 1 · answered Mar 20 '17 at 13:12

You should override Button's template

    <Button Name="Button1" Grid.Row="1" Grid.Column="1"
            Background="Transparent" BorderBrush="Transparent"
            Click="Button1_Click" MouseEnter="Button1_MouseEnter"
            MouseLeave="Button1_MouseLeave">   
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <ContentPresenter Content="{TemplateBinding Content}"/>
            </ControlTemplate>
        </Button.Template>
        <Image Name="Button1_Image" Source="/Assets/Button1Passive.png"/>            
    </Button>

How to create a button Image in WPF

1 Answers1