WPF ImageButton升级版

最新推荐文章于 2023-02-17 17:41:24 发布
最新推荐文章于 2023-02-17 17:41:24 发布
阅读量1.5k 收藏 3
点赞数 1
分类专栏： WPF
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oneonce/article/details/77001854
版权

Style

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ImageButtonTest01.Control">


    <SolidColorBrush x:Key="ImageButton.Static.Background" Color="#FFDDDDDD"/>
    <SolidColorBrush x:Key="ImageButton.Static.Border" Color="#FF707070"/>
    <SolidColorBrush x:Key="ImageButton.Static.Foreground" Color="#FF808080"/>
    <SolidColorBrush x:Key="ImageButton.MouseOver.Background" Color="#FFBEE6FD"/>
    <SolidColorBrush x:Key="ImageButton.MouseOver.Border" Color="#FF3C7FB1"/>
    <SolidColorBrush x:Key="ImageButton.MouseOver.Foreground" Color="#FFaaaaaa"/>
    <SolidColorBrush x:Key="ImageButton.Pressed.Background" Color="#FFC4E5F6"/>
    <SolidColorBrush x:Key="ImageButton.Pressed.Border" Color="#FF2C628B"/>
    <SolidColorBrush x:Key="ImageButton.Pressed.Foreground" Color="#FF222222"/>
    <SolidColorBrush x:Key="ImageButton.Disabled.Background" Color="#FFF4F4F4"/>
    <SolidColorBrush x:Key="ImageButton.Disabled.Border" Color="#FFADB2B5"/>
    <SolidColorBrush x:Key="ImageButton.Disabled.Foreground" Color="#FF838383"/>

    <ControlTemplate x:Key="ImageButtonTemplate" TargetType="{x:Type local:ImageButton}">
        <Border x:Name="border" Margin="0"
                BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                Background="{TemplateBinding Background}"
                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                UseLayoutRounding="True"
                CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{Binding ContentMargin, RelativeSource={RelativeSource TemplatedParent}}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <Image x:Name="image" Grid.Row="0" Grid.Column="0" Focusable="False"
                       Margin="{Binding BorderThickness, ElementName=BD_PART}"
                       Source="{Binding NormalImage, RelativeSource={RelativeSource TemplatedParent}}"
                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
                <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False"
                                  Margin="{TemplateBinding Padding}"
                                  RecognizesAccessKey="True"
                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Grid>
        </Border>

        <ControlTemplate.Triggers>
            <DataTrigger Binding="{Binding Path=LayoutModel, RelativeSource={RelativeSource Mode=Self}}" Value="LeftToRight">
                <Setter TargetName="contentPresenter" Property="Margin" Value="{Binding TextLeftMargin, RelativeSource={RelativeSource TemplatedParent}}"/>
            </DataTrigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Path=LayoutModel, RelativeSource={RelativeSource Mode=Self}}" Value="LeftToRight"/>
                    <Condition Binding="{Binding Path=Content, RelativeSource={RelativeSource Mode=Self}}" Value="{x:Null}"/>
                </MultiDataTrigger.Conditions>

                <Setter TargetName="contentPresenter" Property="Margin" Value="0"/>
            </MultiDataTrigger>

            <DataTrigger Binding="{Binding Path=LayoutModel, RelativeSource={RelativeSource Mode=Self}}" Value="OutSideToInSide">
                <Setter TargetName="contentPresenter" Property="Grid.Column" Value="0"/>
            </DataTrigger>

            <DataTrigger Binding="{Binding Path=LayoutModel, RelativeSource={RelativeSource Mode=Self}}" Value="TopToBottom">
                <Setter TargetName="image" Property="Grid.Row" Value="0"/>
                <Setter TargetName="contentPresenter" Property="Grid.Column" Value="0"/>
                <Setter TargetName="contentPresenter" Property="Grid.Row" Value="1"/>
            </DataTrigger>


            <Trigger Property="IsMouseOver" Value="true">
                <Setter TargetName="image" Property="Source" Value="{Binding HoverImage, RelativeSource={RelativeSource TemplatedParent}}"/>
                <Setter TargetName="border" Property="Background" Value="{StaticResource ImageButton.MouseOver.Background}"/>
                <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource ImageButton.MouseOver.Border}"/>
                <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource ImageButton.MouseOver.Foreground}"/>
            </Trigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=Self}}" Value="true"/>
                    <Condition Binding="{Binding Path=Background, RelativeSource={RelativeSource Mode=Self}}" Value="Transparent"/>
                </MultiDataTrigger.Conditions>

                <Setter TargetName="image" Property="Source" Value="{Binding HoverImage, RelativeSource={RelativeSource TemplatedParent}}"/>
                <Setter TargetName="border" Property="Background" Value="Transparent"/>
                <Setter TargetName="border" Property="BorderBrush" Value="Transparent"/>
                <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource ImageButton.MouseOver.Foreground}"/>
            </MultiDataTrigger>

            <Trigger Property="IsPressed" Value="true">
                <Setter TargetName="image" Property="Source" Value="{Binding PressedImage, RelativeSource={RelativeSource TemplatedParent}}"/>
                <Setter TargetName="border" Property="Background" Value="{StaticResource ImageButton.Pressed.Background}"/>
                <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource ImageButton.Pressed.Border}"/>
                <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource ImageButton.Pressed.Foreground}"/>
            </Trigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Path=IsPressed, RelativeSource={RelativeSource Mode=Self}}" Value="true"/>
                    <Condition Binding="{Binding Path=Background, RelativeSource={RelativeSource Mode=Self}}" Value="Transparent"/>
                </MultiDataTrigger.Conditions>

                <Setter TargetName="image" Property="Source" Value="{Binding PressedImage, RelativeSource={RelativeSource TemplatedParent}}"/>
                <Setter TargetName="border" Property="Background" Value="Transparent"/>
                <Setter TargetName="border" Property="BorderBrush" Value="Transparent"/>
                <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource ImageButton.Pressed.Foreground}"/>
            </MultiDataTrigger>

            <Trigger Property="IsEnabled" Value="false">
                <Setter TargetName="image" Property="Source" Value="{Binding DisabledImage, RelativeSource={RelativeSource TemplatedParent}}"/>
                <Setter TargetName="border" Property="Background" Value="{StaticResource ImageButton.Disabled.Background}"/>
                <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource ImageButton.Disabled.Border}"/>
                <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource ImageButton.Disabled.Foreground}"/>
            </Trigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource Mode=Self}}" Value="false"/>
                    <Condition Binding="{Binding Path=Background, RelativeSource={RelativeSource Mode=Self}}" Value="Transparent"/>
                </MultiDataTrigger.Conditions>

                <Setter TargetName="image" Property="Source" Value="{Binding DisabledImage, RelativeSource={RelativeSource TemplatedParent}}"/>
                <Setter TargetName="border" Property="Background" Value="Transparent"/>
                <Setter TargetName="border" Property="BorderBrush" Value="Transparent"/>
                <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource ImageButton.Disabled.Foreground}"/>
            </MultiDataTrigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style TargetType="{x:Type local:ImageButton}">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="UseLayoutRounding" Value="True"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="Background" Value="{StaticResource ImageButton.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ImageButton.Static.Border}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template" Value="{StaticResource ImageButtonTemplate}"/>
    </Style>

    <Style x:Key="ImageButtonTransparent" TargetType="{x:Type local:ImageButton}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="TextLeftMargin" Value="0"/>
        <Setter Property="Template" Value="{StaticResource ImageButtonTemplate}"/>
    </Style>
</ResourceDictionary>



CS 

public class ImageButton : Button
{
    private const double CONTENT_MARGIN = 2.0;

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

    public ImageButton()
    {
            
    }

    #region Properties  

    public static readonly DependencyProperty NormalImageProperty =
                        DependencyProperty.Register("NormalImage", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));
    public ImageSource NormalImage
    {
        get { return (ImageSource)GetValue(NormalImageProperty); }
        set { SetValue(NormalImageProperty, value); }
    }

    public static readonly DependencyProperty HoverImageProperty =
                        DependencyProperty.Register("HoverImage", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));
    public ImageSource HoverImage
    {
        get { return (ImageSource)GetValue(HoverImageProperty); }
        set { SetValue(HoverImageProperty, value); }
    }

    public static readonly DependencyProperty PressedImageProperty =
                        DependencyProperty.Register("PressedImage", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));
    public ImageSource PressedImage
    {
        get { return (ImageSource)GetValue(PressedImageProperty); }
        set { SetValue(PressedImageProperty, value); }
    }

    public static readonly DependencyProperty DisabledImageProperty =
                        DependencyProperty.Register("DisabledImage", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));
    public ImageSource DisabledImage
    {
        get { return (ImageSource)GetValue(DisabledImageProperty); }
        set { SetValue(DisabledImageProperty, value); }
    }

    public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(ImageButton), 
                                                                            new PropertyMetadata(new CornerRadius(0,0,0,0), OnCornerRadiusChanged));
    public CornerRadius CornerRadius
    {
        get { return (CornerRadius)GetValue(CornerRadiusProperty); }
        set {
            SetValue(CornerRadiusProperty, value);
        }
    }

    private static void OnCornerRadiusChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ImageButton thisButton = d as ImageButton;

        CornerRadius cornerRadius = new CornerRadius();
        cornerRadius = (CornerRadius)e.NewValue;

        if (LayoutModel.LeftToRight == thisButton.LayoutModel)
        {
            d.SetValue(ContentMarginProperty, new Thickness(cornerRadius.TopLeft / 2.0, CONTENT_MARGIN, cornerRadius.TopLeft / 2.0, CONTENT_MARGIN));
        }
        else if (LayoutModel.TopToBottom == thisButton.LayoutModel)
        {
            d.SetValue(ContentMarginProperty, new Thickness(cornerRadius.TopLeft / 3.0, CONTENT_MARGIN, cornerRadius.TopLeft / 3.0, CONTENT_MARGIN));
        }
        else if (LayoutModel.OutSideToInSide == thisButton.LayoutModel)
        {
            d.SetValue(ContentMarginProperty, new Thickness(cornerRadius.TopLeft / 3.0));
        }
        else
        {
            // Nothing to do
        }
    }

    public static readonly DependencyProperty LayoutModelProperty = DependencyProperty.Register("LayoutModel", typeof(LayoutModel), typeof(ImageButton),
                                                                                                new PropertyMetadata(LayoutModel.LeftToRight));
    public LayoutModel LayoutModel
    {
        get { return (LayoutModel)GetValue(LayoutModelProperty); }
        set { SetValue(LayoutModelProperty, value); }
    }

    public static readonly DependencyProperty ContentMarginProperty = DependencyProperty.Register("ContentMargin", typeof(Thickness), typeof(ImageButton),                                                                                           new PropertyMetadata(new Thickness(2,2,2,2)));
    Thickness contentMargin = new Thickness(0, 0, 0, 0);
    public Thickness ContentMargin
    {
        get { return (Thickness)GetValue(ContentMarginProperty); }
        set { SetValue(ContentMarginProperty, value); }
    }

    public static readonly DependencyProperty TextLeftMarginProperty = DependencyProperty.Register("TextLeftMargin", typeof(Thickness), typeof(ImageButton), new PropertyMetadata(new Thickness(3, 0, 3, 0)));
    public Thickness TextLeftMargin
    {
        get { return (Thickness)GetValue(TextLeftMarginProperty); }
        set { SetValue(TextLeftMarginProperty, value); }
    }

    #endregion
}

public enum LayoutModel
{
    LeftToRight,
    TopToBottom,
    OutSideToInSide
}


使用：

<StackPanel Orientation="Vertical" Margin="0, 40,0,0">
    <control:ImageButton Content="Image Button" FontSize="20" IsEnabled="False"/>

    <control:ImageButton Content="Image Button" FontSize="20" CornerRadius="10" Margin="5"
                        Height="60" Width="200"
                        LayoutModel="OutSideToInSide"
                        NormalImage="Resources/Images/MS.png"
                        HoverImage="Resources/Images/MS.png"
                        PressedImage="Resources/Images/MS.png"
                        DisabledImage="Resources/Images/MS.png"
                        Click="ImageButton_Click"/>
    <control:ImageButton Margin="5" Content="Image Button"
                        Height="60" Width="150"
                        LayoutModel="LeftToRight"
                        NormalImage="Resources/Images/MS.png"
                        HoverImage="Resources/Images/MS.png"
                        PressedImage="Resources/Images/MS.png"
                        DisabledImage="Resources/Images/MS.png"/>
    <control:ImageButton Margin="5" Content="Image Button"
                        Height="60" Width="150"
                        LayoutModel="TopToBottom"
                        NormalImage="Resources/Images/MS.png"
                        HoverImage="Resources/Images/MS.png"
                        PressedImage="Resources/Images/MS.png"
                        DisabledImage="Resources/Images/MS.png"/>
    <control:ImageButton Margin="5"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        NormalImage="Resources/Images/MS.png"
                        HoverImage="Resources/Images/MS.png"
                        PressedImage="Resources/Images/MS.png"
                        DisabledImage="Resources/Images/MS.png"/>
    <control:ImageButton Margin="5"
                        FontFamily="/ImageButtonTest01;component/Resources/#iconfont"
                        Content="" FontSize="16"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Style="{StaticResource ImageButtonTransparent}"/>
    <Button x:Name="tbnDefaultButton" Height="60" Width="120"
        Content="Default Button" Click="tbnDefaultButton_Click"/>
