WPF双向绑定

需求:

思想批量保存数据.

思路:

看了一下MVVM.发现只需要实现前台和后台数据的同步即可.也就是前台的文本框内容变化时后台的对象的属性也要变化就可以了.

参考:

http://www.cnblogs.com/luluping/archive/2011/05/06/2039475.html

该网址只包括单个对象,而我的需要把集合Bind到Datagrid上,在DataGrid上修改后在整批提交.思路是一样的.

即:类需从INotifyPropertyChanged继承

再定义好ViewModel,窗体和ViewModel 绑上就可以了.

  public class Person : INotifyPropertyChanged
    {

        public event PropertyChangedEventHandler PropertyChanged;

        private string name;
        public string Name
        {
            get
            {
                return name;
            }
            set
            {
                name = value;
                if(this.PropertyChanged != null)
                {
                    this.PropertyChanged.Invoke(this,new PropertyChangedEventArgs("Name"));

                }
            }
        }

    }

ViewModel

 public class PersonViewModel
    {
        public List<Person> LiPerson
        {
            get;
            set;
        }

    }

Form

 public partial class MainWindow : Window
    {

        PersonViewModel personViewModel;

        public MainWindow()
        {
            InitializeComponent();

            personViewModel = new PersonViewModel();
            personViewModel.LiPerson = new List<Person>();
            Person person = new Person();
            person.Name = "xxx";
            personViewModel.LiPerson.Add(person);
            Person person2 = new Person();
            person2.Name = "asd";
            personViewModel.LiPerson.Add(person2); 

            this.DataContext = personViewModel;
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {

            MessageBox.Show(personViewModel.LiPerson[0].Name);
            MessageBox.Show(personViewModel.LiPerson[1].Name);

        }
    }

xaml

<Window x:Class="WpfStudy.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="400*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"></ColumnDefinition>
            <ColumnDefinition Width="200*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Content="Button" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left"  VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
        <TextBox HorizontalAlignment="Left" Grid.Column="0" Height="23"  TextWrapping="Wrap" Text="{Binding Path=Name}" VerticalAlignment="Top" Width="120"/>
        <my:DataGrid Grid.Row="1"  Grid.Column="0"  Grid.ColumnSpan="5"
                     AutoGenerateColumns="False"  HorizontalAlignment="Left"
                     Name="dgSupGridView" ItemsSource="{Binding Path=LiPerson,Mode=TwoWay}"
                     ScrollViewer.HorizontalScrollBarVisibility="Auto"
                     ScrollViewer.VerticalScrollBarVisibility="Auto" >
            <my:DataGrid.Columns>
                <my:DataGridTextColumn Header="Name" IsReadOnly="False" Width="100"  Binding="{Binding Name}" />
            </my:DataGrid.Columns>
        </my:DataGrid>

    </Grid>
</Window>

对mvvm不熟悉的同学就可以用这种方式来实现批量保存了.

时间: 2024-08-29 07:13:16

WPF双向绑定的相关文章

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" St

C# Wpf集合双向绑定

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

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

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

WPF 元素绑定

1.什么是数据绑定数据绑定是一种关系,WPF程序从源对象中提取一些信息,并根据这些信息设置目标对象的属性,目标属性作为依赖项属性.源对象可以是任何内容,可以是另一个wpf内容,甚至是自行创建的纯数据对象. 2.简单的单绑定 将一个元素绑定到另一个元素,第一个例子,是将将一个Slider控件和TextBlock控件绑定.ElementName表示源对象的名字,Path表示源元素的属性.需要使用花括号括起来. <Grid> <Slider Name="sliderFontSize&

学习WPF——元素绑定

概念 从源对象提取一些信息,并用这些信息设置目标对象的属性 示例 在给TextBlock控件的FontSize属性赋值时,我们使用了绑定表达式 数据绑定表达式使用XAML的标记扩展(因此具有花括号)(参见:) 这里创建了一个System.Windows.Data.Binding对象,所以绑定表达式以单词binding开头 在本例中只设置了Binding对象的两个属性ElementName和Path属性 ElementName 指定源元素 Path 指定源元素中的属性 Mode OneWay: 当

Angular数据双向绑定

Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 一.什么是数据双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-control

【vue】跟着老马学习vue-数据双向绑定

学习了node.js教程,只能说是有了一定的了解,之前也了解了webpack和es6的核心内容,也看过vue2.0的官网教程,并结合视频看过项目,但是理解和运用仍然存在很多问题,接下来的一段时间,跟着老马学习vue 学习链接:http://aicoder.com/vue/preview/all.html#1 vue最大的特点就在于它的双向绑定,是一个前端的双向绑定类的框架. 一说到vue我们就应该立刻想到以下几部分:1.数据双向绑定:2.列表渲染.条件渲染:3.事件处理:4.生命周期:5.组件化

原生js实现数据双向绑定

最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里 缺点:一旦HTML代码生成就没有办法改变,如果有新数据重新传入,就必须重新把模板和数据整合到一起插入到文档流中 数据双向绑定 数据模型和视图之间的双向绑定,用户在视图上的修改会自动同步到数据模型中,同样的,如果数据模型中的值发生变化,也会同步到视图中去

AngularJS学习笔记(三)数据双向绑定

双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 下面,我们通过代码来实现.先不要纠结其中不明白的地方,先来体验下数据绑定的效果. 数据-->视图 这里我们只演示有了数据以后,如何绑定到视图上. <!DOCTYPE html> <html ng-app="App"> <head> <script type="tex