Question

我是WPF设计（一般设计）的新手，我需要一个任务的帮助。

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

我找不到用Blend中的Path操作的方法，所以我想到的是：

1）复制路径数据，这样我们就可以绘制两个图标（在内容中有两个Path对象） 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>

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

任何人都可以分享一些如何实现我的需求吗？

Answer 1

不确定您的图标应该是什么样子，但是下面的XAML将使用相同的Path数据显示两个重叠的加号，但是使用简单的TranslateTransform来抵消第二个。{ / p>

    <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中处理它。

修改

如果您实际使用Fill对象的Path属性来绘制图标几何图形，就像使用VisualBrush对象而不是Path.Data一样，那么您首先不想使用Path。只需使用两个Rectangle对象，使用'IconBrush'填充网格，然后在其中一个上执行TranslateTransform，使它们重叠到所需的数量。请记住，使用XAML时，列表中最后出现的对象将呈现在顶部。

编辑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中，然后设置Height的{{1}}和Width属性，使其达到您需要的大小。

编辑3

自定义按钮样式：

Viewbox

按钮实现：

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

WPF窗口中的内容：

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

1 个答案: