WPF Image in User Control not showing in editor when I use the User Control

Question

In my program, I have tabs and a tab bar User Control to hold the buttons to switch between them. The buttons in the tab bar are TabButton User Controls that I made that have an image for the background, another semi-transparent all-black image to show which tab is selected, a text block, and an invisible button on top to detect the click. The background image shows up in the editor for the TabButton User Control, but it does not show up in the editors for the Tab Bar and the main window, even though the text blocks and buttons do. The semi-transparent image has its visibility set to hidden, but even when I change it, it also does not show up out side of the editor for the TabButton or at runtime.

TabButton preview in the editor:
TabBar preview in the editor
Background added because its hard to see the text otherwise:
No Background:
MainWindow preview:
At Runtime:

I have set the build action for the images to resource, cleaned and rebuilt the solution and checked all the code.

TabButton.xaml

<UserControl x:Class="EmeraldBattleFactoryHelper.Custom_Controls.TabButton"
             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:EmeraldBattleFactoryHelper.Custom_Controls"
             mc:Ignorable="d" 
             d:DesignHeight="100" d:DesignWidth="295">
    <Grid>
        <Image Source="/Custom Controls/Resources/tab.png" Stretch="Fill" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
        <Image x:Name="SelectionIndicator" Source="/Custom Controls/Resources/35percentblack.png" Stretch="Fill" Panel.ZIndex="1" Visibility="Hidden"/>
        <TextBlock Text="TEXT BLOCK" Background="Transparent" Panel.ZIndex="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Power Green"/>
        <Button Background="Transparent" BorderThickness="0" Panel.ZIndex="3" Click="Button_Click"/>
    </Grid>
</UserControl>

TabButton.xaml.cs

public partial class TabButton : UserControl
{
    public TabButton()
    {
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        SelectionIndicator.Visibility = Visibility.Visible;
    }

    public void Deselect() 
    {
        SelectionIndicator.Visibility = Visibility.Hidden;
    }
}

TabBar.xaml

<UserControl x:Class="EmeraldBattleFactoryHelper.Custom_Controls.TabBar"
             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:EmeraldBattleFactoryHelper.Custom_Controls"
             mc:Ignorable="d" 
             d:DesignHeight="100" d:DesignWidth="1280">
    <Grid x:Name="TabBarGrid" SizeChanged="TabBarGrid_SizeChanged">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition x:Name="SettingsColumn"/>
        </Grid.ColumnDefinitions>
        <local:TabButton/>
        <local:TabButton Grid.Column="1"/>
        <local:TabButton Grid.Column="2"/>
        <local:TabButton Grid.Column="3"/>
        <local:TabButton Grid.Column="4"/>
    </Grid>
</UserControl>

TabBar.xaml.cs

public partial class TabBar : UserControl
{
    public TabBar()
    {
        InitializeComponent();
    }

    private void TabBarGrid_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        SettingsColumn.Width = new GridLength(TabBarGrid.ActualHeight);
    }

    private void ResetButtons() 
    {
        foreach (TabButton tabButton in TabBarGrid.Children) 
        {
            tabButton.Deselect();
        }            
    }
}

MainWindow.xaml

<Window x:Class="EmeraldBattleFactoryHelper.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:local="clr-namespace:EmeraldBattleFactoryHelper"
        xmlns:customControls="clr-namespace:EmeraldBattleFactoryHelper.Custom_Controls"
        mc:Ignorable="d"
        Title="Battle Factory Helper" Height="720" Width="1280" ResizeMode="CanMinimize">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition x:Name="TabBar" MaxHeight="100" MinHeight="40" Height="15*"/>
            <RowDefinition Height="85*"/>
        </Grid.RowDefinitions>
        <customControls:TabBar/>
    </Grid>
</Window>

MainWindow.xaml.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }
}

Answer 1

I think this might actually be a bug with the designer.

However, the fix is to fully qualify the path to the image and include the assembly name. Assuming your assembly name is EmeraldBattleFactoryHelper (I am just guessing from your namespace), your image tags would need the assembly prefix EmeraldBattleFactoryHelper;component like shown below.

The details are explained in Pack URIs in WPF.

<Image Source="EmeraldBattleFactoryHelper;component/Custom Controls/Resources/tab.png" Stretch="Fill" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
<Image x:Name="SelectionIndicator" Source="EmeraldBattleFactoryHelper;component/Custom Controls/Resources/35percentblack.png" Stretch="Fill" Panel.ZIndex="1" Visibility="Hidden"/>

After I added my assembly name the images show up in the parent components in the designer.