在 WPF 中创建自定义“+”按钮答案

【问题标题】：Create custom "+" button in WPF在 WPF 中创建自定义“+”按钮
【发布时间】：2011-11-06 05:46:14
【问题描述】：

我一直在尝试在 WPF 中创建一个自定义的加号按钮。我只想要 + 符号，但我没有任何运气让 Path 数据变量恰到好处。我查看了 Path 语法，但仍然遇到问题。

这是我目前所拥有的，但它太大了。我需要一个更小、更比例的按钮：

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

谁能告诉我这里出了什么问题？

谢谢

【问题讨论】：

如果“+”太大，请使用 ScaleTransform。

标签： wpf

【解决方案1】：

对于发现此页面的其他人，以下路径：

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

给我这个程序快照中显示的加号按钮 Plus Button SnapShot

【讨论】：

【解决方案2】：

您可以像这样使用Data 属性

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

看起来像这样

编辑
如果您希望线帽到达Button 的边缘，您可以设置

StrokeEndLineCap="Square"
StrokeStartLineCap="Square"

【讨论】：

感谢这对我也有用。不知道为什么您的解决方案的数据点比 RV1987 少。我猜我无法理解路径标记的工作原理。
它们是相对的点，所以无论大小如何，十字架都会一直伸展以填充Button。只需要四个值。 1. 移动到 (x,y)(0.5, 0)。 2. 画线到 (x,y)(0.5, 1)。那里有垂直线。然后将指针移动到 (x,y)(0, 0.5) 并画一条线到 (x,y)(1, 0.5)。有你的水平线
@Encryption：这使用笔划来创建十字架本身，它只需要两条线段。 RV1987 的答案追踪十字架的轮廓，这需要您指定围绕十字架边缘的所有线段（十二）。这个答案在两个线段之间拿起笔，而 RV1987 的答案没有拿起笔（它没有必要，因为它们是端到端连接的）。

【解决方案3】：

我知道您正在尝试使用绘图路径，并且可能希望为此获得解决方案。该解决方案可能对您将来的工作有所帮助。但是对于这个特定的按钮，这里有一个替代方案，它可能比您要求的解决方案更可取。

我一直在尝试在 WPF 中创建自定义加号按钮

由于没有“加号按钮”控件，因此您制作的任何内容当然都是自定义的。但是，您不必完全重新发明轮子。 Windows 中已经使用了+ 图标。

除非您的应用程序将具有完全自定义的 UI，否则建议重用控件和图像以提供统一的用户体验。

要查看如何获取这些现有图标，请查看以下答案：Default icons for Windows applications?

答案指的是随 Visual Studio 一起安装的 Zip 文件。从那个 zip 文件中，查看这个图标：

VS2010ImageLibrary/_Common Elements/Actions/Add.png

下面还有其他“添加”类型的图标：

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

要使用按钮上的图像：

提取图像
以任何必要的方式编辑图像（在 VS 或绘图程序中）
将图像作为嵌入式资源添加到您的项目中
看看这个问题：WPF - How to create image button with template

【讨论】：

这本来可以，但我需要该按钮才能像我的其他按钮一样拥有动画。使用 story_board 来获得我想要的动画类型不适用于您描述的内容
@MerlynMorgan-Graham 有没有办法像 windows 公开的静态类一样从 xaml 引用它们？
@eranotzap：我不这么认为。 stackoverflow.com/a/13347178/232593 - 你仍然需要提取它们然后像任何其他图像一样导入它们。

【解决方案4】：

试试这个路径-

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

【讨论】：

谢谢，这正是我所需要的。您是如何得出所有这些观点的？
@Encryption：我手动猜测，可能需要反复试验。或者他们从 72 宽度/高度开始，将有效交叉线宽度设为 10，然后从那里开始计算，完成后除以 8。它跟踪+ 形状的边缘。如果你在纸上手工绘制这些坐标，形状会变得更加明显。

【解决方案5】：

我知道这看起来很傻，但是如果只使用包含 + 字符的大字体文本块呢？

【讨论】：

+1;这是一个不错的选择，它使按钮看起来像 Firefox 的“新标签”按钮。我还建议将字体加粗。
这本来可以，但我需要该按钮才能像我的其他按钮一样拥有动画。使用 story_board 来获得我想要的动画类型不适用于您描述的内容