WPF之创建无外观控件

1,定义无外观控件。

  •     定义默认样式,在其静态构造函数中调用DefaultStyleKeyProperty.OverrideMetadata()。
//设置默认样式
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ColorPicker), new FrameworkPropertyMetadata(typeof(ColorPicker)));
  •  在项目中创建Themes文件夹, 在Themes文件夹中创建资源字典:generic.xaml。/Themes/generic.xaml 此格式路径为规定格式不得修改,此路径字典中的样式将被自动识别为自定义控件的默认样式。
  • 样式必须指定适用的对象类型:TargetType
<Style TargetType="local:ColorPicker"> <!--必须指定类型-->
  • 在generic.xaml中合并位于themes/colorpicker.xaml的字典时,需要使用包含程序集的路径(assemblyName;component/themes/colorpicker.xaml),如果只是使用/themes/colorpicker.xaml虽然在运行时可以正常运行,但是在编辑状态下无法预览效果。

2,使用Vs生成无外观控件框架。

  • 选择自定义控件

  • 自动生成包含静态样式重写的静态构造函数 。
 public class ColorPicker : Control
    {
        
        static ColorPicker()
        {
            //设置默认样式
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ColorPicker), new FrameworkPropertyMetadata(typeof(ColorPicker)));
          
        }
    }
  • 自动创建Themes文件,以及Themes文件下的generic.xaml资源字典。

3,定义资源字典:colorpicker.xaml。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:无外观控件">
    <Style TargetType="local:ColorPicker"> <!--必须指定类型-->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:ColorPicker">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                        <Grid Margin="{TemplateBinding Padding}">
                            <Grid.RowDefinitions>
                                <RowDefinition ></RowDefinition>
                                <RowDefinition ></RowDefinition>
                                <RowDefinition ></RowDefinition>
                                <RowDefinition ></RowDefinition>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"></ColumnDefinition>
                                <ColumnDefinition Width="3*"></ColumnDefinition>
                                <ColumnDefinition Width="2*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid.Resources>
                                <Style TargetType="TextBlock">
                                    <Setter Property="VerticalAlignment" Value="Center"></Setter>
                                    <Setter Property="Margin" Value="5,0,0,0"></Setter>
                                </Style>
                                <Style TargetType="Slider">
                                    <Setter Property="VerticalAlignment" Value="Center"></Setter>
                                    <Setter Property="Margin" Value="0,5,5,5"></Setter>
                                    <Setter Property="Maximum" Value="255"></Setter>
                                    <Setter Property="Minimum" Value="0"></Setter>
                                    <Setter Property="SmallChange" Value="1"></Setter>
                                </Style>
                            </Grid.Resources>
                            <TextBlock Text="Alpha:"></TextBlock>
                            <Slider x:Name="PART_AlphaSlider" Grid.Column="1"></Slider>
                            <TextBlock Text="Red:" Grid.Row="1"></TextBlock>
                            <Slider x:Name="PART_RedSlider" Grid.Row="1" Grid.Column="1"></Slider>
                            <TextBlock Text="Green:" Grid.Row="2"></TextBlock>
                            <Slider x:Name="PART_GreenSlider" Grid.Row="2" Grid.Column="1"></Slider>
                            <TextBlock Text="Blue:" Grid.Row="3"></TextBlock>
                            <Slider x:Name="PART_BlueSlider" Grid.Row="3" Grid.Column="1"></Slider>
                            <Rectangle  Grid.Column="2" Grid.RowSpan="4">
                                <Rectangle.Fill>
                                    <SolidColorBrush x:Name="PART_RecBrush"></SolidColorBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

4,在generic.xaml中添加资源字典colorpicker.xaml。

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="无外观控件;component/Themes/colorpicker.xaml">
        </ResourceDictionary>
        <ResourceDictionary Source="无外观控件;component/Themes/FlipPanel.xaml"></ResourceDictionary>
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

5,编写代码

