按照Vue写WPF(1):属性绑定

这篇具有很好参考价值的文章主要介绍了按照Vue写WPF(1):属性绑定。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

作为一个使用Vue非常熟练的C#全干工程师。当我在接触WPF的时候,我就一直想用Vue的想法去重写WPF框架。经过一个星期的琢磨,终于琢磨出来了如何优雅的入参。期间看了上百篇博客,浏览了一堆的视频教程。

代码

用户控件的cs
TestController.xaml

 public partial class TestControl : UserControl
    {
        /// <summary>
        /// 声明数据源
        /// </summary>
        public  TestControllerViewModel testControl = new TestControllerViewModel();


        /// <summary>
        /// 用于静态编译通过,根据我两天的试验,这个值是不会触发get和set指令的,就是个花瓶。
        /// </summary>
        public string TestTitle { get; set; }


        /// <summary>
        /// 用于声明依赖属性,不让只让直接传值,不让Bind传值
        /// </summary>
        public static readonly DependencyProperty TestTitleProperty =
        DependencyProperty.Register("TestTitle", typeof(string), typeof(TestControl), new PropertyMetadata("TestTitle",new PropertyChangedCallback((item,res) =>
        {
            //使用回调函数去重新设置数据源
            var model = (TestControl)item;
            model.testControl.TestTitle = res.NewValue as string;
        })));



        public TestControl()
        {

            InitializeComponent();
            //必须要这么写,不然Bind赋值传不进去
            ( this.Content as FrameworkElement ).DataContext = testControl;
        }
    }

TestController.xaml.cs
用户控件的xaml

<Grid Background="White">
    <StackPanel>
        <TextBlock Text="{Binding TestTitle}" FontSize="50"/>
        <!--<Button Content="按钮" FontSize="50" />-->
    </StackPanel>
</Grid>

TestControllerViewModel,数据源

 public class TestControllerViewModel
    {
        public string TestTitle { get; set; }

        

        public TestControllerViewModel()
        {
            TestTitle = "我是初始值";
        }
    }

主窗口

<Grid>
        <StackPanel>
            <!--这里面传的是"我是Bind赋值"-->
            <Views:TestControl TestTitle="{Binding TestTitle}" />
            <Views:TestControl TestTitle="我是直接赋值" />
            <Views:TestControl />
        </StackPanel>
    </Grid>

实现效果

按照Vue写WPF(1):属性绑定,vue.js,wpf,前端

代码逻辑

按照Vue写WPF(1):属性绑定,vue.js,wpf,前端

总结

期间遇到许多困难,WPF国内相关资料极少,英语也不知道怎么提问,GPT也没有给我想要的答案,难得我都要放弃了。因为我一直想像Vue那样优雅的入参,按照Vue的一切都是组件的想法去开发,因为这样极大的减少了开发的难度,降低了耦合,提高了组件的复用。

幸好我成功了,所有的努力没有白费。只要我能Bind入参,我就能按照Vue的逻辑重构WPF页面的开发。我相信我有这个能力。文章来源地址https://www.toymoban.com/news/detail-607812.html

到了这里,关于按照Vue写WPF(1):属性绑定的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WPF如果未定义绑定的属性,程序如何处理

    问题 :wpf中, Button IsEnabled=\\\"{Binding IsValid1}\\\"/Button ,如果没定义绑定的属性IsValid1,可以正常用吗 解答 :在 WPF 中,如果没有定义绑定的属性 IsValid1,会导致绑定失败,从而使 Button 的 IsEnabled 属性无法正常绑定。在这种情况下,Button 的 IsEnabled 属性将保持默认值,即为 true。

    2024年02月11日
    浏览(36)
  • 【WPF】解决无法对“xxx”类型的只读属性“xxx”进行TwoWay或OneWayToSource绑定

    System.InvalidOperationException:“无法对“AowisingWincc.ViewModels.DialogScanDevicesViewModel”类型的只读属性“IOTGtatewayDeviceId”进行 TwoWay 或 OneWayToSource 绑定。” 这个异常是由于在进行数据绑定时,尝试将只读属性(IOTGtatewayDeviceId)设置为双向(TwoWay)或者从目标到源(OneWayToSource)的绑

    2024年02月04日
    浏览(41)
  • WPF绑定之道:为何选择属性而非字段,提升灵活性与可控性

      概述: WPF支持绑定到对象的属性而不是字段,主要因为属性提供了更多控制和扩展性。属性包含get和set方法,支持数据验证和通知属性更改,而字段通常被认为是内部实现。使用属性使WPF能够更灵活、可控地与数据交互,提高代码的可读性和可维护性。 WPF(Windows Presenta

    2024年03月25日
    浏览(47)
  • WPF 多值绑定(MultiBinding)与多属性触发器(MultiTrigger)与多数据触发器(MultiDataTrigger)

    当一个控件的某个属性需要绑定到多个值的时候,需要使用MultiBinding. 例子1 一个文本显示Person的Name和Age 例子2 当1,2,3都被选中时,下面的红色框隐藏,不使用后台代码逻辑。 这个时候,使用MultiBinding+MultiValueConverter可实现需求 首先定义多值转换器: XAML如下: 与Trigger属性对

    2024年02月05日
    浏览(46)
  • vue学习之属性绑定

    内容渲染 采用 :进行属性渲染 创建 demo3.html,内容如下 效果展示

    2024年02月09日
    浏览(36)
  • Vue3-属性绑定、定时任务

    2024年02月07日
    浏览(42)
  • WPF基础入门-Class4-WPF绑定

    Class4:WPF绑定 一、简单绑定数据 1、cs文件中设置需要绑定的数据: 2、编写xaml绑定 3、效果显示: 二、控件绑定 1、 Binding ElementName :绑定的元素 2、 Path=绑定的属性 3、 Mode :绑定的模式,default双向榜单TwoWay Mode绑定模式,onetime只改变一次 default默认双向 OneWay只能受到影响

    2024年02月11日
    浏览(37)
  • wpf数据绑定之元素、资源、后台绑定

            wpf前端的数据绑定主要分为元素、资源以及后台数据三种,元素可以简单的理解为前端的空间数据绑定,资源是在resource里找数据,而后台就是跟cs文件之间的数据互相传递。           先说下元素吧,也就是控件元素,因为代码比较简单,就不上效果了,自己可以

    2024年02月04日
    浏览(58)
  • phpstorm添加vue 标签属性绑定提示和提示vue的方法提示

    把上面这些文字粘贴到点击右下角放大按钮 后的文本框里,然后保存即可实现标签属性提示 下面是提示js方法,把本地的vue.js 引入到编辑器即可

    2024年02月13日
    浏览(42)
  • Winform/WPF利用CefSharp集成vue开发

    有时候因为各种原因,可能在开发winform或wpf项目的时候需要嵌入web项目,而目前vue在web开发中还是非常流行的,今天有空琢磨了一下怎么在winform中集成vue进行开发,当然,winform能实现,wpf也是一样的。 目前希望达到的效果是,能够在winform中显示web界面,并且能够与vue中的

    2024年02月08日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包