How to do picture shaped button in WPF?

Question

I want a picture with transparent background to be a button.

The shape of the picture is custom (not an ellipse or something like that). So, I need it to be lighted and be possible to press (in the shape of 1 itself!).

I've only started working on WPf and don't know how to do this. And I couldn't really figure out how to do it in my case (although there are alike questions on the platform).

Would be very thankful if you give me a detailed answer!

Does this answer your question? [WPF Button with Image](https://stackoverflow.com/questions/2697383/wpf-button-with-image) — Pavel Anikhouski, Dec 17 '19 at 20:16
No, this way I'll have a rectangular area for the button and I want it to be the sape of 1. — Sunny Duckling, Dec 17 '19 at 20:36
Are you sure this should really be a bitmap? How about a Path, i.e. vector graphics? — Clemens, Dec 17 '19 at 20:50
@Clemens I'm not sure how to make it work in vector graphics (I have 7 of those numbers and all of them should be buttons). Maybe you could share any link so that I could understand vectors in WPF? — Sunny Duckling, Dec 17 '19 at 21:02
Do you already have these numbers as image files, i.e. PNGs? — Clemens, Dec 17 '19 at 21:05
And you definitely want it to be hit-test visible only in the non-transparent parts, i.e. when the suer clicks on the transparent image background, the Button's Click event should not be fired? — Clemens, Dec 17 '19 at 21:11
In the best case - yes. If it's not really possible, I will try to change the images and make them rectangular. — Sunny Duckling, Dec 17 '19 at 21:15
That would by far be the easiest approach, unless you want to recreate the numbers as vector graphics. Then an Image element in the ControlTemplate of a Button would work. — Clemens, Dec 17 '19 at 21:30

Knowledge · Answer 1 · 2019-12-17T20:56:45.007

2

<Button>
    <Image Source="num1"/>
    <Button.Template>
        <ControlTemplate TargetType="Button">
        <ContentPresenter Content="{TemplateBinding Content}"/>
        </ControlTemplate>
    </Button.Template>
</Button>

You can set the template of the button something like this:

<Image Source="num1.png" 
Width="16" 
Height="16"/>

Also this might help

<Button.Background>
   <ImageBrush ImageSource="num1.png" Stretch="Fill" TileMode="None" />
</Button.Background>

edited Dec 17 '19 at 20:56

answered Dec 17 '19 at 20:27

Knowledge

134
9

If I do this I'll have a rectangle area for a button. I want the number itself being a button. – Sunny Duckling Dec 17 '19 at 20:33
Actual addition doesn't solve my problem as well. The area of button is still rectangular. – Sunny Duckling Dec 17 '19 at 20:59

zaphod-ii · Accepted Answer · 2019-12-17T22:29:40.227

It sounds like you need to handle a limited number of pictures and if all of them are relatively simple like that "1" the task seems doable. The most challenging part is to construct the geometry element that cuts the button in its specific shape. If you only have the images in raster formats (*.png, *.jpg, *.bmp - a rectangular map of colored pixels), you will first have to them to vector images (presented with a set of mathematical functions instead of pixel data). It is not a trivial task, but if an image has a simple outline, you should be able to get good results. There are different pieces of software that handle this problem. Here is some blog post on this topic, but if does not meet your needs, you can also search for "How to trace a raster image", "Convert a raster image to a vector one" etc. If you are successful at this step, you will get some SVG images. Alas WPF does not support SVG images, as it has its own "language" for translating geometry data. So the svgs should be translated to WPF Geometries. I found some blogs while looking for "SVG to XAML", "SVG to WPF path" etc. Here is one with several approaches to the task. When you have the WPF Geometries, you will be able to cut the button like this:

    <Button>
        <Button.Template>
            <ControlTemplate>
                <Image Source=". . .">
                    <Image.Clip>
                        <Geometry . . . />
                    </Image.Clip>
                </Image>
            </ControlTemplate>
        </Button.Template>
    </Button>

Of course, you can make it much more maintainable if you can create a custom control type that has the image data and geometry data exposed as properties, and then bind them in the template.

On the bottom line, this is not an easy task, which can become even more cumbersome if you have to add new geometries in the future. As Clemens mentioned in the comments, sticking with rectangular images that are hit testable in the whole bounding rectangle will make the task immensely easier.

You might want to give the ShapeConverter a try to convert Adobe Illustrator, Adobe Photoshop, SVG, EPS to XAML Geometries, DrawingBrush or even C# code: [https://github.com/gomi42/ShapeConverter](https://github.com/gomi42/ShapeConverter) — gomi42, Dec 28 '19 at 07:28

score -1 · Answer 3 · answered Dec 18 '19 at 06:16

You can draw a graph by yourself,and you can get Path Data via the link below Get path geometry from image

<Button Width="100" Height="100" >
            <Button.Template >
                <ControlTemplate>

                        <Path x:Name="path" Data="xxxxx " Stretch="Fill" Fill="Azure" RenderTransformOrigin="0.5,0.5">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Path.RenderTransform>
                            <Path.Effect>
                                <DropShadowEffect ShadowDepth="0" BlurRadius="22" Color="#FF646464"/>
                            </Path.Effect>

                        </Path>


                </ControlTemplate>
            </Button.Template>
        </Button>

How to do picture shaped button in WPF?

3 Answers3