Change ToggleButton image when clicked Silverlight

Question

I cannot for the life of me figure out how to change a ToggleButton image when clicked. I have looked up countless examples and they are all outdated and no longer work. Or if they do I cannot get them to work. Does anyone have an up to date example I could look at or any suggestions?

I tried doing it in the code behind first. The example I found used a BitmapImage but this is not possible anymore as the BeginInit method cant be used due to security reasons.

Next I tried numerous style triggers but I get way to many compile errors even when they are directly copied and modified to fit the correct parameters. So I am stuck. I cant figure out how to use an EventTrigger to do it nor do any older examples seem to work. Anyone have any ideas?

I don't know. I searched for it via Google and there was a thread where they stated that loading images from a local machine causes security issues and Silverlight doesn't support it. If I try to go ahead and do it anyways it wont compile. — yaegerbomb
That does make sense but why are you trying to access images on the local machine in the first place? — H.B.
I am making a custom media player. I want to be able to swap the play button to a pause button when it is clicked. However I cannot figure out how to do such a thing. — yaegerbomb
You could embedd the images in the application as resource, then there should be no access problem, no? — H.B.

Ron Warholic Ron Warholic · Accepted Answer · 2012-01-19T17:57:20

Why not something like:

<ToggleButton x:Name="b">
  <Image Src="myImage.png" Visibility="{Binding ElementName=b,Path=IsChecked,Converter="{StaticResource BooleanToVisibilityConverter}}"/>
  <Image Src="myOtherImage.png" Visibility="{Binding ElementName=b,Path=IsChecked,Converter="{StaticResource BooleanToVisibilityConverter,ConverterParameter=Invert}}"/>
</ToggleButton>

Where you have a boolean to visibility converter that can accept a parameter to invert the bool.

Edit:

You'll need to define a converter so that it can convert the bool? from the IsChecked property to a Visibility enum. That's what all the binding code does. There is a basic implementation here that will convert to Visibility.Visible when true and Visibility.Collapsed when false. You need to add a check for the parameter so that it inverts the visibility when Invert is passed (to toggle between two images).

The other way to do this is to define images in the style and use the visual states for Checked and Unchecked to flip flop the images. You can apply a style to multiple buttons but it's hard to vary the images per-button (what my solution does).

This is how you set up a Resource

XAML

<!-- Place this in your window -->
xmlns:converters="clr-namespace:NameSpace"

<!-- Place this above your root UI -->
<Window.Resources>
    <converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</Window.Resources>

Then use the converter here BooleanToVisibilityConverter

Change ToggleButton image when clicked Silverlight

2 Answers

XAML