Wpf 制作内容中带有矢量图形的按钮

我对WPF设计（以及总体设计）相当陌生，我需要一项任务的帮助

我有一个按钮的样式，它在路径中包含一些数据，在上面画一个图标（基本上是简单的添加新图标）。现在我想把它复制成一个图标

我找不到一种方法来操纵混合中的路径，所以我想到的是：

1） 复制路径数据，以便我们可以绘制两个图标（在内容中有两个路径对象） 2） 先向左和向上移动一点 3） 将第二个移动到右侧和底部 4） 使第二个重叠第一个

这就是我所做的： 因为我们不能为内容设置两个元素，所以我添加了一个网格元素，并在其中复制了两次Path元素。然后我重新定位了两条路径以模拟重复数据

<Setter Property="Content">
    <Setter.Value>
    <Grid>
            <Path Data="..." Margin="10" Stretch="Fill" Fill="{StaticResource IconBrush}" RenderTransformOrigin="0.5,0.4">
                <Path.RenderTransform>
                    <TransformGroup>
                <ScaleTransform />
                <SkewTransform />
                <RotateTransform Angle="-90" />
                <TranslateTransform />
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
    <Path Data="..." Margin="10" Stretch="Fill" Fill="{StaticResource IconBrush}" RenderTransformOrigin="0.5,0.6">
                <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform />
                <SkewTransform />
                <RotateTransform Angle="-90" />
                <TranslateTransform />
            </TransformGroup>
        </Path.RenderTransform>
    </Path>                                 
    </Grid>
    </Setter.Value>
</Setter>

问题：我没有和第二个图标重叠（基本上一切都是透明的。这意味着我可能需要删除第一个图标上的一些点，但我无法在Blend中实现这一点

---

任何人都可以分享一些关于如何实现我需要的东西的信息吗？

不确定您的图标应该是什么样子，但是下面的XAML将显示两个重叠的加号，使用相同的

路径

数据，但是使用一个简单的

TranslateTransform

来抵消第二个加号

    <Grid>
        <Path Fill="#FF008000" >
            <Path.Data>
                <PathGeometry Figures="m 30 25.362188 0 30.000001 -30 0 0 20 30 0 0 29.999991 20 0 0 -29.999991 30 0 0 -20 -30 0 0 -30.000001 -20 0 z" FillRule="nonzero"/>
            </Path.Data>
        </Path>
        <Path Fill="#FF92D050" >
            <Path.Data>
                <PathGeometry Figures="m 30 25.362188 0 30.000001 -30 0 0 20 30 0 0 29.999991 20 0 0 -29.999991 30 0 0 -20 -30 0 0 -30.000001 -20 0 z" FillRule="nonzero"/>
            </Path.Data>
            <Path.RenderTransform>
                <TranslateTransform X="25" Y="-25"/>
            </Path.RenderTransform>
        </Path>
    </Grid>

上面的XAML对于您的需要来说可能太大了。您可以将整个网格放在一个

Viewbox

中，然后设置

Viewbox

的

Height

和

Width

属性，使其达到您需要的大小

---

---

编辑3

自定义按钮样式：

<Style x:Key="btnCustom" TargetType="{x:Type Button}">
    <Setter Property="Content">
        <Setter.Value>
            <Viewbox>
                <Grid Margin="0,0,30,30">
                    <Path Fill="#FFFFFFFF">
                        <Path.Data>
                            <PathGeometry Figures="m 13.123027 65.796864 0 81.448876 133.750213 0 0 -133.778725 -67.192062 0 z" FillRule="NonZero"/>
                        </Path.Data>
                    </Path>
                    <Path Fill="#FFB3B3B3">
                        <Path.Data>
                            <PathGeometry Figures="M 79.624708 0.36218262 0 62.950511 l 0 97.411669 160 0 0 -159.99999738 -80.375292 0 z m 2.28303 16.89635038 61.172792 0 0 126.207297 -126.161061 0 0 -76.829978 0.187646 -0.156158 64.800623 0 0 -49.221161 z" FillRule="NonZero"/>
                        </Path.Data>
                    </Path>
                    <Path Fill="#FFFFFFFF">
                        <Path.Data>
                            <PathGeometry Figures="m 13.123027 65.796864 0 81.448876 133.750213 0 0 -133.778725 -67.192062 0 z" FillRule="NonZero"/>
                        </Path.Data>
                        <Path.RenderTransform>
                            <TranslateTransform X="30" Y="30"/>
                        </Path.RenderTransform>
                    </Path>
                    <Path Fill="#FFB3B3B3">
                        <Path.Data>
                            <PathGeometry Figures="M 79.624708 0.36218262 0 62.950511 l 0 97.411669 160 0 0 -159.99999738 -80.375292 0 z m 2.28303 16.89635038 61.172792 0 0 126.207297 -126.161061 0 0 -76.829978 0.187646 -0.156158 64.800623 0 0 -49.221161 z" FillRule="NonZero"/>
                        </Path.Data>
                        <Path.RenderTransform>
                            <TranslateTransform X="30" Y="30"/>
                        </Path.RenderTransform>
                    </Path>
                </Grid>
            </Viewbox>
        </Setter.Value>
    </Setter>
</Style>

按钮实现：

    <Button HorizontalAlignment="Right" Style="{StaticResource btnCustom}"
            Height="30" Width="100"/>

WPF窗口中的外观：

---

Hi Stewbob。您的代码现在面临着与我的代码相同的问题。第二个图标下方上方图标的部分不应可见（实际上，您无法看到另一个图标下方的部分）。我的复制图标与Visual studio中的复制图标非常相似。我没有放置数据点，因为第一个图标（新图标），我试图复制并制作复制图标，它是我们使用控件的公司的财产，我不想卷入任何法律问题。@Goran，我不理解你的评论。我帖子中的XAML在一个深绿色的加号。这是XAML的意图，也是它在屏幕上的显示方式。如果您想切换哪个路径对象是“在顶部”您需要更改它们在XAML中列出的顺序。是的，在您的示例中，它将其放在顶部，因为您使用的是几何形式。我所拥有的原始路径使用的是我认为的点数组，因此没有“形式”。当我更改路径顺序时，没有任何区别。这里有一个链接，可以直观地显示它的外观。一张图片真的值千言万语。我现在明白了。您的原始图标在“白皮书”所在的位置没有填充。您基本上需要在灰色边框内添加白色填充的新几何体。请参阅我的编辑，了解其外观.Hi Studbob，我仍然有问题。当我将您的代码粘贴到按钮样式中，并在xaml中的UserControl上创建一个按钮时，它会正确显示。但是，当我设置按钮的宽度和高度时，内容没有调整大小，只是被裁剪。为什么会发生这种情况？

    <Button HorizontalAlignment="Right" Style="{StaticResource btnCustom}"
            Height="30" Width="100"/>