Create custom "+" button in WPF

Question

I've been attempting to create a customized plus button in WPF. I only want the + symbol but I'm not having any luck getting the Path data variables just right. I've looked at the Path syntax but I'm still having trouble.

This is what I have so far, but it is too big. I need a smaller, more proportional button:

<Path
        Stretch="Fill"
        Opacity="1"
        x:Name="path"
        StrokeThickness="10"
        RenderTransformOrigin="0.5,0.5" Margin="39,56.75,39,65.25" Data="M0,5L10,5 M5,5L5,1z" >

Can anyone tell me what I've got wrong here?

Thanks

If the "+" is just too big, use a ScaleTransform. – Louis Kottmann Aug 29 '11 at 18:32 — Louis Kottmann, Aug 29 '11 at 18:32

Fredrik Hedblad · Answer 1 · 2011-08-30T10:02:18.933

9

You can use the Data property like this

<Button>
    <Path Data="M0.5,0 L0.5,1 M0,0.5 L1,0.5"
          StrokeThickness="4"
          Stretch="Fill"
          Stroke="Red" />
</Button>

Looks like this

enter image description here

Edit
If you want the line caps to reach the edges of the Button you can set

StrokeEndLineCap="Square"
StrokeStartLineCap="Square"

edited Aug 30 '11 at 10:02

answered Aug 29 '11 at 18:42

Fredrik Hedblad

83,499
23
264
266

Thanks this worked for me also. Not sure why your solution has less data points than RV1987 though. I'm having trouble understanding how the path markup works I guess. – Encryption Aug 29 '11 at 20:15
1

They are relative points so the cross will always stretch to fill the `Button` no matter what size it has. Only four values are required. 1. Move to (x,y)(0.5, 0). 2. Draw line to (x,y)(0.5, 1). There you have the vertical line. Then move the pointer to (x,y)(0, 0.5) and draw a line to (x,y)(1, 0.5). There is your horizontal line – Fredrik Hedblad Aug 29 '11 at 20:23
@Encryption: This uses the strokes to create the cross itself, which just takes two line segments. RV1987's answer traces the outlines of the cross, which requires you to specify all the line segments around the edges of the cross (twelve). This answer picks up the pen between both line segments, whereas RV1987's answer doesn't pick up the pen (it doesn't have to, because they're connected end-to-end). – Merlyn Morgan-Graham Apr 07 '12 at 16:15

score 8 · Answer 2 · edited May 23 '17 at 12:24

I know you're trying to use a drawing path, and would probably like to get a solution for that. The solution will probably be helpful for your work in the future. But here is an alternative for this particular button that might be preferable to the solution you're asking for.

I've been attempting to create a customized plus button in WPF

Since there is no "plus button" control, whatever you make will of course be custom. However you don't have to completely reinvent the wheel. There are + icons that are already used in Windows.

Unless your application will have a completely custom UI, it is advisable to reuse controls and images to make a uniform User Experience.

To see how to get these existing icons, check this answer: Default icons for Windows applications?

The answer refers to a Zip file that gets installed with Visual Studio. From that zip file, check out this icon:

VS2010ImageLibrary/_Common Elements/Actions/Add.png

"Add" icons

There are also other "Add"-type icons under:

VS2010ImageLibrary/Actions/png_format/WinVista
VS2010ImageLibrary/Objects/png_format/WinVista

"Plus" icon "Add Category" icon "Add File" icon

To use the image on your button:

Extract the image
Edit the image in whatever way is necessary (in VS or in a paint program)
Add the image(s) to your project as Embedded Resources
Check out this question: WPF - How to create image button with template

That would have worked but I need the button to have animations like my other buttons do. Using a story_board to get the type of animation I'm wanting won't work well with what you described — Encryption, Aug 29 '11 at 20:10
@MerlynMorgan-Graham is there any way to reference them from xaml like a static class that windows exposes ? — eran otzap, Sep 22 '13 at 17:06
@eranotzap: I don't think so. http://stackoverflow.com/a/13347178/232593 - You still have to extract them then import them like any other image. — Merlyn Morgan-Graham, Sep 24 '13 at 05:57

score 5 · Answer 3 · answered Aug 29 '11 at 18:58

5

I know this seems silly, but what about just using a TextBlock containing the + character in a large font size?

answered Aug 29 '11 at 18:58

djdanlib

21,449
1
20
29

+1; This is a good option that gets a button to look like the Firefox "new tab" button. I also recommend bolding the font. – Merlyn Morgan-Graham Aug 29 '11 at 19:18
That would have worked but I need the button to have animations like my other buttons do. Using a story_board to get the type of animation I'm wanting won't work well with what you described – Encryption Aug 29 '11 at 20:10

score 3 · Accepted Answer · answered Aug 29 '11 at 19:05

3

Try this out for path-

<Path Stretch="Fill"
      Fill="Black"
      Stroke="{x:Null}"
      StrokeThickness="0.5"
      Data="M3.875,0 L5.125,0 5.125,3.875 9,3.875 9,5.125 5.125,5.125 5.125,9 3.875,9 3.875,5.125 0,5.125 0,3.875 3.875,3.875 3.875,0 z" />

answered Aug 29 '11 at 19:05

Rohit Vats

79,502
12
161
185

Thank you this is what I needed. How did you come up with all those points? – Encryption Aug 29 '11 at 20:14
@Encryption: I'm guessing by hand, possibly with trial and error. Or they started with 72 width/height, made the effective cross line width 10, and did the math from there, dividing by 8 when they were done. It traces the edges of a `+` shape. If you plot those coordinates out by hand on paper the shape will become more obvious. – Merlyn Morgan-Graham Apr 07 '12 at 16:11

score 0 · Answer 5 · answered Aug 23 '17 at 08:03

For anyone else who discovers this page, the following Path:

                     <Path x:Name="ButtonPath"
                              Margin="1"
                              Stroke="Gray"
                              StrokeThickness="1"
                              StrokeStartLineCap="Square"
                              StrokeEndLineCap="Square"
                              Stretch="Uniform"
                              VerticalAlignment="Center"
                              HorizontalAlignment="Center"

                             >

                            <Path.Data>
                            <PathGeometry>
                                <PathGeometry.Figures>
                                    <PathFigure StartPoint="0,100">
                                        <LineSegment Point="0,-100"/>
                                    </PathFigure>
                                    <PathFigure StartPoint="100,0">
                                        <LineSegment Point="-100,0"/>
                                    </PathFigure>
                                </PathGeometry.Figures>
                            </PathGeometry>
                        </Path.Data>
                   </Path>

gives me the plus button shown in this snapshot of my program Plus Button SnapShot

Create custom "+" button in WPF

5 Answers5