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

Question

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

我创建了图片资源：

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

感谢您的帮助

Answer 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，他们应该有一个很好的例子）

Answer 2

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

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

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

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

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

How to correctly create button with images

c#

wpf

xaml

styles

button