WPF button with image of a circle - wpf

Question

I have a coloured circle in a .png, the rest is transparent.
I am able to place that image on a button but the rest of the button's style is visible on the transparent are of the image. How can I hide it, in normal, mouse over and pressed mode?

Answer 1

Try this style
<Style x:Key="EmptyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000000"/>
<Setter Property="BorderBrush" Value="#00000000"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the use it as follows
<Button Style="{DynamicResource EmptyButtonStyle}">
<Image Source="/Assets/circle.png" />
</Button>

Answer 2

It sounds like you are currently using the existing button's Template and just adding an Image to it. What you need to do is modify the button's <Template> itself so it uses your image instead of the default template.
If you do a google search on something like "WPF Template" or "WPF Round Button" you'll probably come up with some good examples.

Answer 3

I ended up using the most simple solution for me (probably not the most elegant).
<Image x:Name="nextImage" MouseDown="nextButton_Click"></Image>