WPF 附加属性+控件模板，完成自定义控件。建议观看HandyControl源码

news2024/12/22 18:51:45

文章目录

  • 相关连接
  • 前言
  • 需要实现的效果
  • 附加属性
    • 添加附加属性，以Test修改FontSize为例
    • 依赖属性使用
      • 触发器使用
      • 直接操控
    • 结论
  • 控件模板，在HandyControl的基础上面进行修改
    • 参考HandyControl的源码
    • 控件模板原型
    • 控件模板
  • 结论

相关连接

WPF控件模板(6)

WPF 附加属性

WPF教程：附加属性

前言

今天说服了领导用WPF开发前端，原因就是开发相对来说比较方便，写小项目就不用前后端分离什么的了。反正就是有个机会写WPF了，真开心。我已经写了一年的Uniapp了

需要实现的效果

就是想写一个简单的变色控件。
在这里插入图片描述

附加属性

如果想知道附加属性，就得先了解依赖属性。详细的可以看我这篇文章

WPF 用户控件依赖属性赋值

添加附加属性，以Test修改FontSize为例

知道了依赖属性之后，我解释一下附加属性是什么意思。附加属性就是为了方便在原有的控件基础上面进行细微的修改。我们先保证编译通过

附加属性的快捷键是propa

简单给TextBox添加一个附加属性

    public partial class TextBlockExtension
    {



        public static int GetTest(DependencyObject obj)
        {
            return (int)obj.GetValue(TestProperty);
        }

        public static void SetTest(DependencyObject obj, int value)
        {
            obj.SetValue(TestProperty, value);
        }

        // Using a DependencyProperty as the backing store for Test.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TestProperty =
            DependencyProperty.RegisterAttached("Test", typeof(int), typeof(TextBox), new PropertyMetadata(10));
        
        
    }

这样我们就能编译通过了。

<TextBlock Text="用户"  wpfEx:TextBlockExtension.Test="2"/>

在这里插入图片描述

依赖属性使用

依赖属性有两种使用方法

触发器使用

样式定义

    <!--一个简单的FontSize修改-->
    <Style x:Key="UserSelection"
           TargetType="TextBlock">
        <!--因为Triggers只有等于判断，所以这里简单写了一下-->
        <Style.Triggers>
            <Trigger Property="wpfEx:TextBlockExtension.Test"
                     Value="10">
                <Setter Property="FontSize"
                        Value="10" />
            </Trigger>
            <Trigger Property="wpfEx:TextBlockExtension.Test"
                     Value="20">
                <Setter Property="FontSize"
                        Value="20" />
            </Trigger>
        </Style.Triggers>
    </Style>

简单使用

 <TextBlock Text="用户"
            wpfEx:TextBlockExtension.Test="10" Style="{StaticResource UserSelection}">
     
 </TextBlock>
 <TextBlock Text="用户"
            wpfEx:TextBlockExtension.Test="20"
            Style="{StaticResource UserSelection}">
 </TextBlock>

在这里插入图片描述

直接操控

附加属性修改

//如果想直接操控元素，得在PropertyMetadata进行操控。记得设置初始值
public static readonly DependencyProperty TestProperty =
    DependencyProperty.RegisterAttached("Test", typeof(int), typeof(TextBox), new PropertyMetadata(10,(s, e) =>
    {
        //s是控件本身，
        var mdp = s as TextBlock;
        //如果控件是该元素的父组件，类似于Grid和DockPanel，就使用Parent来寻找，这里不展开
        //var mdpParent = (s as FrameworkElement).Parent as TextBlock;
        if (mdp != null && e.NewValue != null)
        {
            mdp.FontSize = (int)e.NewValue;
        }
    }));

<!--如果想要预览生效需要重新编译一下-->
<TextBlock Text="用户"
           wpfEx:TextBlockExtension.Test="15">

</TextBlock>
<TextBlock Text="用户"
           wpfEx:TextBlockExtension.Test="20">
</TextBlock>
<!--因为我们设置了默认值为10，所以这里是10-->
<TextBlock Text="用户">
</TextBlock>
<!--优先级还是依赖属性高，所以这里是30而不是默认值10-->
<TextBlock Text="用户" FontSize="30">
</TextBlock>

在这里插入图片描述

结论

附加属性和依赖属性差不多，就是声明麻烦一点。因为Get,Set是需要额外写的。

控件模板，在HandyControl的基础上面进行修改

控件模板一般用于按钮，我们只要会按钮的控件模板就可以了。

WPF控件模板(6)

参考HandyControl的源码

HandyControl 页面

HandyControl的Button有IconButton的样式源码。看一下还是挺有收获的。

在这里插入图片描述
参考样式代码

 <Style x:Key="ButtonDashedBaseStyle" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
     <Setter Property="Background" Value="Transparent"/>
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="Button">
                 <hc:DashedBorder BorderDashArray="3,2" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="Transparent" CornerRadius="{Binding Path=(hc:BorderElement.CornerRadius),RelativeSource={RelativeSource TemplatedParent}}">
                     <StackPanel Orientation="Horizontal" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}">
                         <Path x:Name="PathMain" Width="{TemplateBinding hc:IconElement.Width}" Height="{TemplateBinding hc:IconElement.Height}" Fill="{TemplateBinding Foreground}" SnapsToDevicePixels="True" Stretch="Uniform" Data="{TemplateBinding hc:IconElement.Geometry}"/>
                         <ContentPresenter x:Name="ContentPresenterMain" RecognizesAccessKey="True" VerticalAlignment="Center" Margin="6,0,0,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                     </StackPanel>
                 </hc:DashedBorder>
                 <ControlTemplate.Triggers>
                     <Trigger Property="Content" Value="{x:Null}">
                         <Setter Property="Visibility" Value="Collapsed" TargetName="ContentPresenterMain"/>
                     </Trigger>
                     <Trigger Property="hc:IconElement.Geometry" Value="{x:Null}">
                         <Setter Property="Visibility" Value="Collapsed" TargetName="PathMain"/>
                         <Setter Property="Margin" Value="0" TargetName="ContentPresenterMain"/>
                     </Trigger>
                 </ControlTemplate.Triggers>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>

在这里插入图片描述

控件模板原型

我们想写一个控件模板，如果不是很熟练，我们就先把控件模板的原型写出来，这样更利于理解。

 <DockPanel>
     <!--这里仿照HandyControl，使用Gemotery。IconPacks怎么转Gemotery可以看我的文章-->


     <Border DockPanel.Dock="Top"
             Width="50"
             Height="50"
             CornerRadius="25"
             Background="DeepSkyBlue">
         <Path Data="{wpfEx:MaterialGeometry Kind=BellRing}"
               HorizontalAlignment="Stretch"
               VerticalAlignment="Stretch"
               SnapsToDevicePixels="True"
               Stretch="Uniform"
               Width="25"
               Height="25"
               Fill="White" />
     </Border>

     <TextBlock Text="TIM登录"
                HorizontalAlignment="Center" />
 </DockPanel>

在这里插入图片描述

控件模板

<Style x:Key="UserSelection"
       TargetType="RadioButton"
       BasedOn="{StaticResource {x:Type RadioButton}}">
    <Setter Property="Template">
        <Setter.Value>
            <!--先按照之前的样式粘贴一下-->
            <ControlTemplate TargetType="RadioButton">
                <DockPanel>
                    <Border DockPanel.Dock="Top"
                            Width="50"
                            Height="50"
                            CornerRadius="25"
                            Background="DeepSkyBlue">
                        <Path Data="{wpfEx:MaterialGeometry Kind=BellRing}"
                              HorizontalAlignment="Stretch"
                              VerticalAlignment="Stretch"
                              SnapsToDevicePixels="True"
                              Stretch="Uniform"
                              Width="25"
                              Height="25"
                              Fill="White" />
                    </Border>
                    <ContentPresenter x:Name="ContentPresenterMain"
                                      RecognizesAccessKey="True"
                                      VerticalAlignment="Center"
                                      Margin="6,0,0,0"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                </DockPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

