【问题标题】:WPF image button controlWPF图像按钮控件
【发布时间】:2015-05-26 15:42:48
【问题描述】:

很长时间以来,我一直在寻找高质量的WPF 图像按钮控件。我需要按钮包含一个仅图像,并让我设置悬停和按下的图像选项。 SO 和网络其余部分上的所有当前解决方案都包括基于 CustomTemplate 的不太友好的解决方案(即TriState Button)。

也许有一组控件,例如 Modern UIMahApps,有人可以指出我有这种按钮吗?

【问题讨论】:

  • 简单地将图像设置为按钮的内容有什么问题?
  • Button控件的悬停图像和不想要的边框效果怎么样?

标签: wpf button controls


【解决方案1】:

编辑:此控件可以在整个项目中根据需要多次重复使用,它的作用与任何其他控件完全相同,并且与任何其他控件库的使用方式相同。没有边框效果,您可以添加任何您想要的悬停效果。这就是它的工作原理。

将名为 CustomControls 的文件夹添加到您的解决方案中。

在该文件夹中创建一个名为 ImageButton 的自定义控件 (WPF)。自定义控制代码在里面。

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

现在将它添加到您的窗口标签中

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

现在,您可以在该窗口中多次使用该控件,就像使用常规按钮一样,方法是使用答案末尾的标记结构。

这是我制作的一个,您可以在主窗口中设置图像源、高度和宽度,所有标准按钮事件都在那里。

这是自定义控件

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); }
    }
}

}

这是资源字典中的样式,您可以在触发器部分添加鼠标悬停事件和按钮。按下事件或删除触发器并将它们设置在您的窗口上。

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

要在你的项目中使用它,请将命名空间添加到窗口中,然后标签将是这样的

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

【讨论】:

  • 我正在寻找更通用的控件,而不是模板解决方案
  • 更通用是什么意思?
  • 库类型,包装精美的控件/dll等
  • 我需要易于使用和可重复使用。
  • 我已经编辑了我的答案,以展示这对你有什么作用,如果你有任何问题,请告诉我。
【解决方案2】:

这里有:https://imagebuttonwpf.codeplex.com/releases/view/70356

您必须下载解码代码,编译它,然后在您的项目中使用生成的 DLL。

检查代码,它很容易制作,并且按照 CJK 说明进行实际控制,您可以立即自己完成!

【讨论】:

  • 点击链接时显示“项目尚未发布”
  • 没错,不上传代码就不能发布了……mpf!我会尝试找到另一个地方上传它:/
  • 好吧,没关系,我在 Codeplex 中找到了其他人制作的另一个控件...正在更新我的答案。
【解决方案3】:

你可以试试这个

    <Button Background="Transparent" BorderThickness="0">
            <Image Source="Azure Automation.jpg"/>
    </Button>

【讨论】:

  • 这种方式没有图像悬停效果。
  • @eYe 这样的话你需要为Button编写模板
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-01-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-02-23
  • 2012-07-15
相关资源
最近更新 更多