wpf 在内容中制作带有矢量图形的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12265336/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making a button with vector graphics in content
提问by Goran
I am pretty new with WPF design (and design in general), and I need help with one task.
我对 WPF 设计（以及一般设计）很陌生，我需要帮助完成一项任务。
I have a style for a button that contains some data in a Path, which draws an icon on it (basically simple add new icon). Now I would like to make a copy icon out of it.
我有一个按钮样式，其中包含路径中的一些数据，它在其上绘制一个图标（基本上是简单的添加新图标）。现在我想用它制作一个复制图标。
I could not find a way to manipulate with Path I have in Blend, so what I had in mind was:
我找不到一种方法来操纵我在 Blend 中的路径，所以我想到的是：
1) Copy Path data so we can draw two icons (to have two Path objects in Content) 2) Shift first a little to the left and top 3) Shift second a little to the right and bottom 4) Make second one overlap first one
1）复制路径数据，以便我们可以绘制两个图标（内容中有两个路径对象）2）第一个向左和顶部移动一点 3）第二个向右和底部移动一点 4）使第二个与第一个重叠
This is what I did: Since we cannot have two elements set for Content, I have added one Grid element, and inside I copied Path element twice. Then I repositioned both path to simulate duplicate data.
这就是我所做的：因为我们不能为 Content 设置两个元素，所以我添加了一个 Grid 元素，并在里面复制了 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>
Problem: I do not get overlap with second icon (basically everything is transparent. That means that I probsably need to delete some points on first icon, but I could not achieve that in Blend?
问题：我没有与第二个图标重叠（基本上一切都是透明的。这意味着我可能需要删除第一个图标上的一些点，但我无法在 Blend 中实现？
Can anyone share some light how to achieve what I need?
任何人都可以分享一些如何实现我需要的东西吗？
采纳答案by Stewbob
Not sure what your icons should look like, but the following XAML will display two overlapping plus signs using the same Pathdata for both, but with a simple TranslateTransformto offset the second one.
不确定您的图标应该是什么样子，但下面的 XAML 将使用相同的Path数据显示两个重叠的加号，但用一个简单的方法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>
I would recommend not putting margins or 'Stretch' properties in your actual path objects. Take care of that in the Grid container they are in, or a containing Viewbox if you need to scale them up or down.
我建议不要在实际路径对象中放置边距或“拉伸”属性。如果您需要放大或缩小它们，请在它们所在的 Grid 容器或包含 Viewbox 中处理。
EDIT
编辑
If you are actually using the Fillproperty of the Pathobject to draw the icon geometry, as with a VisualBrushobject, instead of the Path.Data, then you don't want to use a Pathin the first place. Just use two Rectangleobjects, with your 'IconBrush' Fill in the grid and do the TranslateTransformon one of them so that they overlap to the desired amount. Remember that with XAML, the object that appears last in the listing is rendered on top.
如果您实际上是使用对象的Fill属性Path来绘制图标几何图形，就像VisualBrush对象一样，而不是Path.Data，那么您Path首先不想使用 a 。只需使用两个Rectangle对象，用您的“IconBrush”填充网格并TranslateTransform在其中一个对象上进行操作，使它们重叠到所需的数量。请记住，对于 XAML，在列表中最后出现的对象呈现在顶部。
EDIT 2
编辑 2
<Grid>
<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>
The above XAML is probably way too big for your needs. You can just put the whole grid in a Viewboxand then set the Heightand Widthproperties of the Viewboxto get it to the size you need.
上面的 XAML 可能对您的需求来说太大了。您可以将整个网格放在 a 中Viewbox，然后设置 的Height和Width属性Viewbox以使其达到您需要的大小。
EDIT 3
编辑 3
Custom button style:
自定义按钮样式：
<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 implementation:
按钮实现：
<Button HorizontalAlignment="Right" Style="{StaticResource btnCustom}"
Height="30" Width="100"/>
What it looks like in the WPF Window:
它在 WPF 窗口中的样子：