</StackPanel>

效果


OneOnce
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
WPF封装简单的ImageButton控件
dnazhd的博客
10-22 549
使用WPF封装了一个简单的ImageButton自定义控件，加入常态、划过、按下、禁用状态属性，可设置相应的图标。参考链接：https://blog.csdn.net/elie_yang/article/details/81870694 1、ImageButton自定义控件类 public class UCImageButton : Button { stat...
wpf ImageButton
04-23
图片按钮，按钮里的图片文字，可以水平排列，垂直排列；可以更改图片，文字内容及按钮背景色
WPF ImageButton
q136780964的博客
02-05 3210
最常用的图片按钮： 　　有正常背景、鼠标滑过背景、鼠标按下背景、不可用背景、鼠标滑过透明度、是否是透明模式（若是则仅需正常背景即可，鼠标滑过和按下时则仅改变透明度），样式放在Generic.xaml中。 　　 　　示例： public class ImageButton : Button { static ImageButton() {
多态图标(2)-WPF自定义用户控件ImageButton
王文松的博客
11-23 5566
前言 本节目的是设计WPF自定义控件ImageButton，这样就可以使用咱们的四态图标，方便在项目中直接使用，文章底部会将源码奉上，demo的演示效果如下： WPF工程 RBImageButton.cs public class RBImageButton : Button { static RBImageButton() {
WPF自定义用户库制作ImageButton控件
qq_27474555的博客
02-17 216
WPF自定义库制作ImageButton控件
WPF 如何制作图片按钮（imageButton）
lijunhu1的专栏
04-10 1736
如何在wpf中制作ImageButton； 1.放个Image控件 2.放个Label控件 3.放个Button 控件，并将透明度Opacity设为0，FocusVisualStyle设为null
基础知识（十三）WPF中点击按钮后，切换ImageButton 的几种状态
xpj8888的博客
09-21 1610
一、简介 这篇博客记录了点击按钮后，切换ImageButton 的几种状态，请看点击步骤。 点击头部： 然后点击肩部： 二、工程目录 2.1、MainWindow.xaml <Window x:Class="WPFtest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/x...
wpf 自动升级_WPF
09-21
**标题：“wpf 自动升级_WPF”** 在Windows Presentation Foundation（WPF）应用程序开发中，自动升级功能是一项重要的需求，它允许用户无感知地、便捷地更新应用程序到最新版本。这个主题主要围绕如何在WPF应用中...
WPF ImageButton 用户自定义控件
03-13
本教程将详细讲解如何实现一个`WPF ImageButton`控件，它是一个结合了图像与按钮功能的组件，非常适合在UI设计中提供直观的交互。 首先，我们要理解`WPF`的基础概念。WPF是.NET Framework的一部分，用于构建桌面...
WPF自定义图片按钮[ImageButtonWPF]
02-09
WPF自定义图片按钮[ImageButtonWPF] 更多资源： http://cleopard.download.csdn.net
wpf image button
04-13
wpf imagebutton 自定义控件 新手 自己写的demo，老手不用来了 c#
WPF.ImageButton.zip
08-03
这个压缩包"**WPF.ImageButton.zip**"可能包含了一个示例项目，展示了如何实现这样一个图片按钮，你可以通过下载并研究该项目来进一步学习和实践。记住，细节调整和个性化设计是WPF用户界面开发的关键，这将使你的...
WPF——给button添加背景图片
weixin_41883890的博客
09-18 2588
一个可行的解决方案为，封装一个用于图片按钮的自定义按钮控件，该控件继承自Button控件，但是额外增加了一些用户图片绑定的依赖属性，同时在控件的默认外观模板中，通过TemplateBinding的方式绑定到依赖属性上，这样在使用的时候便可以直接通过绑定的方式设置图片按钮需要显示的图片，不再需要修改控件模板。其中ImageButton.xaml为默认控件模板，ImageButton.cs为控件的逻辑控制文件，其中包含了ImageButton控件所需要的新的依赖属性，包括图片源属性等。
WPF控件之ImageButton
热门推荐
智周万物
05-06 1万+
在使用wpf进行开发的时候，发现wpf居然没有提供ImageButton这样的控件，不过wpf提供了诸多实现途径，而且网上也有现成的控件可以利用。下面是一些链接 http://stackoverflow.com/questions/2491941/wpf-tristate-image-button/3676177#3676177 http://imagebuttonwpf.codeplex.com/ http://blogs.msdn.com/b/knom/archive/2007/10/31/wpf
WPF 控件【I】ImageButton(一) ImageButton
xpj8888的博客
10-10 1480
https://blog.csdn.net/OneOnce/article/details/73105240
在WPF中，让button显示为一个Image
anderberte
07-12 3864
在WPF中，让button显示为一个Image，可以设置其BackGround为Image或者Content为Image，不过这两种方法都有一些问题~~ 1、可以把Button的content设置为一个Image，不过图片的周围有个边框，影响美观~ 2、通过设置Background,不过还是有一个边框 3、重写一个ControlTemplate，并用ImagBrush 填充一个Image
WPF自定义图片按钮控件
zhuowp的专栏
10-09 2444
在wpf中，如果要想给按钮控件Button加上图片，最直接的做法是修改控件模板，在模板中加入想要的图片，代码如下图所示：
wpf中 imagebutton
最新发布
03-28
WPF中没有一个名为ImageButton的控件，但可以通过使用Button和Image控件组合来创建类似的效果。 下面是一个示例代码，它创建了一个Button控件，并在其内容(Content)属性中放置了一个Image控件。在样式(Style)中，添加了鼠标悬停(Hover)和按下(Pressed)时的效果。 ```xml <Button> <Image Source="buttonImage.png" /> <Button.Style> <Style TargetType="Button"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Opacity" Value="0.8" /> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Opacity" Value="0.6" /> </Trigger> </Style.Triggers> </Style> </Button.Style> </Button> ``` 在实际应用中，可以根据需要修改样式，添加其他效果。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

OneOnce

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值