Create a trigger which set Image source with binding to a dependency property.

Question

I'm trying to create a specified button which switch images every time it pressed, without using the Click CBFunction, so I'm using toggle button and triggers (checked unchecked) and I want this button to
supply DP of string so who ever uses is button will only have to specify the images paths and a click CBFuntion to
perform what ever he wishes.
I managed to create the mechanism for switching images with triggers(but the triggers image paths are hard coded and not using DP) and to enable setting a click CBFunction. When I switch the hard coded image path with a DP which return a string with
the path the program crush, an exception is thrown.
U.C xaml:
<UserControl x:Class="ButtonChangeImage.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<Grid>
<ToggleButton x:Name="btnCI">
<ToggleButton.Content >
<Image Name="img" Source="C:\Users\AmitL\Desktop\joecocker.jpg"/>
</ToggleButton.Content>
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.Target="{x:Reference img}" Storyboard.TargetProperty="Source">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="{Binding FirstImage}"/>
<!--<BitmapImage UriSource="C:\Users\AmitL\Desktop\james-brown-010.jpg"/>--><!--if I switch to this line it works fine!-->
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.Target="{x:Reference img}" Storyboard.TargetProperty="Source">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="C:\Users\AmitL\Desktop\joecocker.jpg"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
</Grid>
</UserControl>
U.C cs:
public partial class UserControl1 : UserControl
public static readonly DependencyProperty FirstImageDP = DependencyProperty.Register("FirstImage", typeof(string), typeof(UserControl1), new PropertyMetadata(@"C:\Users\AmitL\Desktop\james-brown-010.jpg", new PropertyChangedCallback(FirstImageSource)));
private string m_strFirstImage = string.Empty;
private BitmapImage m_oBMImage = null;
private static void FirstImageSource(DependencyObject obj, DependencyPropertyChangedEventArgs args)
UserControl1 l_UCBtnSwitchImage = (UserControl1)obj;
l_UCBtnSwitchImage.m_strFirstImage = (string)args.NewValue;
l_UCBtnSwitchImage.m_oBMImage = new BitmapImage(new Uri(l_UCBtnSwitchImage.m_strFirstImage, UriKind.Absolute));
public string FirstImage
get
string l_strTemp = (string)GetValue(FirstImageDP);
return l_strTemp;
set
SetValue(FirstImageDP, value);
public event RoutedEventHandler Click
add { btnCI.Click += value; }
remove { btnCI.Click -= value; }
public UserControl1()
InitializeComponent();
window xaml:
<Window x:Class="ButtonChangeImage.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:m="clr-namespace:ButtonChangeImage"
Title="MainWindow" Height="350" Width="525">
<Grid>
<m:UserControl1 Click="ToggleButton_Checked" FirstImage="C:\Users\AmitL\Desktop\james-brown-010.jpg"></m:UserControl1>
</Grid>
</Window>
The exception:
A first chance exception of type 'System.Windows.Markup.XamlParseException' occurred in PresentationFramework.dll
Additional information: 'Provide value on 'System.Windows.StaticResourceExtension' threw an exception.' Line number '20' and line position '46'.
I would love to know why when I switch the hard coded value with DP it suddenly throw exception, how to fix it or if there is other way to achieve U.C with those demands.
Thanks.

Answer 1

Hey Magnus,
Unfortunately I get the same result, the button is switching between the (Joe Cocker) image to blue button(normal pressed button look) how come the
(Joe Cocker) image return I didn't set a trigger for unchecked so what make it change the content
or the image source back to that image?
And I can't debug (by the way what's happening there how come it doesn't stop in all those code lines?).
I didn't make any changes here is all the code:
U.C cs:
namespace ButtonChangeImage
public class ImageConverter : IValueConverter
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
string s = value as string;
var source = new System.Windows.Media.Imaging.BitmapImage();
source.BeginInit();
source.UriSource = new Uri(s, UriKind.RelativeOrAbsolute);
source.EndInit();
return source;
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
throw new NotImplementedException();
public partial class UserControl1 : UserControl
public static readonly DependencyProperty FirstImageDP = DependencyProperty.Register("FirstImage", typeof(string), typeof(UserControl1), new PropertyMetadata(@"C:\Users\AmitL\Desktop\james-brown-010.jpg", new PropertyChangedCallback(FirstImageSource)));
private string m_strFirstImage = string.Empty;
private BitmapImage m_oBMImage = null;
private static void FirstImageSource(DependencyObject obj, DependencyPropertyChangedEventArgs args)
UserControl1 l_UCBtnSwitchImage = (UserControl1)obj;
l_UCBtnSwitchImage.m_strFirstImage = (string)args.NewValue;
l_UCBtnSwitchImage.m_oBMImage = new BitmapImage(new Uri(l_UCBtnSwitchImage.m_strFirstImage, UriKind.Absolute));
public string FirstImage
get
string l_strTemp = (string)GetValue(FirstImageDP);
return l_strTemp;
set
SetValue(FirstImageDP, value);
public event RoutedEventHandler Click
add { btnCI.Click += value; }
remove { btnCI.Click -= value; }
public UserControl1()
InitializeComponent();
U.C xaml:
<UserControl x:Class="ButtonChangeImage.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<Grid>
<ToggleButton x:Name="btnCI" xmlns:local="clr-namespace:ButtonChangeImage">
<ToggleButton.Resources>
<local:ImageConverter x:Key="conv" />
</ToggleButton.Resources>
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Content">
<Setter.Value>
<Image Name="img" Source="C:\Users\AmitL\Desktop\joecocker.jpg"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content">
<Setter.Value>
<Image Source="{Binding Path=FirstImage, Converter={StaticResource conv}}"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
</Grid>
</UserControl>
Main Window cs:
namespace ButtonChangeImage
public partial class MainWindow : Window
public MainWindow()
InitializeComponent();
private void ToggleButton_Checked(object sender, RoutedEventArgs e)
MessageBox.Show("f");
Main Window xaml:
<Window x:Class="ButtonChangeImage.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:m="clr-namespace:ButtonChangeImage"
Title="MainWindow" Height="350" Width="525">
<Grid>
<m:UserControl1 Click="ToggleButton_Checked" FirstImage="C:\Users\AmitL\Desktop\james-brown-010.jpg"></m:UserControl1>
</Grid>
</Window>
Thanks,
Amit.