[TemplatePart(Name = "PART_AlphaSlider", Type = typeof(RangeBase))]//此特性无特殊意义,只是用于标识提示
    [TemplatePart(Name = "PART_RedSlider", Type = typeof(RangeBase))]
    [TemplatePart(Name = "PART_GreenSlider", Type = typeof(RangeBase))]
    [TemplatePart(Name = "PART_BlueSlider", Type = typeof(RangeBase))]
    [TemplatePart(Name = "PART_RecBrush", Type = typeof(SolidColorBrush))]
    public class ColorPicker : Control
    {
        //注册依赖属性
        public static readonly DependencyProperty AlphaProperty;
        public static readonly DependencyProperty RedColorProperty;
        public static readonly DependencyProperty GreenColorProperty;
        public static readonly DependencyProperty BlueColorProperty;
        public static readonly DependencyProperty ColorProperty;
        public static readonly RoutedEvent ColorChangedEvent;
        static ColorPicker()
        {
            //设置默认样式
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ColorPicker), new FrameworkPropertyMetadata(typeof(ColorPicker)));
            AlphaProperty = DependencyProperty.Register("Alpha", typeof(Byte), typeof(ColorPicker), new PropertyMetadata((byte)0, RedGreenBlueChangedCallBack));
            RedColorProperty = DependencyProperty.Register("Red", typeof(Byte), typeof(ColorPicker), new PropertyMetadata((byte)0, RedGreenBlueChangedCallBack));
            GreenColorProperty = DependencyProperty.Register("Green", typeof(Byte), typeof(ColorPicker), new PropertyMetadata((byte)0, RedGreenBlueChangedCallBack));
            BlueColorProperty = DependencyProperty.Register("Blue", typeof(Byte), typeof(ColorPicker), new PropertyMetadata((byte)0, RedGreenBlueChangedCallBack));
            ColorProperty = DependencyProperty.Register("Color", typeof(Color), typeof(ColorPicker), new PropertyMetadata(Colors.Yellow, ColorPropertyChanged));
            ColorChangedEvent = EventManager.RegisterRoutedEvent("ColorChanged", RoutingStrategy.Bubble, typeof(RoutedPropertyChangedEventHandler<Color>), typeof(ColorPicker));
        }

        public override void OnApplyTemplate()
        {
            
            //进行绑定设置

            RangeBase alpha = GetTemplateChild("PART_AlphaSlider") as RangeBase;
            RangeBase red = GetTemplateChild("PART_RedSlider") as RangeBase;
            RangeBase green = GetTemplateChild("PART_GreenSlider") as RangeBase;
            RangeBase blue = GetTemplateChild("PART_BlueSlider") as RangeBase;
            SolidColorBrush brush = GetTemplateChild("PART_RecBrush") as SolidColorBrush;
            alpha?.SetBinding(Slider.ValueProperty, new Binding(nameof(Alpha)) { Source = this });
            red?.SetBinding(Slider.ValueProperty, new Binding(nameof(Red)) { Source = this });
            green?.SetBinding(Slider.ValueProperty, new Binding(nameof(Green)) { Source = this });
            blue?.SetBinding(Slider.ValueProperty, new Binding(nameof(Blue)) { Source = this });
          //  this.SetBinding(ColorProperty, new Binding("Color") { Source = brush });
            BindingOperations.SetBinding(brush, SolidColorBrush.ColorProperty, new Binding(nameof(Color)) { Source = this });
            base.OnApplyTemplate();
        }

        private static void ColorPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            Color curColor = (Color)e.NewValue;
            ColorPicker picker = d as ColorPicker;
            picker.Alpha = curColor.A;
            picker.Red = curColor.R;
            picker.Green = curColor.G;
            picker.Blue = curColor.B;
            RoutedPropertyChangedEventArgs<Color> args = new RoutedPropertyChangedEventArgs<Color>((Color)e.OldValue, (Color)e.NewValue);
            args.RoutedEvent = ColorChangedEvent;
            picker.RaiseEvent(args);
        }

        private static void RedGreenBlueChangedCallBack(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ColorPicker picker = d as ColorPicker;
            Color curColor = picker.Color;
            byte val = (byte)e.NewValue;
            switch (e.Property.Name)
            {
                case "Alpha":
                    curColor.A = val;
                    break;
                case "Red":
                    curColor.R = val;
                    break;
                case "Green":
                    curColor.G = val;
                    break;
                case "Blue":
                    curColor.B = val;
                    break;
                default:
                    break;
            }
            picker.Color = curColor;
        }

        /// <summary>
        /// 设置颜色的Alpha值
        /// </summary>
        ///  [System.ComponentModel.Bindable(true)]
        [System.ComponentModel.Browsable(true)]
        [Category("颜色设置")]
        public byte Alpha
        {
            get
            {
                return (byte)this.GetValue(AlphaProperty);
            }
            set
            {
                this.SetValue(AlphaProperty, value);
            }
        }

        /// <summary>
        /// 设置颜色的Red值
        /// </summary>
        [Bindable(true), Browsable(true), Category("颜色设置")]
        public byte Red
        {
            get
            {
                return (byte)GetValue(RedColorProperty);
            }
            set
            {
                SetValue(RedColorProperty, value);
            }
        }
        /// <summary>
        /// 设置颜色的Green值
        /// </summary>
        [Bindable(true), Browsable(true), Category("颜色设置")]

        public byte Green
        {
            get
            {
                return (byte)GetValue(GreenColorProperty);
            }
            set
            {
                SetValue(GreenColorProperty, value);
            }
        }

        /// <summary>
        /// 设置颜色的Blue值
        /// </summary>
        [Bindable(true), Browsable(true), Category("颜色设置")]
        public byte Blue
        {
            get
            {
                return (byte)GetValue(BlueColorProperty);
            }
            set
            {
                SetValue(BlueColorProperty, value);
            }
        }

        /// <summary>
        /// 设置颜色值
        /// </summary>
        [Bindable(true), Browsable(true), Category("颜色设置")]
        public Color Color
        {
            get
            {
                return (Color)GetValue(ColorProperty);
            }
            set
            {
                SetValue(ColorProperty, value);
            }
        }
        //对事件进行包装
        /// <summary>
        /// 颜色变化完成事件
        /// </summary>
        public event RoutedPropertyChangedEventHandler<Color> ColorChanged
        {
            add
            {
                this.AddHandler(ColorChangedEvent, value);
            }
            remove
            {
                this.RemoveHandler(ColorChangedEvent, value);
            }
        }
    }

