【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示

简介: Wpf开发过程中,最经常使用的功能之一,就是用户控件(UserControl)了。用户控件可以用于开发用户自己的控件进行使用,甚至可以用于打造一套属于自己的UI框架。依赖属性(DependencyProperty)是为用户控件提供可支持双向绑定的必备技巧之一,同样用处也非常广泛。

 

前言:


Wpf开发过程中,最经常使用的功能之一,就是用户控件(UserControl)了。用户控件可以用于开发用户自己的控件进行使用,甚至可以用于打造一套属于自己的UI框架。依赖属性(DependencyProperty)是为用户控件提供可支持双向绑定的必备技巧之一,同样用处也非常广泛。


以下案例,为了图方便,我以之前的博客的基础为模板,直接进行开发。如有遇到疑问的地方,可以查看先前的博客(WPF使用prism框架+Unity IOC容器实现MVVM双向绑定和依赖注入)的文章做个前瞻了解:

https://www.cnblogs.com/weskynet/p/15967764.html

 

以下是正文(代码在文末)

 

0、配置环境

客户端环境:WIN 10 专业版

VS开发环境:VS 2022 企业版

运行时环境:.NET 6

开发语言:C#

前端框架:WPF

 

1、新建了一个用户控件,里面画了一个实心圆,以及一个文本控件的组合,当作我要实验使用的用户控件(TestUserControl)。

1995789-20220519215732345-436466032.png

 

2、在主窗体里面进行引用,可以看到引用以后,会在工具箱上显示新增的用户控件

1995789-20220519215745907-870393897.png

 

3、为了测试方便,我直接在先前的Lo'gin页面直接进行添加该用户控件,效果如下。

 1995789-20220519215758858-672775519.png


4、运行效果如下。由于该用户控件没有设置过任何属性,所以现在是没有任何事件、也没有办法更改默认文本等信息的。

1995789-20220519215809977-357020451.png

 

5、接下来进行设置属性,用于可以直接更改TextName属性的Text值。设置一个MyText属性,用于可以获取和设置用户控件内的TextBlock的Text值。

1995789-20220519215821223-236753713.png

 

6、然后可以在Xaml里面直接通过更改MyText的属性,来更新显示的Text值。如下图所示,设置MyText属性后,设置值为666,同步更新成666了。

1995789-20220519215831824-831144402.png


7、但是如果想要实现双向绑定,其实还不太够,直接Binding会提示错误XDG0062:Object of type 'System.Windows.Data.Binding' cannot be converted to type 'System.String'. 如图。

1995789-20220519215844442-1738367548.png

 

8、以上问题可以通过自定义依赖属性来解决。在用户控件的设计器交互代码类(TestUserControl)里面,新增以下代码,功能如图所示。


1995789-20220519215856756-1172889572.png

9、现在在xaml里面,设置Binding就不会提示错误了。

 1995789-20220519215907748-25531993.png

 

10、并且也可以直接设置值,效果同上面设置属性以后直接写值效果一样。

1995789-20220519215918755-158844799.png

 

11、在Login页面的ViewModel里面,新增属性提供给双向绑定使用。

1995789-20220519215929157-1009471125.png

 

12、设置MyText进行Binding到刚刚写的ViewModel的属性TestText上。

1995789-20220519215941692-1428140548.png


13、运行效果如下图所示,说明双向绑定成功了。

1995789-20220519215955149-202656843.png

 

14、接下来对用户控件设置单击事件的双向绑定。先设置Command有关的依赖属性。

1995789-20220519220007278-1505922318.png

 

15、一些有关方法和其他的属性设置,就不做过多介绍了,看图说话。1995789-20220519220025147-919788471.png

1995789-20220519220045692-1373053181.png


1995789-20220519220057468-856113022.png

 

16、然后是关键的一步,需要设置单机事件与Command属性关联。当然,Command是命名得来的,所以也可以使用其他的命名,也都是OK的,不用在意这些细节,只是默认情况下,单击都喜欢用Command。如果自带的控件也没有双击、右键等双向绑定,也可以通过设置依赖属性来实现。

1995789-20220519220116204-1862133340.png

 

17、在ViewModel里面定义单击事件以及有关执行的方法。方法为一个弹出消息框。


