.net - wpf image in toggle button doesn't show

Question

I'm trying to make a toggle button style that allows the toggle button to show 2 different images when checked/unchecked. In the design preview I can see the Image in the toggle button, but in runtime the image doesn't show at all. I've been using resource as build action and copying to output directory but it doesn't help. Here is the code:

    <Window.Resources>
        <Image Source="Images/pencil.png" x:Key="PencilImage"></Image>
        <Image Source="Images/eraser.png" x:Key="EraserImage"></Image>

        <Style TargetType="{x:Type ToggleButton}"
         x:Key="ImageButton">
            <Setter Property="Background" Value="Transparent"></Setter>
            <Setter Property="Content"
            Value="{DynamicResource PencilImage}" />
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Content" Value="{DynamicResource EraserImage}"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="False">
                    <Setter Property="Content" Value="{DynamicResource PencilImage}"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

...

                <Border Grid.Row="7" Grid.Column="1" Grid.ColumnSpan="2" Height="25" Width="25">
                    <ToggleButton Style="{StaticResource ImageButton}" Height="25" Width="25"/>
                </Border>

Answer 1

I also checked that your example source code is working normally.

But how about checking the GitHub sample that I attached below? It is more suitable with the WPF style!

Do not use DynamicResource in the current situation.

DynamicResource should be used in situations where the resource itself changes. However, the current situation is that the resource is being replaced from A to B, so using DynamicResource itself does not cause an error, but it is incorrect use. Just use StaticResource.

Not bad.

<Image Source="Images/pencil.png" x:Key="PencilImage"></Image>
<Image Source="Images/eraser.png" x:Key="EraserImage"></Image>

Good.

<Image Source="/ImageResourceExam;component/Images/pencil.png" x:Key="PencilImage"/>
<Image Source="/ImageResourceExam;component/Images/eraser.png" x:Key="EraserImage"/>

If your project structure is divided into a class library structure, you need to specify Assembly. So I prefer a resource name rule that specifies assembly information unconditionally.

Better.

<Geometry x:Key="G.PENCIL">M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z</Geometry>
<Geometry x:Key="G.ERASER">M16.24,3.56L21.19,8.5C21.97,9.29 21.97,10.55 21.19,11.34L12,20.53C10.44,22.09 7.91,22.09 6.34,20.53L2.81,17C2.03,16.21 2.03,14.95 2.81,14.16L13.41,3.56C14.2,2.78 15.46,2.78 16.24,3.56M4.22,15.58L7.76,19.11C8.54,19.9 9.8,19.9 10.59,19.11L14.12,15.58L9.17,10.63L4.22,15.58Z</Geometry>

It is better to use Path than the icon if you can.

You can easily find a path here.
https://materialdesignicons.com

Finally, Use ControlTemplate

<Geometry x:Key="G.PENCIL">M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z</Geometry>
<Geometry x:Key="G.ERASER">M16.24,3.56L21.19,8.5C21.97,9.29 21.97,10.55 21.19,11.34L12,20.53C10.44,22.09 7.91,22.09 6.34,20.53L2.81,17C2.03,16.21 2.03,14.95 2.81,14.16L13.41,3.56C14.2,2.78 15.46,2.78 16.24,3.56M4.22,15.58L7.76,19.11C8.54,19.9 9.8,19.9 10.59,19.11L14.12,15.58L9.17,10.63L4.22,15.58Z</Geometry>
  
<Style TargetType="{x:Type ToggleButton}" x:Key="ImageButton">
    <Setter Property="Background" Value="Transparent"></Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Background="{TemplateBinding Background}">
                    <Viewbox>
                        <Path x:Name="path" Width="24" Height="24" Data="{StaticResource G.PENCIL}" Fill="#555555"/>
                    </Viewbox>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Cursor" Value="Hand"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="path" Property="Data" Value="{StaticResource G.ERASER}"/>
                        <Setter TargetName="path" Property="Fill" Value="Red"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I put the source code on GitHub for you.
https://github.com/ncoresoftsource/stackoverflowsample/tree/main/src/answers/using-imageresource-app