在这里插入图片描述

然后里面能绑定的就绑定。也是照着HandyControl改的。注意这里的Banding用的是TemplateBinding

在这里插入图片描述

修改好的效果

<!--一个简单的FontSize修改-->
<Style x:Key="UserSelection"
       TargetType="RadioButton"
       BasedOn="{StaticResource {x:Type RadioButton}}">
    <Setter Property="Template">
        <Setter.Value>
            <!--先按照之前的样式粘贴一下-->
            <ControlTemplate TargetType="RadioButton">
                <DockPanel>
                    <Border DockPanel.Dock="Top"
                            Width="{TemplateBinding hc:IconElement.Width}"
                            Height="{TemplateBinding hc:IconElement.Height}"
                            CornerRadius="25"
                            Background="{TemplateBinding Foreground}">
                        <Path Data="{TemplateBinding hc:IconElement.Geometry}"
                              HorizontalAlignment="Stretch"
                              VerticalAlignment="Stretch"
                              SnapsToDevicePixels="True"
                              Stretch="Uniform"
                              Width="25"
                              Height="25"
                              Fill="{TemplateBinding Background}" />
                    </Border>
                    <ContentPresenter x:Name="ContentPresenterMain"
                                      RecognizesAccessKey="True"
                                      VerticalAlignment="Center"
                                        
                                      Margin="6,0,0,0"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                </DockPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

简单使用

<RadioButton Content="TIM登录"
             GroupName="UserSelect"
             Style="{StaticResource UserSelection}"
             Foreground="DeepSkyBlue"
             Background="White"
             hc:IconElement.Geometry="{wpfEx:MaterialGeometry Kind=AbTesting}" />

在这里插入图片描述

结论

HandyControl的源码看了真的是打开眼界，但是WPF的Xaml有一个无法在内部简单计算的问题。比如我想Witdh=Height = CornerRadius*2。我可能就要写个触发器了。我后面回去测试一下有没有方法可以在Xaml里面简单计算的。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Android之UI Automator框架源码分析（第九篇：UiDevice获取UiAutomation对象的过程分析）

Android之UI Automator框架源码分析（第九篇：UiDevice获取UiAutomation对象的过程分析）

前言 通过UiDevice的构造方法&#xff0c;UiDevice对象持有的几个对象一部分是在构造方法中创建的&#xff08;初始化&#xff09;&#xff0c;它持有的每个对象都是分析的重点 备注&#xff1a;当前对象持有的对象&#xff0c;它的位置一般在实例变量创建时或者构造方法中&…
阅读更多...
ChatGPT国内快速上手指南

ChatGPT国内快速上手指南

ChatGPT简介 ChatGPT是由OpenAI团队研发的自然语言处理模型&#xff0c;该模型在大量的互联网文本数据上进行了预训练&#xff0c;使其具备了深刻的语言理解和生成能力。 GPT拥有上亿个参数&#xff0c;这使得ChatGPT在处理各种语言任务时表现卓越。它的训练使得模型能够理解上…
阅读更多...
044-WEB攻防-PHP应用SQL盲注布尔回显延时判断报错处理增删改查方式

044-WEB攻防-PHP应用SQL盲注布尔回显延时判断报错处理增删改查方式

044-WEB攻防-PHP应用&SQL盲注&布尔回显&延时判断&报错处理&增删改查方式 #知识点&#xff1a; 1、PHP-MYSQL-SQL注入-方式增删改查 2、PHP-MYSQL-SQL注入-布尔&延迟&报错 3、PHP-MYSQL-SQL注入-数据回显&报错处理 演示案例&#xff1a; ➢PHP…
阅读更多...
不懂且不会用循环OB块的plc工程师不是优秀的plc工程师

不懂且不会用循环OB块的plc工程师不是优秀的plc工程师

本章介绍了循环中断OB的功能、与循环中断OB相关的指令、执行过程以及举例说明的内容。 循环中断 OB ● 循环中断 OB 的功能 循环中断 OB 在经过一段固定的时间间隔后执行相应的中断 OB 中的程序。 S7-1500 最多支持 20 个循环中断 OB &#xff0c;在创建循环中断 OB 时设定…
阅读更多...
✅技术社区项目—JWT身份验证

✅技术社区项目—JWT身份验证

通用的JWT鉴权方案 JWT鉴权流程 基本流程分三步: ● 用户登录成功之后&#xff0c;后端将生成的jwt返回给前端&#xff0c;然后前端将其保存在本地缓存; ● 之后前端与后端的交互时&#xff0c;都将iwt放在请求头中&#xff0c;比如可以将其放在Http的身份认证的请求头 Author…
阅读更多...
Mysql 高可用解决方案

Mysql 高可用解决方案

1.环境说明 操作系统&#xff1a;centos7.7 主服务器&#xff1a;node2(192.168.1.102) 从服务器&#xff1a;node3(192.168.1.103) keepalived中虚拟ip(VIP):192.168.1.100 2.准备事项 主库和从库数据库的版本一致把主库的数据同步给从库一份 3.主库配置 3.1 编辑MySQL配…
阅读更多...
【踩坑】修复报错 you should not try to import numpy from its source directory

【踩坑】修复报错 you should not try to import numpy from its source directory

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.cn] 报错如下&#xff1a; 修复方法一&#xff1a; pip install pyinstaller5.9 修复方法二&#xff1a; pip install numpy1.24.1
阅读更多...
ActiveMq PUT任意文件上传漏洞（CVE-2016-3088）漏洞复现

ActiveMq PUT任意文件上传漏洞（CVE-2016-3088）漏洞复现

ActiveMQ ActiveMQ Web控制台分为三个应用程序&#xff1a;其中admin&#xff0c;api和fileserver&#xff0c;其中admin是管理员页面&#xff0c;api是界面&#xff0c;fileserver是用于存储文件的界面&#xff1b;admin和api需要先登录才能使用&#xff0c;fileserver不需要…
阅读更多...
Three.js 基础属性

Three.js 基础属性

三维坐标系 辅助观察坐标系 THREE.AxesHelper()的参数表示坐标系坐标轴线段尺寸大小&#xff0c;你可以根据需要改变尺寸。 // AxesHelper&#xff1a;辅助观察的坐标系 const axesHelper new THREE.AxesHelper(150); scene.add(axesHelper);材质半透明设置 设置材质半透明…
阅读更多...
【行业会议】优积科技应邀参加住建部模块建筑企业2023年工作座谈会

【行业会议】优积科技应邀参加住建部模块建筑企业2023年工作座谈会

2023年3月2日&#xff0c;优积建筑科技发展&#xff08;上海&#xff09;有限公司&#xff08;以下简称“优积科技”&#xff09;应邀参加由住房和城乡建设部科技与产业化发展中心&#xff08;以下简称“住建部科技与产业化中心”&#xff09;组织召开的模块建筑企业2023年工作…
阅读更多...
022 基于Spring Boot的校园二手交易平台（源码+数据库+10000字论文）

022 基于Spring Boot的校园二手交易平台（源码+数据库+10000字论文）

部分代码地址&#xff1a; https://github.com/XinChennn/xc022-Used-Trading-Platform2 基于Spring Boot的校园二手交易平台&#xff08;源码数据库10000字论文&#xff09; 一、系统介绍 基于Spring Boot的校园二手交易网站&#xff0c;方便学生处理自己的旧物&#xff0c…
阅读更多...
【域适应论文汇总】未完结

【域适应论文汇总】未完结