6,在UI中添加此控件。

  • 默认情况:
<local:ColorPicker Color="SkyBlue" Padding="5" BorderBrush="Black" BorderThickness="2"></local:ColorPicker>

  • 二次自定义控件模板:
<Window.Resources>
        <ControlTemplate x:Key="FancyColorPickerTemplate">
                <Border Background="LightGoldenrodYellow"
                BorderBrush="Black"
                BorderThickness="1">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                        </Grid.ColumnDefinitions>

                        <Grid.Resources>
                            <Style TargetType="{x:Type Slider}">
                                <Setter Property="Orientation" Value="Vertical"></Setter>
                                <Setter Property="TickPlacement" Value="TopLeft"></Setter>
                                <Setter Property="TickFrequency" Value="10"></Setter>
                                <Setter Property="Minimum" Value="0"></Setter>
                                <Setter Property="Maximum" Value="255"></Setter>
                                <Setter Property="Margin" Value="5"></Setter>
                            </Style>
                            <Style TargetType="{x:Type TextBlock}">
                                <Setter Property="Margin" Value="3"></Setter>
                                <Setter Property="FontSize" Value="10"></Setter>
                            </Style>
                        </Grid.Resources>

                        <Ellipse Grid.Column="0" Grid.RowSpan="2" 
                       Margin="10" Height="120" Stroke="LightGray" StrokeThickness="5">
                            <Ellipse.Fill>
                            <SolidColorBrush x:Name="PART_RecBrush"></SolidColorBrush>
                            </Ellipse.Fill>
                        </Ellipse>


                    <Slider Name="PART_RedSlider" Grid.Column="1"></Slider>
                        <TextBlock Grid.Row="1" Grid.Column="1">RED</TextBlock>
                    <Slider Name="PART_GreenSlider" Grid.Column="2"></Slider>
                        <TextBlock Grid.Row="1" Grid.Column="2">GREEN</TextBlock>
                    <Slider Name="PART_BlueSlider" Grid.Column="3"></Slider>
                        <TextBlock Grid.Row="1" Grid.Column="3">BLUE</TextBlock>


                    </Grid>

                </Border>
            </ControlTemplate>
        </Window.Resources>
  •  引用对象资源
