button image changing

Question

I'd like to change a background image of my button each time user presses it. I've set ImageSource to my picture. When mouse is over the button my button doesn't show the image. How to set the picture so that even if mouse is over button is still with image?

        <Button x:Name="recordButton" Content="" HorizontalAlignment="Left" Height="50" Margin="60,45,0,0" VerticalAlignment="Top" Width="50" Click="recordButton_Click">
        <Button.Background>
            <ImageBrush ImageSource="play.png"/>
        </Button.Background>
    </Button>

And another question. How to change those two pictures? Their names are "play.png" and "stop.png", both are located in Resources.

        private bool recordStarted = false;

    private void recordButton_Click(object sender, RoutedEventArgs e)
    {
        recordStarted = !recordStarted;


        if(recordStarted)
        {
            ImageBrush brush1 = new ImageBrush();
            BitmapImage image = Properties.Resources.stop;
            brush1.ImageSource = image;
            recordButton.Background = brush1;

        }
    }

I've tried this but VS can't find BitmapImage image = Properties.Resources.stop; Help, please !

score 1 · Accepted Answer · edited May 23 '17 at 11:49

1

I would recommend not setting the background to be the image, but instead set the content to be the image

<Button x:Name="recordButton" HorizontalAlignment="Left" Height="50" Margin="60,45,0,0" VerticalAlignment="Top" Width="50" Click="recordButton_Click">
    <Image Source="play.png"/>
</Button>

If you want to change the image, you can do this within text, it is easiest to use images compiled as resource rather than images in a resource file

(recordButton.Content as Image).Source = new BitmapImage(new Uri("Images/stop.png", UriKind.Relative));

If you want to use a resource file, see this SO post

edited May 23 '17 at 11:49

Community

1
1

answered Jun 17 '12 at 06:49

Shawn Kendrot

12,425
1
25
41

Hmm. But how will it help to change picutres? – kirillbobyrev Jun 17 '12 at 06:51
Thanks. But... now after pressing the button it just doesn't show any image anymore. So it doesn't help :( – kirillbobyrev Jun 17 '12 at 07:14
make sure that "Images/stop.png" is the correct location for your image and that it is set to compile as a resource (item properties) – Shawn Kendrot Jun 17 '12 at 07:16

score 0 · Answer 2 · answered Jun 17 '12 at 07:11

There are some ways to change pictures:

Redefine a button control template and use VisualStateManager.
Redefine the control template and use Triggers.
You may try to bind button's content to it's MouseOver property: when is mouse over hide one image and show another.

button image changing

2 Answers2