带有圆形图像的 WPF 按钮答案

【问题标题】：WPF button with image of a circle带有圆形图像的 WPF 按钮
【发布时间】：2011-04-24 06:34:29
【问题描述】：

我在 .png 中有一个彩色圆圈，其余的都是透明的。我可以将该图像放在按钮上，但按钮样式的其余部分在图像的透明区域上可见。如何在正常、鼠标悬停和按下模式下隐藏它？

【问题讨论】：

【解决方案1】：

试试这种风格

    <Style x:Key="EmptyButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="#00000000"/>
        <Setter Property="BorderBrush" Value="#00000000"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <ContentPresenter 
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        Margin="{TemplateBinding Padding}" 
                        RecognizesAccessKey="True" 
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

并按如下方式使用

    <Button Style="{DynamicResource EmptyButtonStyle}">
        <Image Source="/Assets/circle.png" />
    </Button>

【讨论】：

我正在使用您的样式，但现在只有按钮内的图像是可点击的。如何使整个按钮区域可点击？我在一个顶级问题中问过这个问题：stackoverflow.com/q/7541858/480894
您可以设置 Background="Transparent" 和 BorderBrush="Transparent"。现在您可以单击按钮中的任意位置。当您悬停或单击时，会显示整个按钮区域（这可能不是您想要的）。

【解决方案2】：

听起来您当前正在使用现有按钮的模板，并且只是在其中添加了一个图像。您需要做的是修改按钮的<Template> 本身，以便它使用您的图像而不是默认模板。

如果您在 Google 上搜索“WPF 模板”或“WPF 圆形按钮”之类的内容，您可能会找到一些很好的示例。

【讨论】：

【解决方案3】：

我最终使用了最简单的解决方案（可能不是最优雅的）。

<Image x:Name="nextImage" MouseDown="nextButton_Click"></Image>

【讨论】：

我不得不说比不优雅...硬连线事件处理程序在 WPF 中很少需要，模板系统的重点是按钮可以是按钮，无论其外观如何是。我会敦促您改为查看@rudigrobler 的解决方案。