WPF button with image of a circle

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

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 2

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 3

I ended up using the most simple solution for me (probably not the most elegant).

<Image x:Name="nextImage" MouseDown="nextButton_Click"></Image>