1995789-20220519220127171-998660546.png

 

18、使用Command进行绑定事件名称。

1995789-20220519220139344-1429931131.png

 

19、运行,并单击实心圆的效果,并弹出提示框,说明单击事件通过依赖属性进行设置成功。

1995789-20220519220150304-1951494457.png


20、接下来测试一下带参数的事件。在viewmodel里面,对刚才无参数的事件,改为带一个string参数的。

1995789-20220519220201547-61516150.png

 

21、在xaml里面,传入一个字符串参数,就叫 Hello world

1995789-20220519220220854-1905759145.png

 

22、运行,并点击实心圆后效果如图所示,说明带参数也是OK的。

1995789-20220519220231663-1952222129.png

 

23、其他套路如出一辙,大佬们可以自行尝试,例如通过设置背景依赖属性,变更实心圆的背景,而不是整个用户控件(正方形)的背景。这部分本来也要写一个给大佬们压压惊,由于时间关系,大佬们可以自己尝试玩一下。


提示:背景 Background是系统自带的,所以需要new。通过属性依赖进行更改圆的颜色,而不是背景色。有兴趣的大佬或者需要学习的,可以动手玩一玩,加深印象。

 

以上就是该文章的全部内容,如果对你有帮助,欢迎大佬点赞、留言与转发。如需转发,请注明我的博客出处:

https://www.cnblogs.com/weskynet/p/16290422.html


目录
相关文章
|
3月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
|
3月前
|
C# 开发者 Windows
一款基于Fluent设计风格、现代化的WPF UI控件库
一款基于Fluent设计风格、现代化的WPF UI控件库
|
3月前
|
C# Windows
WPF中如何使用HandyCotrol控件库
WPF中如何使用HandyCotrol控件库
191 1
|
3月前
|
C# 开发者 Windows
全面指南:WPF无障碍设计从入门到精通——让每一个用户都能无障碍地享受你的应用,从自动化属性到焦点导航的最佳实践
【8月更文挑战第31天】为了确保Windows Presentation Foundation (WPF) 应用程序对所有用户都具备无障碍性,开发者需关注无障碍设计原则。这不仅是法律要求,更是社会责任,旨在让技术更人性化,惠及包括视障、听障及行动受限等用户群体。
81 0
|
3月前
|
C# 前端开发 UED
WPF数据验证实战:内置控件与自定义规则,带你玩转前端数据验证,让你的应用程序更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,数据验证是确保输入正确性的关键环节。前端验证能及时发现错误,提升用户体验和程序可靠性。本文对比了几种常用的WPF数据验证方法,并通过示例展示了如何使用内置验证控件(如`TextBox`)及自定义验证规则实现有效验证。内置控件结合`Validation`类可快速实现简单验证;自定义规则则提供了更灵活的复杂逻辑支持。希望本文能帮助开发者更好地进行WPF数据验证。
111 0
|
3月前
|
C# UED 定位技术
WPF控件大全:初学者必读,掌握控件使用技巧,让你的应用程序更上一层楼!
【8月更文挑战第31天】在WPF应用程序开发中,控件是实现用户界面交互的关键元素。WPF提供了丰富的控件库,包括基础控件(如`Button`、`TextBox`)、布局控件(如`StackPanel`、`Grid`)、数据绑定控件(如`ListBox`、`DataGrid`)等。本文将介绍这些控件的基本分类及使用技巧,并通过示例代码展示如何在项目中应用。合理选择控件并利用布局控件和数据绑定功能,可以提升用户体验和程序性能。
67 0
|
3月前
|
开发框架 前端开发 JavaScript
WPF应用开发之控件动态内容展示
WPF应用开发之控件动态内容展示
|
3月前
|
C#
WPF 自定义可拖动标题栏
WPF 自定义可拖动标题栏
50 0
|
3月前
|
前端开发 C#
wpfui:一个开源免费具有现代化设计趋势的WPF控件库
wpfui:一个开源免费具有现代化设计趋势的WPF控件库
137 0
|
3月前
|
开发框架 前端开发 C#
使用WPF开发自定义用户控件,以及实现相关自定义事件的处理
使用WPF开发自定义用户控件,以及实现相关自定义事件的处理