原文:

重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换

作者：

介绍

重新想象 Windows 8 Store Apps 之 绑定

• 与 Element 绑定
• 与 Model 绑定
• 与 Indexer 绑定
• 对 Style 中的 Setter 进行绑定（绑定静态资源）
• Binding 的一个扩展标记 RelativeSource 的应用
• 绑定中的数据转换

示例

1、演示如何与 Element 绑定，以及 OneTime, OneWay, TwoWay 的区别

Binding/BindingElement.xaml

2、演示如何与 Model 进行双向绑定

Binding/BindingModel.xaml

Binding/BindingModel.xaml.cs

/* * 演示如何与 Model 进行双向绑定 */using System;using System.ComponentModel;using Windows.System.Threading;using Windows.UI.Core;using Windows.UI.Xaml.Controls;using XamlDemo.Model;namespace XamlDemo.Binding{    public sealed partial class BindingModel : Page    {        private Employee _employee;        public BindingModel()        {            this.InitializeComponent();            this.Loaded += BindingModel_Loaded;        }        void BindingModel_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)        {            // 创建一个需要绑定的实体对象（注：Employee 实现了 INotifyPropertyChanged 接口，想要 OneWay 或者 TwoWay 的话必须要实现 INotifyPropertyChanged 接口）            _employee = new Employee();            _employee.Name = "webabcd";            _employee.Age = 33;            _employee.IsMale = true;            // 每 5 秒更新一次数据            ThreadPoolTimer.CreatePeriodicTimer(                (timer) =>                {                    var ignored = Dispatcher.RunAsync(CoreDispatcherPriority.High,                        () =>                        {                            Random random = new Random();                            _employee.Age = random.Next(10, 100);                            _employee.IsMale = random.Next() % 2 == 0 ? true : false;                        });                },                TimeSpan.FromMilliseconds(5000));            // Employee 对象的属性的值发生变化时触发的事件            _employee.PropertyChanged += _employee_PropertyChanged;            root.DataContext = _employee;        }        // 每次属性的值发生变化时，显示变化后的结果        void _employee_PropertyChanged(object sender, PropertyChangedEventArgs e)        {            lblMsg.Text = "属性：“" + e.PropertyName + "”的值发生了变化";            lblMsg.Text += Environment.NewLine;            lblMsg.Text += string.Format("当前的值为：Name-{0}, Age-{1}, IsMale-{2}", _employee.Name, _employee.Age, _employee.IsMale);        }    }}

3、演示如何与索引器进行绑定

Binding/BindingIndexer.xaml

Binding/BindingIndexer.xaml.cs

/* * 演示如何与索引器进行绑定 */using System.Collections.Generic;using Windows.UI.Xaml.Controls;using XamlDemo.Model;namespace XamlDemo.Binding{    public sealed partial class BindingIndexer : Page    {        public BindingIndexer()        {            this.InitializeComponent();            this.Loaded += BindingIndexer_Loaded;        }        void BindingIndexer_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)        {            // 用于演示如何绑定集合中的某个元素            List
     
       list = new List
      
       ();            for (int i = 0; i < 10; i++)            {                list.Add("索引：" + i.ToString());            }            textBlock.DataContext = list;            // 用于演示如何绑定集合中的某个对象的某个属性            textBlock2.DataContext = TestData.GetEmployees();            // 用于演示如何绑定 string 类型的索引器            textBlock3.DataContext = this;            // 用于演示如何绑定字典表中指定 key 的数据            Dictionary
       
         dic = new Dictionary
        
         ();            dic["hello"] = "hello webabcd";            textBlock4.DataContext = dic;        }        // 自定义一个索引器        public object this[string indexer]        {            get            {                return indexer;            }        }    }}
        
       
      
     

4、演示 Style 中的 Setter 如何做数据绑定（绑定静态资源）

Binding/BindingStyleSetter.xaml

         
              
                   
                                
                        
                         
         
          24.667
                         
                         
                         
                     
                    
                    
                
           
      
     

5、演示 Binding 中的一个扩展标记 RelativeSource 的应用

Binding/BindingRelativeSource.xaml

6、演示如何在绑定中做数据转换

Binding/IntegerLetterConverter.cs

/* * 继承 IValueConverter 以实现一个“整数-字母”转换器 */using System;using Windows.UI.Xaml.Data;namespace XamlDemo.Binding{    public sealed class IntegerLetterConverter : IValueConverter    {        /// 
        /// 正向转换器。将值从数据源传给绑定目标时，数据绑定引擎会调用此方法        /// 
        /// 转换之前的值        /// 转换之后的类型        /// 转换器所使用的参数（它是通过 Binding 的 ConverterParameter 传递过来的）        /// 转换器所使用的区域信息（它是通过 Binding 的 ConverterLanguage 传递过来的）        /// 
     
      转换后的值
             public object Convert(object value, Type targetType, object parameter, string language)        {            if ((double)value == 1)                return "a";            else if ((double)value == 2)                return "b";            else if ((double)value == 3)                return "c";            else                return "unknown";        }        /// 
        /// 反向转换器。将值从绑定目标传给数据源时，数据绑定引擎会调用此方法        /// 
        /// 转换之前的值        /// 转换之后的类型        /// 转换器所使用的参数（它是通过 Binding 的 ConverterParameter 传递过来的）        /// 转换器所使用的区域信息（它是通过 Binding 的 ConverterLanguage 传递过来的）        /// 
     
      转换后的值
             public object ConvertBack(object value, Type targetType, object parameter, string language)        {            if ((string)value == "a")                return 1;            else if ((string)value == "b")                return 2;            else if ((string)value == "c")                return 3;            else                return 1;        }    }}

Binding/ValueConverter.xaml

OK