zoukankan      html  css  js  c++  java
  • WPF里实现imageButton的步骤

    1、建立一个新的类库并写一个类:ImageButton,代码如下:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media;
    
    namespace My.Controls
    {
        public class TextButton:Button
        {
            #region 属性
            /// <summary>
            /// 当鼠标移到按钮上时,按钮的前景色
            /// </summary>
            public Brush MouserOverForeground
            {
                get { return (Brush)GetValue(MouserOverForegroundProperty); }
                set { SetValue(MouserOverForegroundProperty, value); }
            }
    
            /// <summary>
            /// 鼠标移到按钮上时,按钮的背景色
            /// </summary>
            public Brush MouseOverBackground
            {
                get { return (Brush)GetValue(MouseOverBackgroundProperty); }
                set { SetValue(MouseOverBackgroundProperty, value); }
            }
    
            /// <summary>
            /// 当鼠标按下时,按钮的前景色
            /// </summary>
            public Brush MousedownForeground
            {
                get { return (Brush)GetValue(MousedownForegroundProperty); }
                set { SetValue(MousedownForegroundProperty, value); }
            }
    
            /// <summary>
            /// 当鼠标按下时,按钮的背景色
            /// </summary>
            public Brush MousedownBackground
            {
                get { return (Brush)GetValue(MousedownBackgroundProperty); }
                set { SetValue(MousedownBackgroundProperty, value); }
            }
    
            /// <summary>
            /// 当按钮不可用时,按钮的前景色
            /// </summary>
            public Brush DisabledForeground
            {
                get { return (Brush)GetValue(DisabledForegroundProperty); }
                set { SetValue(DisabledForegroundProperty, value); }
            }
    
            /// <summary>
            /// 当按钮不可用时,按钮的背景色
            /// </summary>
            public Brush DisabledBackground
            {
                get { return (Brush)GetValue(DisabledBackgroundProperty); }
                set { SetValue(DisabledBackgroundProperty, value); }
            }
            #endregion
    
            #region 依赖属性
            /// <summary>
            /// 当鼠标移到按钮上时,按钮的前景色(这是依赖属性)
            /// </summary>
            public static readonly DependencyProperty MouserOverForegroundProperty =
                DependencyProperty.Register("MouserOverForeground", typeof(Brush), typeof(TextButton), new PropertyMetadata(Brushes.Black));
    
            /// <summary>
            /// 鼠标移到按钮上时,按钮的背景色(这是依赖属性)
            /// </summary>
            public static readonly DependencyProperty MouseOverBackgroundProperty =
                DependencyProperty.Register("MouseOverBackground", typeof(Brush), typeof(TextButton), new PropertyMetadata(Brushes.White));
    
            /// <summary>
            /// 当鼠标按下时,按钮的前景色(这是依赖属性)
            /// </summary>
            public static readonly DependencyProperty MousedownForegroundProperty =
                DependencyProperty.Register("MousedownForeground", typeof(Brush), typeof(TextButton), new PropertyMetadata(Brushes.Black));
    
            /// <summary>
            /// 当鼠标按下时,按钮的背景色(这是依赖属性)
            /// </summary>
            public static readonly DependencyProperty MousedownBackgroundProperty =
                DependencyProperty.Register("MousedownBackground", typeof(Brush), typeof(TextButton), new PropertyMetadata(Brushes.White));
    
            /// <summary>
            /// 当按钮不可用时,按钮的前景色(这是依赖属性)
            /// </summary>
            public static readonly DependencyProperty DisabledForegroundProperty =
                DependencyProperty.Register(" DisabledForeground", typeof(Brush), typeof(TextButton), new PropertyMetadata(Brushes.Black));
    
            /// <summary>
            /// 当按钮不可用时,按钮的背景色(这是依赖属性)
            /// </summary>
            public static readonly DependencyProperty DisabledBackgroundProperty =
                DependencyProperty.Register("DisabledBackground", typeof(Brush), typeof(TextButton), new PropertyMetadata(Brushes.White));
            #endregion
    
            #region 构造函数
            public TextButton():base()
            {
                //获取资源文件信息
                ResourceDictionary rd = new ResourceDictionary();
                rd.Source = new Uri("/Zmy.Wpf.Controls;component/Style.xaml", UriKind.Relative);
                this.Resources.MergedDictionaries.Add(rd);
                //设置样式
                this.Style = this.FindResource("TextButtonStyle") as Style;
            }
            #endregion
        }
    }

    2、加一个样式文件 Style.xaml

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:local="clr-namespace:My.Controls">
        <Style x:Key="TextButtonStyle" TargetType="{x:Type local:TextButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type local:TextButton}">
                        <Border x:Name="buttonBorder"
                                Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding Foreground}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Self}, Path=MouserOverForeground}"/>
                    <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=MouseOverBackground}"/>
                </Trigger>
    
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Self}, Path=MousedownForeground}"/>
                    <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=MousedownBackground}"/>
                </Trigger>
    
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Self}, Path=DisabledForeground}"/>
                    <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=DisabledBackground}"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    
        <Style x:Key="ImageButtonStyle" TargetType="{x:Type local:ImageButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type local:ImageButton}">
                        <Border x:Name="buttonBorder">
                            <Border.Background>
                                <ImageBrush ImageSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=NormalBackgroundImage}"/>
                            </Border.Background>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="buttonBorder">
                                    <Setter.Value>
                                        <ImageBrush ImageSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MouseoverBackgroundImage}"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
    
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" TargetName="buttonBorder">
                                    <Setter.Value>
                                        <ImageBrush ImageSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MousedownBackgroundImage}"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="buttonBorder">
                                    <Setter.Value>
                                        <ImageBrush ImageSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DisabledBackgroundImage}"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>

    3、在使用的form里先添加引用,如下:

    <UserControl x:Class="Main.UserControls.EvidencePackageList_Error"
                 x:Name="EvidencePackageList"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
                 xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
                 xmlns:controls="clr-namespace:My.Controls;assembly=My.Controls"
                 mc:Ignorable="d" 
                 d:DesignHeight="450" d:DesignWidth="800" Loaded="UserControl_Loaded">

    4、使用方式如下:

    <controls:ImageButton Height="20" Width="20" Cursor="Hand" Command="{Binding ElementName=EvidencePackageList,Path=ShowErrorDetailWithButton}" CommandParameter="{Binding ElementName=EvidencePackageList, Path=SelectRowInfo }" NormalBackgroundImage="pack://application:,,,/DataResource;component/Images/Warring.png" MouseoverBackgroundImage="pack://application:,,,/DataResource;component/Images/Warring.png"/>

    5、效果如下:

  • 相关阅读:
    前端 JavaScript&Dom
    前端 css续
    前端 初级篇(CSS)
    前端 初级篇(HTML)
    堡垒机
    Python操作RabbitMQ
    常用到代码片段
    关于文件上传功能的思考
    JS正则表达式将url转成json格式
    一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
  • 原文地址:https://www.cnblogs.com/wjx-blog/p/12107803.html
Copyright © 2011-2022 走看看