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

Question

我对 WPF 设计(和一般设计)非常陌生，我需要帮助完成一项任务。

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

我找不到使用 Blend 中的 Path 进行操作的方法，所以我想到的是:

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>

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

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

Answer 1

不确定您的图标应该是什么样子，但以下 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>

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

编辑

如果您实际使用 Fill Path 的属性(property)对象来绘制图标几何图形，如 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和 Width Viewbox 的属性让它达到你需要的大小。



编辑 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 窗口中的外观: