码迷,mamicode.com
首页 > 其他好文 > 详细

[uwp开发]数据绑定那些事(2)

时间:2015-10-18 01:00:25      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:

接着上一篇来侃。

二.实体到控件之间的绑定

  这儿不知道用实体这个词恰不恰当,凑活着理解就行了。他可以是一个类实例,也可以是一个集合。

  所以,相应的我们就引入两个Demo,第一个介绍用简单的类作为作为数据源,第二个就介绍用一个集合作为数据源

  废话不多说,来看demo,我先上代码,后上分析

 

  DEMO1:

  XAML页面

    <Page.Resources>
        <local:User x:Key="user"></local:User>
    </Page.Resources>
    <Grid>
        <StackPanel DataContext="{StaticResource user}" HorizontalAlignment="Center">
            <TextBlock x:Name="tbID" Text="{Binding Path=ID}"></TextBlock>
            <TextBlock x:Name="tbName" Text="{Binding Path=Name}"></TextBlock >
            <TextBlock x:Name="tbGender" Text="{Binding Path=Gender}"></TextBlock>
        </StackPanel>
    </Grid>

  

User类:

  public class User
    {
        public int ID{get;set}
        public string Name{get;set}
        public string Gender{get;set;}
    }

 

C#代码:

  public sealed partial class MyPage : Page
    {
        public MyPage()
        {
            this.InitializeComponent();
User user
=Resources["user"] as User; if (user != null) { user.ID = 10000; user.Name = "CQ"; user.Gender = "不明"; } } }

  上面两坨就是全部代码了,在这儿我说一下执行大概流程。

  在执行MyPage类的构造函数时,我们通过User user=Resources["user"] as User拿到定义在MyPage页面中的静态资源User类的实例,然后对其赋值,运行程序后,我们发现控件上显示出来了

  我们赋值的数据。

  其实,我们在xaml中定义了三个TextBlock控件用来显示User类中的三个属性,但是我们只在他们的binding中只声明了Path,并没有指定ElementName,也就是数据源,这时候他们会查找他们的父级

  元素的数据源,这个数据源必须含有ID,User,Gender三个属性。而在他们的父级元素StackPanel中定义了属性DataContext(数据上下文),它在这儿指明了数据源,是谁呢?就是“user”,它定义在静态

  资源中。然后在MyPage类的构造函数中,拿到了类User的实例,为他赋值后,最后通过数据绑定的技术,他们最终显示在屏幕上!注意:当他们显示后,如果人为修改了user类中的属性值,这种改变是

      不会在界面上显示出来的。如果想让它跟着变该怎么办?往下看!

 

  在Demo1中的代码实际是没有啥实际用途的,想要有用途的,我们把它改造一下!!!

 

  之前说了,我们需要在User类实例的属性值发生改变后,让改变后的数据也显示在界面上。所以做如下改动!只需要改动User类就可以了!

  

  public class User : INotifyPropertyChanged
    {
        private int _id;
        private string _name;
        private string _gender;
        public int ID
        {
            get
            {
                return _id;
            }

            set
            {
                _id = value;
                OnPropertyChanged();
            }
        }

        public string Name
        {
            get
            {
                return _name;
            }

            set
            {
                _name = value;
                OnPropertyChanged();
            }
        }

        public string Gender
        {
            get
            {
                return _gender;
            }

            set
            {
                _gender = value;
                OnPropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged([CallerMemberName]string propertyName="")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

  其实理解还是比较简单。试想,提供一种机制,在user属性改变后,就通知系统说“我的值变了,你丫赶紧给我再界面上表达出来”,那么这个机制就通过让User继承INotifyPropertyChanged这个

  接口来实现。

  对比这个类和之前的,除了实现了接口INotifyPropertyChanged接口外,还定义了一个公共方法OnPropertyChanged,其次所有的属性的set方法里加了OnPropertyChanged()方法,用来通知

  属性值发生了改变。

  提示小技巧:CallerMemberName特性的作用是在调用OnPropertyChanged方法时,把属性的名称作为参数传进入,如果不加的话,在调用时就需要手动输入属性名称,这样出错的几率就比较大!

  置于INotifyPropertyChanged的真正内部原理,请msdn!...其实是我不太懂!

  好了,做了如上一番修改后,就是先我们需要的功能了!

 

     DEMO2

  这次我们玩个有用的,吧一个集合中的数据绑定到一个列表中!

  先上代码!!!

  xaml:

    <StackPanel>
            <Button Content="改变" Click="Button_Click"></Button>
            <ItemsControl x:Name="itemsControl" ItemsSource="{Binding}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding ID,Mode=OneWay}"/>
                            <TextBlock Text="{Binding Name,Mode=OneWay}" ></TextBlock>
                        </StackPanel>
                    </DataTemplate>
                   
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>

  product:

  public class Product
    {
        private int _id;
        private string _name;
        public int ID
        {
            get { return _id; }
            set
            {
                _id = value;
             }
        }
        public string Name
        {
            get { return _name; }
            set
            {
                _name = value;
            }
        }
    }

  c#:

  

  public sealed partial class MyPage : Page
    {
        List<Product> list = null;
        public MyPage()
        {
            this.InitializeComponent();


            list = new List<Product>
            {
                new Product { ID=1,Name="土豆" },
                new Product{ ID=2,Name="马铃薯"},
                new Product{ ID=3,Name="洋芋"}
               
            };
            
            itemsControl.ItemsSource = list;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (list != null)
            {
                list.Add(new Product { ID = 4, Name = "Potato" });
            }
        }
    }

  技术分享

  这是运行结果。先不要在意那个“改变”按钮。

  这次定义了一个ItemsControl列表控件,并且对其ItemTemplate 定义了一个模板,知识还是数据绑定。不懂可以看我的这篇文章DataTemplate和ControlTemplate联系与区别

  然后定义了一个泛型集合List<Product>,添加了三条数据后,把它设置为ItemsControl的数据源,注意这儿不用DataContext设置,用ItemSource属性!(而这区别可以百度!)

  之后运行程序,发现数据已经成功显示在界面上了。

 

  到这儿,已经实现了如何把一个集合中的数据显示在一个列表控件中!

  而的“改变”按钮的作用是想List中添加一条数据,但在点击后,界面上并没有反应,但是通过调试发现,数据的确添加到了List中,知识没有显示出来而已,结合我们之前一篇博文,

  应该能猜到,这儿缺少某种通知机制。当我们把List<Product>换为ObservableCollection<Product>后,会发现能够改变数据了。

  通过查看定义发现ObservableCollection<T>实现了接口INotifyCollectionChanged, INotifyPropertyChanged,正是这两个接口提供了这种通知机制!

 

至此。我的心得就完了。。但总感觉讲的不够,不清楚。以后把其中的小技巧在发篇博文谈谈。

  

[uwp开发]数据绑定那些事(2)

标签:

原文地址:http://www.cnblogs.com/cjw1115/p/4888732.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!