Button with image not overlaying another image

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!

Answers


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"/>

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.


Need Your Help

not sure what to use rebase or merge?

git merge rebase git-rebase git-remote

I was accidently using the gh-pages branch so now it has become the most updated one. How can I bring the master branch up to date if it hasn't been used?

How to wrap similar classes from different packages

java android

I develop an app for android which uses standard android.database.sqlite.SQLiteDatabase as well as net.sqlcipher.database.SQLiteDatabase.