如何在 WPF 中制作图片形状的按钮？答案

【问题标题】：How to do picture shaped button in WPF?如何在 WPF 中制作图片形状的按钮？
【发布时间】：2019-12-17 20:13:01
【问题描述】：

我想要一张具有透明背景的图片作为按钮。

图片的形状是自定义的（不是椭圆或类似的东西）。所以，我需要它被点亮并且可以按下（以 1 本身的形状！）。

我才刚刚开始研究 WPf，不知道该怎么做。而且我真的不知道如何在我的情况下做到这一点（尽管平台上有类似的问题）。

如能详细解答将不胜感激！

【问题讨论】：

这能回答你的问题吗？ WPF Button with Image
不，这样我将有一个矩形区域用于按钮，我希望它是 1 的 sape。
你确定这真的应该是位图吗？路径如何，即矢量图形？
@Clemens 我不知道如何让它在矢量图形中工作（我有 7 个这些数字，它们都应该是按钮）。也许您可以分享任何链接，以便我可以理解 WPF 中的向量？
您是否已经将这些数字作为图像文件，即 PNG？

标签： c# wpf visual-studio

【解决方案1】：

<Button>
    <Image Source="num1"/>
    <Button.Template>
        <ControlTemplate TargetType="Button">
        <ContentPresenter Content="{TemplateBinding Content}"/>
        </ControlTemplate>
    </Button.Template>
</Button>

您可以像这样设置按钮的模板：

<Image Source="num1.png" 
Width="16" 
Height="16"/>

这也可能有帮助

<Button.Background>
   <ImageBrush ImageSource="num1.png" Stretch="Fill" TileMode="None" />
</Button.Background>

【讨论】：

如果我这样做，我将有一个矩形区域用于按钮。我希望数字本身是一个按钮。
实际添加也不能解决我的问题。按钮的区域仍然是矩形。

【解决方案2】：

听起来您需要处理有限数量的图片，如果所有图片都像“1”这样相对简单，那么任务似乎是可行的。最具挑战性的部分是构建将按钮切割成特定形状的几何元素。如果您只有光栅格式的图像（*.png、*.jpg、*.bmp - 彩色像素的矩形地图），您首先必须将它们转换为矢量图像（呈现一组数学函数而不是像素数据）。这不是一项简单的任务，但如果图像具有简单的轮廓，您应该能够获得良好的效果。有不同的软件可以处理这个问题。 Here 是关于此主题的一些博客文章，但如果不满足您的需求，您也可以搜索“如何跟踪光栅图像”、“将光栅图像转换为矢量图像”等。如果你成功了这一步，你会得到一些 SVG 图像。唉，WPF 不支持 SVG 图像，因为它有自己的“语言”来翻译几何数据。所以 svgs 应该被翻译成 WPF Geometries。我在寻找“SVG 到 XAML”、“SVG 到 WPF 路径”等时发现了一些博客。Here 是一种具有多种完成任务的方法。当您拥有 WPF 几何图形时，您将能够像这样剪切按钮：

    <Button>
        <Button.Template>
            <ControlTemplate>
                <Image Source=". . .">
                    <Image.Clip>
                        <Geometry . . . />
                    </Image.Clip>
                </Image>
            </ControlTemplate>
        </Button.Template>
    </Button>

当然，如果您可以创建一个自定义控件类型，将图像数据和几何数据作为属性公开，然后将它们绑定到模板中，则可以使其更易于维护。

归根结底，这不是一件容易的事，如果您将来必须添加新的几何图形，这可能会变得更加麻烦。正如 Clemens 在 cmets 中提到的，坚持使用在整个边界矩形中可命中测试的矩形图像将使任务变得非常容易。

【讨论】：

您可能想尝试使用 ShapeConverter 将 Adobe Illustrator、Adobe Photoshop、SVG、EPS 转换为 XAML 几何图形、DrawingBrush 甚至 C# 代码：https://github.com/gomi42/ShapeConverter

【解决方案3】：

您可以自己绘制图表，您可以通过下面的链接获取路径数据 Get path geometry from image

<Button Width="100" Height="100" >
            <Button.Template >
                <ControlTemplate>

                        <Path x:Name="path" Data="xxxxx " Stretch="Fill" Fill="Azure" RenderTransformOrigin="0.5,0.5">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Path.RenderTransform>
                            <Path.Effect>
                                <DropShadowEffect ShadowDepth="0" BlurRadius="22" Color="#FF646464"/>
                            </Path.Effect>

                        </Path>


                </ControlTemplate>
            </Button.Template>
        </Button>

【讨论】：