如何正确创建带图像的按钮(How to correctly create button with images)

如何正确创建带图像的按钮(How to correctly create button with images)

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

我为图像创建了资源：

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

我创建了一个Style（但不适用于资源类型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}"">

谢谢你的帮助

I want to create an application with multiple buttons. So I want to create a style in my application to define the buttons. Buttons should contain an image and that image should change when mousse is over.

I created resources for images :

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

I created a Style (but doesn't work with resource type 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>

How can a properly create my Style and how use it ?

I want to use it with something like this :

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

Thank you for help

最满意答案

通过适当的绑定解决您的ImageSource问题：

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

对于您自己的属性ImageActive和ImageOver ，构建您自己的自定义控件：

public class MyButton:Button { ... }

根据您的Binding要求，这些属性可以是简单的属性或DependencyProperties 。

Solve your ImageSource problem with proper binding :

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

For your own properties ImageActive and ImageOver , build your own custom control :

public class MyButton:Button { ... }

And depending upon your Binding requirements, these properties can be simple one or DependencyProperties.