如何正确创建带有图像的按钮答案

【问题标题】：How to correctly create button with images如何正确创建带有图像的按钮
【发布时间】：2016-11-10 19:37:16
【问题描述】：

我想创建一个带有多个按钮的应用程序。所以我想在我的应用程序中创建一个样式来定义按钮。按钮应该包含一个图像，并且当慕斯结束时该图像应该改变。

我为图片创建了资源：

<Image x:Key="Open-active" Source="Images/Open-active.png"/>
<Image x:Key="Open-over" Source="Images/Open-over.png"/>
<Image x:Key="Printer-active" Source="Images/Printer-active.png"/>
<Image x:Key="Printer-over" Source="Images/Printer-over.png"/>

我创建了一个样式（但不适用于资源类型Image）：

<Style x:Key="ButtonMain" TargetType="Button"
       BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
    <Setter Property="Height" Value="{StaticResource MainButtonHeight}"/>
    <Setter Property="Width" Value="{StaticResource MainButtonWidth}"/>
    <Setter Property="Margin" Value="5"/>
    <Setter Property="Foreground" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Background">
    <Setter.Value>
        <ImageBrush ImageSource="???"/>
    </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="???"/>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

如何正确创建我的Style 以及如何使用它？

我想用它来做这样的事情：

<Button Style="{StaticResource ButtonMain}"
    ImageActive="{StaticResource Open-active}"
    ImageOver="{StaticResource Open-over}"">

感谢您的帮助

【问题讨论】：

您可以创建自己的自定义控件。这可能是一个好的开始：codeproject.com/Tips/773386/WPF-ImageButton
我同意@CiccioRocca 的观点，你最好的办法是创建你自己的带有附加属性的自定义按钮控件。如果您不必拥有 ImageActive 和 ImageOver 属性，则可以基于彼此为每个变体创建样式。然后只需设置按钮样式。
谢谢你的回答我会看看这个

标签： c# wpf xaml button styles

【解决方案1】：

您可以使用样式继承来实现您想要做的事情：

你的主要风格是：

<Style x:Key="ButtonMain" TargetType="Button"
       BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
    <Setter Property="Height" Value="{StaticResource MainButtonHeight}"/>
    <Setter Property="Width" Value="{StaticResource MainButtonWidth}"/>
    <Setter Property="Margin" Value="5"/>
    <Setter Property="Foreground" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
</Style>

仅定义图像的一种样式如下所示：

<Style x:Key="ButtonImage1" TargetType="Button"
       BasedOn="{StaticResource ButtonMain">
 <Setter Property="Background">
    <Setter.Value>
        <ImageBrush ImageSource="???"/>
    </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="???"/>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

您只需使用按钮上的样式

关于图像，它不是您想要使用的类型，IIRC，ImageBrush 源可以是图像文件的路径（查看 MSDN，他们应该有一个很好的例子）

【讨论】：

这是一个很好的例子，我建议如果按钮样式会被多次使用，也许将它们粘贴到您的应用程序资源中，或者至少可以包含一个单独的 XAML；这样您就不会一直重复样式代码。
如果我理解得很好，我必须将 Style ButtonMain 放在我的资源 XAML 上（就像我实际上所做的那样）并为每个 Button 定义一个 Style ButtonImage1 ？它似乎工作但我很懒，复制/粘贴的行太多，我会尝试制作我自己的UserControl
@A.Pissicat 您只需要为每种不同的图像组合定义一个样式

【解决方案2】：

通过正确的绑定解决您的 ImageSource 问题：

<ImageBrush ImageSource="{Binding Source, Source={StaticResource Open-active}}"/>

对于您自己的属性ImageActive 和ImageOver，构建您自己的自定义控件：
```
public class MyButton:Button
{ ... }
```

根据您的绑定要求，这些属性可以是简单的一个或DependencyProperties。

【讨论】：

1- 正在寻找，谢谢 :-)。 2- 我想知道创建DependencyProperties 是否是个好主意，你给我答案！
@A.Pissicat 如果回答了您的问题，请将其标记为正确答案