1

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?

morsanu
  • 975
  • 20
  • 35

3 Answers3

4

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>
rudigrobler
  • 17,045
  • 12
  • 60
  • 74
  • I'm using your style but now only the image inside the button is clickable. How can I make the whole button area clickable? I asked this in a top level question: http://stackoverflow.com/q/7541858/480894 – Roland Sep 24 '11 at 20:56
  • You can set Background="Transparent" and BorderBrush="Transparent". Now you can click anywhere in the button. When you hover or click the entire button area shows up (which may not be what you want). – Tod Feb 15 '12 at 20:04
0

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.

Rachel
  • 130,264
  • 66
  • 304
  • 490
-2

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

<Image x:Name="nextImage" MouseDown="nextButton_Click"></Image>
morsanu
  • 975
  • 20
  • 35
  • 2
    I'd have to say worse than inelegant... hardwired event handlers are rarely needed in WPF, and the point of the templating system is that a button can be a button, regardless of what its appearance is. I'd urge you to look at @rudigrobler's solution instead. – Dan Puzey Oct 13 '10 at 07:48