WPF Button Image Disappears At Runtime - xaml

Question

I have written the user control below and I want to display a clock image on the button control. The image has BuildAction set to Resource. It shows up perfect in the XAML design screen, but when I run the application the button is blank. What am I doing wrong?
<UserControl x:Class="App_Process_Admin.User_Controls.TimePicker"
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"
d:DesignHeight="30" d:DesignWidth="150">
<UserControl.Resources>
<ResourceDictionary>
<Image x:Key="ClockImage" Source="Icons/Clock.png"/>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="180" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Name="TimeField" Text="" />
<Button Grid.Row="0" Grid.Column="1" Content="{StaticResource ClockImage}" Click="SetTime_Click" />
<local:ClockPopUp x:Name="ClockPopUp1" Grid.Row="1" Grid.Column="0" Visibility="Hidden"></local:ClockPopUp>
</Grid>
</UserControl>

Answer 1

I had the same problem, i resolve it this way (in visual studio 2019, wpf application) :
put your images in your project in a folder
Create an image in xaml and put your source
At this point for me the images are displayed in the design window but not at the runetime
Access to your image in your project with the solution explorer
Select each image and open the property window
Set "Generation action" to "Resource" and "Copy in the repository" To "always copy"
I have done that and i can see my images at runtime :)
PS : sorry for my english, i'm french

Answer 2

Image is a control. If you add it to resources his way, it'll only be displayed in the last place it's added to and will disappear from all previous places. You can fix this by adding x:Shared=False:
<Image x:Key="ClockImage" x:Shared="False" Source="Icons/Clock.png"/>
This way, a new Image control will be created every time it's requested.
Alternatively, you can create a button style with Image in its ContentTemplate and add BitmapImage to the resources directly:
<BitmapImage x:Key="Bitmap" UriSource="Icons/Clock.png"/>
<Style x:Key="ButtonImage" TargetType="Button">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image Source="{TemplateBinding Content}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Now you can create buttons with images this way:
<Button Content="{StaticResource Bitmap}" Style="{StaticResource ButtonImage}"/>
Image controls will be created by the framework based on the template.

Answer 3

In my case, it was needed to first add the images into project, by drag-and-drop'ing them into the folder where your .xaml is in solution explorer.
Then, i added to .xaml:
<Window.Resources>
<BitmapImage x:Key="Icon" UriSource="Images/Image.png"/>
</Window.Resources>
<Button x:Name="SomeButton" Background="Gray">
<Image Source="{StaticResource Icon}"/>
</Button>
And that's it.
Also, if you have complicated project with many folders, you can use ../ in UriSource to go up a folder from the current, where .xaml file is located