Button with image not overlaying another image

Question

I have an image that is the stretched to be the size of the window (width and height wise).

I have a button that sits on top with the following XAML:

<Image Source="sample.png"></Image>
<Button Height="50" Width="100" Content="OverLay Image" Foreground="AliceBlue" 
        Background="Transparent" HorizontalAlignment="Left"
        VerticalAlignment="Top"/>

This shows the button fine when I run, however, I'd like the button to have an image instead of text using this template:

      <Button Height="50" Width="100" Content="OverLay Image"
              Foreground="AliceBlue" Background="Transparent"
              HorizontalAlignment="Left" VerticalAlignment="Top">
            <Button.Template>
                <ControlTemplate>
                    <Border>
                        <Image Source="img/sample.png" 
                               Width="32" 
                               Height="32"/>
                    </Border>
                </ControlTemplate>
            </Button.Template>
        </Button>

When I add the template section:

          <Button.Template>
                <ControlTemplate>
                    <Border>
                        <Image Source="img/sample.png" 
                               Width="32" 
                               Height="32"/>
                    </Border>
                </ControlTemplate>
            </Button.Template>

The button disappears. Has anyone seen this before or know how to force the button to show?

Thanks in advance!

Answer 1

It could be nothing, but I noticed that in your first (working) example of the Image, you used this path to your image:

<Image Source="sample.png"></Image>

But the one that you say doesn't work is using this path:

<Image Source="img/sample.png"/>

Maybe that was just an error you made copying it here, but otherwise, try this in your ControlTemplate:

<Image Source="sample.png"/>

Answer 2

Since you've changed the ControlTemplate it will only show your image. Everything looks fine, are you sure that the image path is correct? Try setting the background of the border to make sure that there isn't anything wrong with your template. Use Snoop to get look at the VisualTree and look at the source of the image.