文章目录 DANN&#xff1a;Unsupervised Domain Adaptation by Backpropagation (2015)TADA&#xff1a;Transferable Attention for Domain Adaptation&#xff08;2019 AAAI&#xff09;1 局部注意力迁移&#xff1a;Transferable Local Attention2 全局注意力迁移&#xff1…
阅读更多...
阿里云2核4G5M服务器199元一年性能测评

阿里云2核4G5M服务器199元一年性能测评

阿里云服务器ECS u1实例&#xff0c;2核4G&#xff0c;5M固定带宽&#xff0c;80G ESSD Entry盘优惠价格199元一年&#xff0c;性能很不错&#xff0c;CPU采用Intel Xeon Platinum可扩展处理器&#xff0c;购买限制条件为企业客户专享&#xff0c;实名认证信息是企业用户即可&a…
阅读更多...
2024年开学季推荐：数码装备购物清单，校园生活必备神器

2024年开学季推荐：数码装备购物清单，校园生活必备神器

随着开学的钟声即将敲响&#xff0c;全新的学年画卷正在缓缓展开。它不仅承载着我们对知识的渴望和对未来的憧憬&#xff0c;更是我们挥洒青春、展示才华的舞台。在这个充满无限可能的新起点&#xff0c;每一位学子都怀着期待&#xff0c;准备踏上成长的征程。然而为了更好地适…
阅读更多...
Linux忘记mysql密码

Linux忘记mysql密码

Linux忘记mysql密码 我们在linux操作系统上&#xff0c;输入密码 出现这样的错误 解决 1.首先我们需要修改/etc/my.cnf vim /etc/my.cnf2.我们需要再文件的最后一行添加 skip-grant-tables跳过权限表 3.我们保存文件&#xff0c;之后重启mysql service mysqld restart4.…
阅读更多...
阿里云ECS u1实例2核4G5M固定带宽80G ESSD Entry盘性能测评

阿里云ECS u1实例2核4G5M固定带宽80G ESSD Entry盘性能测评

阿里云服务器ECS u1实例&#xff0c;2核4G&#xff0c;5M固定带宽&#xff0c;80G ESSD Entry盘优惠价格199元一年&#xff0c;性能很不错&#xff0c;CPU采用Intel Xeon Platinum可扩展处理器&#xff0c;购买限制条件为企业客户专享&#xff0c;实名认证信息是企业用户即可&a…
阅读更多...
暂时的停更

暂时的停更

最近因学业紧张&#xff0c;暂时停更&#xff0c;但还是会上线 我的专栏&#xff1a;C教程 感谢大家的支持
阅读更多...
浅谈 目录项(dentry) 、 inode 、硬链接

浅谈 目录项(dentry) 、 inode 、硬链接

文章目录 名词解释inode 介绍dentry 介绍硬链接 介绍 名词解释 inode&#xff1a;索引节点&#xff0c;是一个结构体&#xff0c;存储文件的属性等信息。 dentry&#xff1a;目录项&#xff0c;是一个 dir_entry 结构体&#xff0c;重要成员有文件的 inode 索引号&#xff0c;…
阅读更多...
[NPUCTF2020]ezinclude ---不会编程的崽

[NPUCTF2020]ezinclude ---不会编程的崽

做完这题&#xff0c;又get到一个新的知识点。上界面 源代码里有线索 secret是秘密值&#xff0c;name与pass应该是可以控制的变量。抓个包看看 发送与请求有hash值&#xff0c;没猜错应该是用来验证的。拿去爆破了&#xff0c;啥也没爆破出来。先传参 右边的hash值改变了。猜想…
阅读更多...
Transformer视频理解学习的笔记

Transformer视频理解学习的笔记

今天复习了Transformer,ViT, 学了SwinTransformer, 还有观看了B站视频理解沐神系列串讲视频上&#xff08;24.2.26未看完,明天接着看&#xff09; 这里面更多论文见&#xff1a;https://github.com/mli/paper-reading/ B站视频理解沐神系列串讲视频下&#xff08;明天接着看&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023