WPF自定义用户库结构化制作控件

该文章详细介绍了如何创建一个名为ImageButton的自定义控件,该控件在不同状态下显示不同的图片,并提供了设置图片路径、宽度、高度以及控制状态的方法。通过使用DependencyProperty注册属性,并在XAML中定义样式和模板,实现了按钮的可视化定制。
摘要由CSDN通过智能技术生成

1、制作ImageButton
在这里插入图片描述

2、StateAble.cs

public enum StateAble : int
    {
        enable,
        disable
    }

3、ImageButton.cs

/// <summary>
    /// 按照步骤 1a 或 1b 操作,然后执行步骤 2 以在 XAML 文件中使用此自定义控件。
    ///
    /// 步骤 1a) 在当前项目中存在的 XAML 文件中使用该自定义控件。
    /// 将此 XmlNamespace 特性添加到要使用该特性的标记文件的根
    /// 元素中:
    ///
    ///     xmlns:MyNamespace="clr-namespace:WccLib"
    ///
    ///
    /// 步骤 1b) 在其他项目中存在的 XAML 文件中使用该自定义控件。
    /// 将此 XmlNamespace 特性添加到要使用该特性的标记文件的根
    /// 元素中:
    ///
    ///     xmlns:MyNamespace="clr-namespace:WccLib;assembly=WccLib"
    ///
    /// 您还需要添加一个从 XAML 文件所在的项目到此项目的项目引用,
    /// 并重新生成以避免编译错误:
    ///
    ///     在解决方案资源管理器中右击目标项目,然后依次单击
    ///     “添加引用”->“项目”->[选择此项目]
    ///
    ///
    /// 步骤 2)
    /// 继续操作并在 XAML 文件中使用控件。
    ///
    ///     <MyNamespace:CustomControl1/>
    ///
    /// </summary>
    public class ImageButton : Button
    {
        static ImageButton()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));
        }
        /// <summary>
        /// 图片路径
        /// </summary>
        public ImageSource Image
        {
            get { return (ImageSource)GetValue(ImageProperty); }
            set { SetValue(ImageProperty, value); }
        }

        public static readonly DependencyProperty ImageProperty =
            DependencyProperty.Register("Image",
                typeof(ImageSource),
                typeof(ImageButton),
                new PropertyMetadata(null));

        /// <summary>
        /// 控件enable时的图片路径
        /// </summary>
        public ImageSource Image_Enable
        {
            get { return (ImageSource)GetValue(Image_EnableProperty); }
            set { SetValue(Image_EnableProperty, value); }
        }

        public static readonly DependencyProperty Image_EnableProperty =
            DependencyProperty.Register("Image_Enable",
                typeof(ImageSource),
                typeof(ImageButton),
                new PropertyMetadata(null));

        /// <summary>
        /// 控件disable时的图片路径
        /// </summary>
        public ImageSource Image_Disable
        {
            get { return (ImageSource)GetValue(Image_DisableProperty); }
            set { SetValue(Image_DisableProperty, value); }
        }

        public static readonly DependencyProperty Image_DisableProperty =
            DependencyProperty.Register("Image_Disable",
                typeof(ImageSource),
                typeof(ImageButton),
                new PropertyMetadata(null));

        /// <summary>
        /// 图片宽度
        /// </summary>
        public double ImageWidth
        {
            get { return (double)GetValue(ImageWidthProperty); }
            set { SetValue(ImageWidthProperty, value); }
        }

        public static readonly DependencyProperty ImageWidthProperty =
            DependencyProperty.Register("ImageWidth",
                typeof(double),
                typeof(ImageButton),
                new PropertyMetadata(null));

        /// <summary>
        /// 图片高度
        /// </summary>
        public double ImageHeight
        {
            get { return (double)GetValue(ImageHeightProperty); }
            set { SetValue(ImageHeightProperty, value); }
        }

        public static readonly DependencyProperty ImageHeightProperty =
            DependencyProperty.Register("ImageHeight",
                typeof(double),
                typeof(ImageButton),
                new PropertyMetadata(null));

        /// <summary>
        /// 控件状态位
        /// </summary>
        public StateAble State
        {
            get { return (StateAble)GetValue(StateProperty); }
            set { SetValue(StateProperty, value); }
        }

        public static readonly DependencyProperty StateProperty =
            DependencyProperty.Register("State",
                typeof(StateAble),
                typeof(ImageButton),
                new PropertyMetadata(defaultValue: StateAble.enable,
                    propertyChangedCallback: OnPropertyChanged));

        private static void OnPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            ImageButton item = (ImageButton)sender;
            if (e.Property == StateProperty)
            {
                if (StateAble.enable == (StateAble)e.NewValue)
                {
                    item.Image = item.Image_Enable;
                    item.IsEnabled = true;
                }
                else if (StateAble.disable == (StateAble)e.NewValue)
                {
                    item.Image = item.Image_Disable;
                    item.IsEnabled = false;
                }
            }
        }
    }

4、ImageButton.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WccLib">
    <Style TargetType="{x:Type local:ImageButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ImageButton}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <StackPanel>
                            <Image Source="{TemplateBinding Image}" Width="{TemplateBinding ImageWidth}" Height="{TemplateBinding ImageHeight}" Stretch="Fill" Opacity="{TemplateBinding Opacity}"></Image>
                            <Label Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="{TemplateBinding Opacity}" FontSize="{TemplateBinding FontSize}"></Label>
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

5、Generic.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WccLib">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/WccLib;component/Themes/ImageButton.xaml"></ResourceDictionary>
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

6、调用

<wccl:ImageButton x:Name="btn_openWorkDistrict" Width="80" Height="80" ImageWidth="50" ImageHeight="50" Image="/Assets/Button/Open.png"
                                            Image_Enable="/Assets/Button/Open.png" Image_Disable="/Assets/Button/Open.png" State="enable"
                                            Content="打开" Foreground="#708AAE" Margin="5">
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

大浪淘沙胡

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

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

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

打赏作者

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

抵扣说明:

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

余额充值