Изображение в UserControl делает UserControl невидимым, но делает фон окна видимым

Question

Я взял этот пример изготовления круглых стеклянных кнопок и создания из них пользовательского элемента управления с минимальным влиянием. Третья кнопка - моя из пользовательского контроля, все остальные - оригинал из примера: (извините, репутации недостаточно для удобного размещения изображений)

Но сразу после добавления изображения в Control я вижу

Изображение добавляется так же, как и ко второй кнопке

            <Button Style="{StaticResource GlassButton}" Width="50" Height="50" Background="#FF1D5BBA"  Margin="10">
                <Image Width="40" Height="35" Source="images\vista_flag.png"/>
            </Button>

            <GlassButtonControl:GlassButton Width="70" Height="70" Margin="0">
                <Image Width="40" Height="35" Source="images\vista_flag.png"/>
            </GlassButtonControl:GlassButton>

Полное решение

Что я делаю не так?

РЕДАКТИРОВАТЬ1 -> РЕДАКТИРОВАТЬ3

EDIT2:

как сказал Питер Дунихо, минимальный код для воспроизведения дела

XAML проекта UserControl. Кнопка с цветным фоном:

<UserControl x:Class="GreenButtonControl.GreenButton"
             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:GreenButtonControl"
             mc:Ignorable="d" 
             d:DesignHeight="400" d:DesignWidth="400">
    <Grid>
        <Button Width="50" Height="50" Background="Green"  Margin="10"/>
    </Grid>
</UserControl>

C # проекта UserControl:

using System.Windows.Controls;

namespace GreenButtonControl
{
    public partial class GreenButton : UserControl
    {
        public GreenButton()
        {
            InitializeComponent();
        }
    }
}

Окно XAML (само изображение должно быть изменено на любое, имеющее прозрачность):

<GreenButtonControl:GreenButton Width="50" Height="50">
    <Image Width="40" Height="40" Source="images\vista_flag.png"/>
</GreenButtonControl:GreenButton>

Проблема в том, что UserControl исчезает, а фоновый рисунок окна отображается под прозрачным изображением.

EDIT3:

Решения, которые я нашел сейчас, чтобы избежать такого поведения:

1. Поместите изображение в код UserControl и задайте параметр, чтобы установить его из кода окна.
2. Поместить изображение не внутри элемента управления, а поверх него:

            <Grid Width="70" Height="70">
                <GlassButtonControl:GlassButton/>
                <Image Width="40" Height="40" Source="images\vista_flag.png"/>
            </Grid>

Но это приносит новые проблемы, чтобы поймать триггеры "MouseOver" и другие ...

3. Поместите UserControl в контейнер и сделайте изображение прозрачным для событий мыши

            <Grid Width="50" Height="50">
                <GreenButtonControl:GreenButton Width="Auto" Height="Auto"/>
                <Image Width="40" Height="40" IsHitTestVisible="False" Source="images\vista_flag.png"/>
            </Grid>

На данный момент это идеальное решение для требуемого поведения

Но вопрос все еще остается. Почему любой внутренний элемент делает UserControl невидимым?