<local:ColorPicker Template="{StaticResource FancyColorPickerTemplate}" Padding="5" Grid.Column="1" Margin="5" BorderBrush="BurlyWood" BorderThickness="2" Color="Red">

7,Demo链接

https://download.csdn.net/download/lingxiao16888/89253829?spm=1001.2014.3001.5501

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/588578.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

tomcat篇-windows 运行tomcat的startup.bat时,终端打印的中文显示为乱码

当运行Tomcat的startup.bat时&#xff0c;如果终端中中文显示为乱码&#xff0c;这通常是因为Tomcat使用的日志输出编码与Windows命令行默认的编码不匹配。针对这一问题&#xff0c;你可以尝试以下步骤来解决&#xff1a; 1、执行startup.bat&#xff0c;在输出的窗口右击&…

Android --- 网络请求

通常在 Android 中进行网络连接一般使用 Scoket 和HTTP&#xff0c;HTTP 请求方式比 Scoket 多。HTTP 请求一般采用原生的 HttpClient 和 HttpUrlConnection 的两种网络访问方式&#xff08;系统自带的&#xff09;。但是在 Android 5.0 的时候 Google 就不推荐使用 HttpClient…

【限免】雷达目标生成与探测研究项目【附MATLAB代码】

文章来源&#xff1a;微信公众号&#xff1a;EW Frontier 课题背景 该项目的目标是模拟FMCW雷达检测运动目标&#xff0c;然后执行信号处理功能&#xff0c;以估计模拟目标的距离和多普勒速度。 图1&#xff1a;雷达模拟和检测的项目工作流程 FMCW波形设计 根据系统要求设计…

JAVA Coding 规范

Coding 规范 文章目录 Coding 规范一.文件规范1.1 声明1.2 缩进1.3 空行1.4 空格1.5 对齐1.6 小括号1.7 花括号1.8 代码长度 二.命名规范2.1 命名总则2.2 命名空间2.3 类与接口2.4 方法命名2.5 属性命名2.6 常量命名2.7 变量命名 三.语句规范3.1 语句总则3.2 循环语句3.3 Switc…

windows rabbitMq安装

一、Erlang 环境准备 下载安装包 跟我们跑java项目&#xff0c;要装jdk类似。rabbitMQ是基于Erlang开发的&#xff0c;因此安装rabbitMQ服务器之前&#xff0c;需要先安装Erlang环境。 官网直接下载windows直装版本&#xff1a;https://www.erlang.org/downloads 无脑安装&a…

【CGALDotNet】CGAL的C#封装(C#调用编译好的CGAL的dll)

介绍 开源项目出处&#xff08;两个模块&#xff09;&#xff1a; 链接1&#xff1a;https://github.com/Scrawk/CGALDotNet/tree/master?tabreadme-ov-file 链接2&#xff1a;https://github.com/Scrawk/CGALDotNetGeometry 该项目提供了编译的、封装相关接口后的CGAL库&am…

C语言 | Leetcode C语言题解之第62题不同路径

题目&#xff1a; 题解&#xff1a; int uniquePaths(int m, int n) {long long ans 1;for (int x n, y 1; y < m; x, y) {ans ans * x / y;}return ans; }

“Unite“ > MacOS下很不错的网站转应用App的工具

前言 前不久在浏览mac论坛&#xff0c;无意了解到一款非常好的工具&#xff0c;可以将网站转换为app&#xff0c;考虑到我们现在的主要应用都从本地客户端转成web形式使用&#xff0c;但基于本能的使用习惯&#xff0c;还是希望有个快捷的访问信息&#xff0c;这个应用非常适合…

万兆以太网MAC设计(11)完整UDP协议栈仿真

文章目录 前言一、模块接口二、IP模块与ARP模块之间的联系三、整体协议栈仿真总结&#xff1a; 前言 目前除了巨帧处理逻辑之外&#xff0c;所有的准备工作都已经结束了&#xff0c;先进行整体的功能验证。 一、模块接口 所有模块接口皆采用AXIS数据流的形式&#xff0c;其中…

