开发者

Create custom "+" button in WPF

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 sm开发者_StackOverflowaller, 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


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

Create custom "+" button in WPF

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

StrokeEndLineCap="Square"
StrokeStartLineCap="Square"


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

Create custom "+" button in WPF

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

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

Create custom "+" button in WPF

Create custom "+" button in WPF

Create custom "+" button in WPF

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


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


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" />


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