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

我对WPF设计（以及一般设计）非常了解，并且我需要一项任务的帮助。在内容中制作带有矢量图形的按钮

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

我不能找到一种方法与路径来处理我在Blend，所以我脑子里想的是：

1）复制路径数据，所以我们可以得出两个图标（有在内容的两个路径中的物体） 2）移位第一一点点的左侧和顶部 3）移位第二一点右侧和底部 4）使第二个重叠的第一个

这是我做过什么：既然我们不能有两个为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>

问题：？我没有得到与第二图标重叠（基本上一切都是透明这意味着，我probsably需要在第一个图标删除一些点，但我无法做到这一点在Blend

任何人都可以分享一些光如何实现我需要什么？

来源

2012-09-04 Goran

不知道你的图标应该是什么样子，但下面的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>

我建议您不要在您的实际路径对象中放置边距或“拉伸”属性。如果需要将它们放大或缩小，请在它们所在的Grid容器或包含Viewbox中进行处理。

编辑

如果您在实际使用Path对象的Fill财产绘制图标几何形状，如用VisualBrush对象，而不是Path.Data，那么你不希望使用Path首先。只需使用两个Rectangle对象，使用'IconBrush'填充网格，并在其中一个上执行TranslateTransform，以便它们重叠到所需的量。请记住，通过XAML，列表中最后出现的对象将显示在顶部。

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

以上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什么风ow：

enter image description here

来源

2012-09-04 14:56:02 Stewbob

嗨Stewbob。你的代码现在面临着和我一样的问题。上图标中位于第二个图标下方的部分不应该是可见的（实际上，您不能看到低于另一个图标的东西）。我的复制图标与Visual Studio中的复制图标非常相似。我没有放置数据点，因为我尝试复制并复制图标的第一个图标（新图标）是我们使用控件的公司的财产，我不想进入任何法律的问题。 – Goran

@Goran，我不明白你的意见。我的文章中的XAML在深绿色加号上放置了一个浅绿色的加号。这就是XAML的意图，这就是它在屏幕上的显示方式。如果要切换哪个Path对象位于“顶部”，则需要更改它们在XAML中列出的顺序。 – Stewbob

是的，在你的例子中，它放在最上面，因为你正在使用几何形式。我使用的原始路径使用了我认为是点数组，因此没有“表单”。当我改变路径顺序时，它没有区别。这里有一个链接，可以让你看到它的外观。 https://skydrive.live.com/redir?resid=F80033B5ECD8347C!140&authkey=!APGPszc9i3_m_Go – Goran

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

回答

相关问题