C# Wpf双向绑定实例

Wpf中双向绑定处理需要两处

实例1:

1.前台Xaml中属性Binding 时Model指定 TwoWay

<Grid>
    <Ellipse  x:Name="ellipse"
        Fill="#FFF4F4F5" HorizontalAlignment="Left"
                Height="{Binding Path=Number,Mode=TwoWay}" Margin="50,55,0,0" Stroke="Black"
                VerticalAlignment="Top" Width="{Binding Path=Number,Mode=TwoWay}"/>
    <Slider x:Name="slider"  Margin="28,167,22,0" ValueChanged="slider_ValueChanged"
            VerticalAlignment="Top" TickPlacement="Both" Maximum="100" SmallChange="1"/>
    <Label x:Name="label" Content="{Binding Path=Number,Mode=TwoWay}" HorizontalAlignment="Left" Margin="110,150,0,0" VerticalAlignment="Top"/>
</Grid>

2.后台绑定的数据上线文实现INotifyPropertyChanged(向客户端发出某一属性值已更改的通知。)接口

/// <summary>
/// Thread6.xaml 的交互逻辑
/// </summary>
public partial class Thread6 : Window
{

    TestData testData = new TestData() { Number = 10 };
    public Thread6()
    {
        InitializeComponent();
        //创建双向绑定
        ellipse.DataContext = testData;
        label.DataContext = testData;
    }
    private void slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        testData.Number = (int)e.NewValue;
    }
}
public class TestData : INotifyPropertyChanged
{
    private int _Number;
    public int Number
    {
        get
        {
            return _Number;
        }
        set
        {
            _Number = value;
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("Number"));
            }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
}

显示结果:

实例2:使用Wpf的双向绑定机制,可以实现多线程修改UI

注:其他线程修改绑定数据时会通知到UI线程修改界面数据。

TestData类定义同上

Xaml定义同上

//创建双向绑定
ellipse.DataContext = testData;
//创建线程修改数据
Task.Run(() =>
{
    while (true)
    {
        testData.Number++;
        if (testData.Number == 200)
            testData.Number = 0;
        Thread.Sleep(100);
    }
});

时间: 2024-08-29 18:06:52

C# Wpf双向绑定实例的相关文章

WPF双向绑定

需求: 思想批量保存数据. 思路: 看了一下MVVM.发现只需要实现前台和后台数据的同步即可.也就是前台的文本框内容变化时后台的对象的属性也要变化就可以了. 参考: http://www.cnblogs.com/luluping/archive/2011/05/06/2039475.html 该网址只包括单个对象,而我的需要把集合Bind到Datagrid上,在DataGrid上修改后在整批提交.思路是一样的. 即:类需从INotifyPropertyChanged继承 再定义好ViewMode

js 双向绑定

//双向绑定实例 <input name="" ng-bind-123="name" /> function DataBinder( object_id ) { // Create a simple PubSub object var pubSub = { callbacks: {}, on: function( msg, callback ) { this.callbacks[ msg ] = this.callbacks[ msg ] || [];

C# Wpf集合双向绑定

msdn中   ObservableCollection<T> 类    表示一个动态数据集合,在添加项.移除项或刷新整个列表时,此集合将提供通知. 在许多情况下,所使用的数据是对象的集合. 例如,数据绑定中的一个常见方案是使用 ItemsControl(如 ListBox.ListView 或 TreeView)来显示记录的集合. 可以枚举实现 IEnumerable 接口的任何集合. 但是,若要设置动态绑定,以便集合中的插入或删除操作可以自动更新 UI,则该集合必须实现 INotifyCo

wpf样式绑定 行为绑定 事件关联 路由事件实例

代码说明:我要实现一个这样的功能  有三个window窗口  每个窗体有一个label标签  当我修改三个label标签中任意一个字体颜色的时候  其他的label标签字体颜色也变化 首先三个窗体不用贴代码了  直接添加三个就行了 样式绑定: 先添加数据源  代码如下: (注:为了防止propertyName硬编码写死   可以使用CallerMemberName附加属性来获取默认的属性名称 或者使用表达式目录树Expression<Func<T>>的方式来获取) 1 public

如何在双向绑定的Image控件上绘制自定义标记(wpf)

原文:如何在双向绑定的Image控件上绘制自定义标记(wpf) 我们的需求是什么? 答:需要在图片上增加一些自定义标记,例如:2个图片对比时,对相同区域进行高亮. 先上效果图: 设计思路 1.概述 1.通过TargeUpdated事件,重新绘制图片进行替换. 2.详细实现 1.我们先绑定ImageTargetUpdated事件. ? 1 <Image x:Name="DestImageControl" Source="{Binding Path=Source.Url,

Vue.js双向绑定的实现原理

Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少的代码实现那个hello world开篇示例. 参考文章:https://segmentfault.com/a/1190000006599500 一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义. var obj = {

css模拟下拉框,vue获取双向绑定的值

原生的下拉框用vue获取值双向绑定简直不要太好用,Duang的一下就行了 <div id="datePrice"> <select v-model="selected" id="dataSel" class="dataSel" v-on:change="change"> <option v-for="item in dateList" v-bind:valu

VUE JS 使用组件实现双向绑定

1.VUE 前端简单介绍  VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据set时,在数据属性上添加监控,这样数据发生改变时,就会触发他上面的watcher,而ANGULARJS 是使用脏数据检查来实现的. 另外VUEJS 入门比ANGULARJS 简单,中文文档也很齐全. 2.组件实现    在使用vue开发过程中,我们会需要扩展一些组件,在表单中使用,比如一个用户选择器.

ng1中 如何用双向绑定 实现单向绑定的初始时不显示双括号效果?

ng1中 如何用双向绑定 实现单向绑定(ng-bind就可以不显示{{}})的初始时不显示双括号效果? AngularJS 实例 页面加载时防止应用闪烁: <div ng-app=""> <p ng-cloak>{{ 5 + 5 }}</p> </div> 尝试一下 » 定义和用法 ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题. AngularJS 应用在加载时,文档可能