Strange behaviour regarding images in a button in WPF

Question

I am working on an app in WPF, and one area demands a button that contains one image by default, which changes on MouseOver.
I am using a StaticResource Style to accomplish the button style handling, which works fine for everything else, but it seems to hate images.

I have one image "Fields 4.jpeg" that I have tried storing n both the root folder of the Project, and in the View folder (Trying to use MNVVM !!!!)
The image shows up just fine in the design window, but when I run it, it builds OK, but then crashes on InitializeComponent(), saying it cannot find the image that is already showing in the design window !!!

I use the same code for both areas as shown below in a part of my style

<Style x:Key="MyButtonImageSwitchStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<!--This Border is named, and is then referred to later on in same style
and its formatting is changed internally on the fly -->
<Border
x:Name="border"
BorderBrush="Black"
BorderThickness="10"
CornerRadius="8"
TextBlock.Foreground="White">
<Grid>
<Image
x:Name="buttonImage"
<!-- Here is the image source line -->

                                    Source="fields 4.jpg" 

                                    Stretch="UniformToFill" />
                            <ContentPresenter

Now further down in the Style, I have the following (NB the Target name "buttonImage" is the x:name given to the Image section itself

<Trigger Property="IsMouseOver" Value="false">
<Setter TargetName="border" Property="Background" Value="DarkRed" />
<Setter TargetName="border" Property="BorderBrush" Value="DarkRed" />
<!-- Here is the image source line -->
<Setter TargetName="buttonImage" Property="Source" Value="fields 4.jpeg" />

                        </Trigger>

As you can see, they are both unqualified, as the relevant xmlns lines have been auto generated. as shown below

xmlns:local="clr-namespace:PopupControlTest"
xmlns:Models="clr-namespace:PopupControlTest.Models" 
xmlns:ViewModels="clr-namespace:PopupControlTest.ViewModels" 
x:Class="PopupControlTest.MainWindow"

What is even more weird is that there is another Trigger just above the errant one as shown below, and this works just fine, as the errant one does if I change the source to a Web URL - very strange ?

                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="border" Property="Background" Value="DarkRed" />
                            <Setter TargetName="border" Property="BorderBrush" Value="DarkRed" />
                            <Setter TargetName="buttonImage" Property="Source" Value="http://sipi.usc.edu/database/misc/4.1.01.tiff" />

                        </Trigger>

So, my question is, why does the runtime blow up on the same image the design time system finds with no problems ??

I have tried putting the image in my View folder and adding that to the value line etc, but nothing works for me ?

Here is the full style in case it helps ?

    <Style x:Key="MyButtonImageSwitchStyle" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <!--This Border is named, and is then referred to later on in same style
                    and its formatting is changed internally on the fly -->
                    <Border
                               x:Name="border"
                               BorderBrush="Black"
                               BorderThickness="10"
                               CornerRadius="8"
                               TextBlock.Foreground="White">
                        <Grid>
                            <Image
                                    x:Name="buttonImage"
                                    Source="fields 4.jpg" 
                                    Stretch="UniformToFill" />
                            <ContentPresenter
                                    Margin="{TemplateBinding Padding}"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <!--NB This changes the Border above with name style of [border] -->
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="border" Property="Background" Value="DarkRed" />
                            <Setter TargetName="border" Property="BorderBrush" Value="DarkRed" />
                            <Setter TargetName="buttonImage" Property="Source" Value="http://sipi.usc.edu/database/misc/4.1.01.tiff" />

                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="false">
                            <Setter TargetName="border" Property="Background" Value="DarkRed" />
                            <Setter TargetName="border" Property="BorderBrush" Value="DarkRed" />
                            <Setter TargetName="buttonImage" Property="Source" Value="fields 4.jpeg"  />

                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="border" Property="Background" Value="blue" />
                            <Setter TargetName="border" Property="BorderBrush" Value="Hotpink" />
                            <Setter TargetName="buttonImage" Property="Source" Value="http://sipi.usc.edu/database/misc/4.1.02.tiff" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

I update your line 16 as Source="/View/images.jfif" and line 35 as <Setter TargetName="buttonImage" Property="Source" Value="/View/images.jfif" /> , The set properties for images.jfif as below picture shown:

The result picture is:

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.