Image Button in C# Code behind

I'm trying to set an image background in code-behind. I tried adding a background image to the button, but as soon as I hover over the button, the image disappears. To solve this, I have to write functions to override the button behavior, which is too much to do in code-behind.

I then use an alternative method, that is to add a button and an image separately to a grid cell. The issue is -- when I click on the image, the button won't 开发者_StackOverflowtrigger.

How do I make the button to have the hover and pressed effect, even when, the mouse is either hovering or presses the image on the button, but not the remaining area of the button?

Or hope someone can suggest me a better solution.Below is my code.

        InitializeComponent();
        Button playBtn = new Button();
        playBtn.Width = 60;
        playBtn.Height = 30;
        Image playIcon = new Image();
        playIcon.Source = new BitmapImage(new Uri(@"PATH"));
        playIcon.Stretch = Stretch.Uniform;
        playIcon.Height = 25;

        grid1.Children.Add(playBtn);
        grid1.Children.Add(playIcon);

        Grid.SetColumn(playBtn, 0);
        Grid.SetRow(playBtn, 0);
        Grid.SetColumn(playIcon, 0);
        Grid.SetColumn(playIcon, 0);

thanks for everyone input, after digging more into it, it sort of work out. What I did is add a Grid to Button.Content then add the image to the Grid. And using Opacity to add the grey out effect for IsEnable false state. Below I post my code, hope someone find it useful or improve on:

    Button playBtn = new Button();
    Image playIcon = new Image();

    public MainWindow()
    {
        InitializeComponent();

        Grid grid2 = new Grid();
        RowDefinition grid2_row1 = new RowDefinition();
        ColumnDefinition grid2_col1 = new ColumnDefinition();
        grid2.RowDefinitions.Add(grid2_row1);
        grid2.ColumnDefinitions.Add(grid2_col1);

        playBtn.Width = 60;
        playBtn.Height = 30;
        playBtn.Click += playBtn_Click;

        playIcon.Source = new BitmapImage(new Uri(@"pack://PATH..."));
        playIcon.Stretch = Stretch.Uniform;
        playIcon.Height = 25;

        playBtn.Content = grid2;
        grid2.Children.Add(playIcon);

        grid1.Children.Add(playBtn);

        Grid.SetRow(playIcon, 0);
        Grid.SetColumn(playIcon, 0);
    }

    public void playBtn_Click(object sender, RoutedEventArgs e)
    {
        MessageBox.Show("Hello");
    }

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        playBtn.IsEnabled = false;
        playIcon.Opacity = 0.3;
    }

Buttons in WPF have different states = "normal", "mouse over" and "pressed" are three.

When you create the button you are setting up it's "normal" state. You also need to set the "mouse over" state to have the same image as well.

Check the below links

http://blogs.msdn.com/b/knom/archive/2007/10/31/wpf-control-development-3-ways-to-build-an-imagebutton.aspx

http://www.hardcodet.net/2009/01/create-wpf-image-button-through-attached-properties

http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/91df562f-414c-4326-ac65-42ef301b5f8f/