logo标签列表

在WPF中创建自定义"+"按钮

wpf
5

我一直在尝试创建一个自定义的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。 - Louis Kottmann
5个回答
9
您可以这样使用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的数据点少。我有点难以理解路径标记是如何工作的。 - Encryption
1
它们是相对点，因此无论Button的大小如何，十字架始终会拉伸以填充其。只需要四个值。1.移动到(x,y)(0.5, 0)。2.画线到(x,y)(0.5, 1)。这就是你的垂直线。然后将指针移动到(x,y)(0, 0.5)，并画一条线到(x,y)(1, 0.5)。这就是你的水平线。 - Fredrik Hedblad
@加密：这个方法使用笔画来创建十字架本身，只需要两条线段。RV1987的答案则跟踪十字架的轮廓，需要您指定十字架边缘周围的所有线段（共12条）。这个答案在两条线段之间拾起笔，而RV1987的答案则不拾起笔（因为它们是端对端连接的）。 - Merlyn Morgan-Graham
8

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

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

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

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

要查看如何获取这些现有的图标，请查看此答案：Windows应用程序的默认图标？

该答案提到了一个与Visual Studio一起安装的Zip文件。从该zip文件中，检查此图标：

VS2010ImageLibrary/_Common Elements/Actions/Add.png

"Add" icons

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

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

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

要在按钮上使用图像：

1
那样做本来可以，但我需要这个按钮像我的其他按钮一样有动画效果。使用 story_board 来获取我想要的动画类型，与你所描述的情况不太匹配。 - Encryption
@MerlynMorgan-Graham 有没有办法像 Windows 公开的静态类一样从 XAML 中引用它们？ - eran otzap
@eranotzap：我不这么认为。https://dev59.com/HHVC5IYBdhLWcg3wbQbA#13347178 - 你仍然需要像导入其他图像一样提取它们，然后再导入它们。 - Merlyn Morgan-Graham
5
我知道这似乎很傻，但是使用一个字体较大的TextBlock包含加号字符怎么样？
+1；这是一个不错的选择，可以让按钮看起来像Firefox的“新建标签页”按钮。我还建议将字体加粗。 - Merlyn Morgan-Graham
那本来是可行的，但我需要该按钮具有像其他按钮一样的动画效果。使用故事板获取我想要的动画类型与你所描述的不太兼容。 - Encryption
3

试试这个路径 - 

<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。它跟踪“+”形状的边缘。如果你在纸上手动绘制这些坐标，形状会变得更加明显。 - Merlyn Morgan-Graham
0

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

                     <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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接