Images not appearing on buttons when user control is in referenced assembly - wpf

Question

I have a main WPF application which references a WPF User Control Library that I created. In the library, I have one user control and an images folder (images used by user control). Here is part of the XAML that I have in the user control:
<UserControl x:Class="Alstom.UserControls.MainToolbar"
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"
xmlns:local="clr-namespace:Alstom.UserControls"
mc:Ignorable="d"
d:DesignHeight="120" d:DesignWidth="3440">
<UserControl.Resources>
<Image x:Key="Subway" Source="/images/MainToolbar/Subway.png"/>
<Image x:Key="Globe" Source="/images/MainToolbar/Globe.png"/>
<Image x:Key="Gavel" Source="/images/MainToolbar/Gavel.png"/>
<Image x:Key="Clipboard" Source="/images/MainToolbar/Clipboard.png"/>
<Image x:Key="EllipsisVertical" Source="/images/MainToolbar/EllipsisVertical.png"/>
<Image x:Key="Check" Source="/images/MainToolbar/Check.png"/>
<Image x:Key="Bell" Source="/images/MainToolbar/Bell.png"/>
The user control has buttons which I wrote like the following (note that I defined the Content property as StaticResource:
<Button x:Name="button" Grid.Row="1" Grid.Column="0" Content="{StaticResource Subway}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="48" Height="48"/>
When I double click the user control, in the designer, I see the images on the buttons.
But I created a main WPF application in my solution which references the external assembly like so:
<Window x:Class="MainToolBar.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:myMainToolbar="clr-namespace:Alstom.UserControls;assembly=Alstom.UserControls"
mc:Ignorable="d"
Title="MainWindow" Height="auto" Width="3440" ScrollViewer.VerticalScrollBarVisibility="Visible">
<Grid>
<myMainToolbar:MainToolbar HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>
When I double-click the MainWindow.xaml, I don't see the images on the button in the designer, nor when I run it.
What do I need to do to show the images at runtime? In the user control project, the images have a Build Action = Resource. But I tried to change one of them to Embedded Resource, and it still did not work.
What am I doing wrong?

Answer 1

Try to set the build action of the images to Resource and use a pack URI:
<Image x:Key="Subway" Source="pack://application:,,,/YourAssemblyName;component/images/MainToolbar/Subway.png"/>
Don't forget to change "YourAssemblyName" to the actual name of your assembly/WPF User Control Library project.
Pack URIs in WPF: https://msdn.microsoft.com/en-us/library/aa970069(v=vs.110).aspx