IDEA基于Maven构建项目

IDEA基于Maven构建项目 一、Maven简介 Apache Maven 是一个软件项目管理和理解工具。基于项目对象模型的概念&#xff08;POM&#xff09;&#xff0c;Maven 可以从中心信息中管理项目的构建、报告和文档。 Apache Maven 可以用于构建和管理任何基于 Java 的项目。 下载地址…

【Web】D^3CTF之浅聊d3pythonhttp——TE-CL请求走私

目录 step0 题目信息 step1 jwt空密钥伪造 step1.5 有关TE&CL的lab step2 TE-CL请求走私 payload1 payload2 step0 题目信息 注意到题目源码前端是flask写的&#xff0c;后端是web.py写的 frontend from flask import Flask, request, redirect, render_templat…

C#核心之面向对象-封装

面向对象-封装 文章目录 1、类和对象1、什么是类2、类的声明3、类声明语法4、类声明实例5、对象(类)6、实例化对象语法7、实例化对象 2、成员变量和访问修饰符1、成员变量2、访问修饰符3、成员变量的使用和初始值 3、成员方法1、成员方法声明2、成员方法的使用 4、构造函数和…

【工具类安装教程】IDEA Ui设计器JFormDesigner

1、下载插件 File->Settings->Plugins->JFormDesigner 2、注册教程 2.1注册机下载 链接&#xff1a;https://pan.baidu.com/s/1Rb1EMva5HIYbyBcYgCxIsw 提取码&#xff1a;6666 2.2找到目录 1、找到idea目录 2.3进入plugins目录 找到在JFormDesigner文件夹下lib文…

使用Gitbook生成电子书

背景 《Google工程实践文档》相对原文Google’s Engineering Practices documentation &#xff0c;部分内容过时了。需要更新中文版&#xff0c;并使用Gitbook把Markdown文件转换成对应的PDF电子书。   上一次生成PDF电子书是5年前&#xff0c;当时生成电子书的环境早已不在…

jenkins汉化不完全问题解决

jenkins安装完Localization:Chinese(Simplified)中文语言包后&#xff0c;发现是出现汉化不完全或者部分汉化的情况&#xff0c;如下图&#xff1a; 解决方法&#xff1a; 启动命令中指定语言 -Duser.languageen_US.UTF-8 或者 -Duser.languageC.UTF-8原因分析&#xff1a;安…

用户中心(下)

文章目录 计划登录逻辑接口简单说明cookie和session写代码流程后端逻辑层控制层测试用户管理接口 前端简化代码对接后端代理 计划 开发完成后端登录功能 &#xff08;单机登录 > 后续改造为分布式 / 第三方登录&#xff09;✔开发后端用户的管理接口 &#xff08;用户的查询…

南方Southmap4.0 一体成图软件

SouthMap 4.0 新增行业应用模块&#xff0c;实用工具箱扩展7大工具&#xff0c;集结8大模块&#xff0c;共45种实用功能&#xff0c;为水利、电力、道路施工等多应用场景提供数据生产的一站式解决方案。 SouthMap 4.0 新增行业应用模块&#xff0c;实用工具箱扩展7大工具&#…

前端素材库

大家好我是苏麟 , 今天推荐一个前端素材库 . 官网 : iconfont-阿里巴巴矢量图标库 这期就到这里 , 下期见!

【docker】docker compose 搭建私服

安装 Docker Registry 创建目录 mkdir -pv /usr/local/docker/registrymkdir -pv /usr/local/docker/data 创建 docker-compose.yml文件 进入目录创建docker-compose.yml cd /usr/local/docker/registrytouch docker-compose.yml 编辑docker-compose.yml vim docker-compo…

探索洗牌算法的魅力与杨辉三角的奥秘:顺序表的实际运用

目录 目录 前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; 洗牌算法 准备工作 买一副牌 洗牌 发牌 测试整体 &#x1f3af;&#x1f3af;很重要的一点 杨辉三角 总结 前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ …