How to Change ContentControl `s Content on Toggle Button IsChecked Proprrty

Question

Currently i am working on Changing the Content ( as image) of a container on toggle button IsChecked Proprty. So i thought ContentControl would be a nice choice for a container. But i am not able to figure out how to achieve the result.

I created a resource of images in windows.resource

<Image Source="Resources/Desert.jpg" x:Key="image1"/>
    <Image Source="Resources/Koala.jpg" x:Key="image2"/>
    <Image Source="Resources/Lighthouse.jpg" x:Key="image3"/>
    <Image Source="Resources/Chrysanthemum.jpg" x:Key="image4"/>

So i thought to Use the above resource to change the Content Property of a ContentControl by changing the ControlTemplate proprty by using Triggers where SourceName as (ToggleButton) and TargetName as (ContentControl) but its not working

SO how can I change the content of a ContentControl on toggleButton Ischeck property.

Edit

<ContentControl BorderBrush="Black" Name="cc">
        <ControlTemplate>
            <ControlTemplate.Triggers>
                <Trigger SourceName="ToggleButton" Property="IsChecked" Value="True">
                    <Setter TargetName="cc" Property="Content" Value="{StaticResource image1}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        </ContentControl>

I just tried as i have no idea how to do it.....

Any help are welcomed

Answer 1

You seem to have over complicated the situation unnecessarily. You can just use an Image control rather than a ContentControl. To alternate between two Images, you can simply do this with a DataTrigger:

<Image Source="Resources/Desert.jpg" x:Key="image1"/>
<StackPanel>
    <ToggleButton Name="Button" Content="Change Image" Margin="10" />
    <Image Margin="10,0,10,10">
        <Image.Style>
            <Style>
                <Setter Property="Image.Source" 
Value="/YourAppName;component/Resources/Desert.jpg" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsChecked, ElementName=Button}" 
Value="True">
                        <Setter Property="Image.Source" 
Value="/YourAppName;component/Images/Resources/Koala.jpg" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>
</StackPanel>