WPF图像按钮控件 [英] WPF image button control

问题描述

现在很长时间以来，我一直在寻找优质的 WPF图片按钮控件。我需要按钮仅包含图像，然后让我设置图像选项以悬停并按下。 SO和网络上其他所有当前的解决方案都包括基于 CustomTemplate 的解决方案，这些解决方案并不十分友好（即 TriState Button ）。

Long time is now that I have been searching for a quality WPF image button control. I need the button to consist of an image only and let me set image options for hovering and pressing. All current solutions on SO and the rest of the web include CustomTemplate based solutions that are not very friendly (i.e. TriState Button).

也许有一组控件，例如 Modern UI 或 MahApps 有人可以指向我指向具有这种按钮的按钮？

Maybe there is a set of controls like Modern UI or MahApps that someone could point me to that have this kind of button?

推荐答案

编辑：此控件可以在整个项目中重复使用，您可以根据需要执行多次。与其他任何控件完全相同，并且使用方式与其他任何控件库相同。没有边框效果，您可以添加所需的任何悬停效果。就是这样。

This control can be reused throughout a project as many times as you need it acts exactly as any other control would and is used the same way as any other control library. There is no Border effect and you can add whatever hover effect you want. This is how it works.

在解决方案中添加一个名为CustomControls的文件夹。

Add a folder named CustomControls to your solution.

创建一个自定义控件（ WPF）在该文件夹中名为ImageButton。

Create a custom control(WPF) named ImageButton in that folder. The custom control code goes in there.

现在应该在您的项目中创建一个名为Themes的文件夹，并在其中包含一个名为generic.xaml的资源字典。打开它并使用资源字典代码。

Now a folder named Themes should have been created in your project with a resourcedictionary named generic.xaml inside it. Open it and use the resourcedictionary code.

现在将其添加到窗口标记中

Now add this to your window tag

xmlns:b="clr-namespace:MyProject.CustomControls"

现在您可以在该窗口中多次使用该控件正如您希望在答案末尾使用标签结构一样，就像普通按钮一样。

Now you can use the control in that window as many times as you'd like just like a regular button by using the tag structure at the end of the answer.

这里是我让您可以从主窗口设置图像源，高度和宽度以及所有标准按钮事件的地方。

Here is one that I made you can set the Image source, height and width all from your main window and all standard button events are there.

这是自定义控件

namespace MyProject.CustomControls
{
public class ImageButton : Button
{
     public static DependencyProperty SourceProperty =
        DependencyProperty.Register(
            "Source",
            typeof(Uri),
            typeof(ImageButton));

    static ImageButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));
    }

    public Uri Source
    {
        get { return (Uri)GetValue(SourceProperty); }
        set { SetValue(SourceProperty, value); }
    }
}

}

这是资源字典中的样式，您可以在触发器部分中添加mouseover事件和button.pressed事件，或删除触发器并将其设置在窗口中。

Here is the style in the resourcedictionary, you can add mouseover event and a button.pressed event in the triggers section or remove the triggers and set them on your window.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:b="clr-namespace:MyProject.CustomControls">

<Style x:Key="{x:Type b:ImageButton}" TargetType="{x:Type b:ImageButton}">
    <Setter Property="Height" Value="{Binding Path=Height, RelativeSource={RelativeSource TemplatedParent}}"/>
    <Setter Property="Width" Value="{Binding Path=Width, RelativeSource={RelativeSource TemplatedParent}}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type b:ImageButton}">
                <Grid x:Name="LayoutGrid">
                    <Image x:Name="_Image" HorizontalAlignment="Center" VerticalAlignment="Center" Width="{TemplateBinding Width}"
                           Source="{Binding Path=Source, RelativeSource={RelativeSource TemplatedParent}}" Height="{TemplateBinding Height}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="" TargetName="" Value=""/>
                    </Trigger>
                    <Trigger Property="Button.IsPressed" Value="True">
                        <Setter Property="" TargetName="" Value=""/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

在项目中使用它将名称空间添加到窗口中，然后标记将像这样

To use it in your project add the namespace to the window and then the tag will be like this

<b:ImageButton Source="Image.png" Height="50" Width="50" Click="do_Something"/>

这篇关于WPF图像按钮控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！