[源码下载]

背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合, 通过 Binding 绑定字典表

作者：webabcd

介绍
背水一战 Windows 10 之 绑定

  • 通过 Binding 绑定对象
  • 通过 x:Bind 绑定对象
  • 通过 Binding 绑定集合
  • 通过 x:Bind 绑定集合
  • 通过 Binding 绑定字典表

示例
1、演示如何通过 Binding 绑定对象
Bind/BindingModel.xaml

<Page

    x:Class="Windows10.Bind.BindingModel"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.Bind"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Name="root" Background="Transparent">

        <StackPanel Margin="10 0 10 10">

            <TextBlock Name="lblMsg" Margin="5" />

            <TextBox Text="{Binding Name, Mode=TwoWay}" Margin="5" />

            <TextBox Text="{Binding Age, Mode=TwoWay}" Margin="5" />

            <ToggleSwitch IsOn="{Binding IsMale, Mode=TwoWay}" OffContent="女" OnContent="男" Header="性别" Margin="5" />

        </StackPanel>

    </Grid>

</Page>

Bind/BindingModel.xaml.cs

/*

 * 演示如何通过 Binding 绑定对象

 *

 *

 * 如果需要数据源在属性值发生变化时对外通知，则需要实现 INotifyPropertyChanged 接口（为了简化实现，建议继承 Common/BindableBase.cs 这个类）

 *     PropertyChanged - 对象的属性的值发生变化时触发的事件

 */

using System;

using System.ComponentModel;

using Windows.System.Threading;

using Windows.UI.Core;

using Windows.UI.Xaml.Controls;

using Windows10.Common;

namespace Windows10.Bind

{

    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 接口）

            _employee = new Employee();

            _employee.Name = "webabcd";

            _employee.Age = ;

            _employee.IsMale = true;

            // Employee 对象的属性的值发生变化时触发的事件（源自 INotifyPropertyChanged 接口）

            _employee.PropertyChanged += _employee_PropertyChanged;

            // 指定数据上下文（绑定的数据源）

            root.DataContext = _employee;

            // 每 5 秒更新一次数据

            ThreadPoolTimer.CreatePeriodicTimer

            (

                (timer) =>

                {

                    var ignored = Dispatcher.RunAsync

                    (

                        CoreDispatcherPriority.Normal,

                        () =>

                        {

                            Random random = new Random();

                            _employee.Age = random.Next(, );

                            _employee.IsMale = random.Next() %  ==  ? true : false;

                        }

                    );

                },

                TimeSpan.FromMilliseconds()

            );

        }

        // 每次属性的值发生变化时，显示变化后的结果

        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);

        }

    }

}

2、演示如何通过 x:Bind 绑定对象
Bind/BindModel.xaml

<Page

    x:Class="Windows10.Bind.BindModel"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.Bind"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="10 0 10 10">

            <TextBlock Name="lblMsg" Margin="5" />

            <TextBox Text="{x:Bind CurrentEmployee.Name, Mode=TwoWay}" Margin="5" />

            <TextBox Text="{x:Bind CurrentEmployee.Age, Mode=TwoWay}" Margin="5" />

            <ToggleSwitch IsOn="{x:Bind CurrentEmployee.IsMale, Mode=TwoWay}" OffContent="女" OnContent="男" Header="性别" Margin="5" />

        </StackPanel>

    </Grid>

</Page>

Bind/BindModel.xaml.cs

/*

 * 演示 x:Bind 绑定的相关知识点

 *

 *

 * 如果需要数据源在属性值发生变化时对外通知，则需要实现 INotifyPropertyChanged 接口（为了简化实现，建议继承 Common/BindableBase.cs 这个类）

 *     PropertyChanged - 对象的属性的值发生变化时触发的事件

 */

using System;

using System.Collections.ObjectModel;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows10.Common;

namespace Windows10.Bind

{

    // x:Bind 的数据上下文就是它所属的 Page 或 UserControl

    public sealed partial class BindDemo : Page

    {

        public BindDemo()

        {

            this.InitializeComponent();

        }

        // 事件绑定到方法，无参数

        private void EventBindNoArgs()

        {

            CurrentEmployee.Name = "wanglei" + new Random().Next(, ).ToString();

        }

        // 事件绑定到方法，参数与对应的事件的参数相同

        private void EventBindRegularArgs(object sender, RoutedEventArgs e)

        {

            CurrentEmployee.Name = "wanglei" + new Random().Next(, ).ToString();

        }

        // 事件绑定到方法，参数与对应的事件的参数相同，但是其中的事件参数为 object 类型

        private void EventBindBaseArgs(object sender, object e)

        {

            CurrentEmployee.Name = "wanglei" + new Random().Next(, ).ToString();

        }

        public Employee CurrentEmployee { get; set; } = new Employee() { Name = "wanglei", Age = , IsMale = true };

        public ObservableCollection<Employee> AllEmployees { get; set; } = TestData.GetEmployees();

    }

}

3、示如何通过 Binding 绑定集合
Bind/BindingCollection.xaml

<Page

    x:Class="Windows10.Bind.BindingCollection"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.Bind"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="10 0 10 10">

            <Button Name="btnDelete" Content="删除第 1 条数据" Click="btnDelete_Click" Margin="5" />

            <Button Name="btnUpdate" Content="更新前 2 条数据" Click="btnUpdate_Click" Margin="5" />

            <ListView x:Name="listView" Margin="5">

                <ListView.ItemTemplate>

                    <DataTemplate>

                        <Border Background="Blue" Width="200" CornerRadius="3" HorizontalAlignment="Left">

                            <TextBlock Text="{Binding Name}" />

                        </Border>

                    </DataTemplate>

                </ListView.ItemTemplate>

            </ListView>

        </StackPanel>

    </Grid>

</Page>

Bind/BindingCollection.xaml.cs

/*

 * 演示如何通过 Binding 绑定集合

 *

 *

 * 如果需要集合数据源在数据添加，删除，更新时对外通知，则需要实现 INotifyCollectionChanged 接口

 *     CollectionChanged - 集合数据在发生添加，删除，更新时触发的事件

 */

using System;

using System.Collections.ObjectModel;

using System.Collections.Specialized;

using System.Linq;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows10.Common;

namespace Windows10.Bind

{

    public sealed partial class BindingCollection : Page

    {

        // ObservableCollection<T> 实现了 INotifyCollectionChanged 接口

        private ObservableCollection<Employee> _employees;

        public BindingCollection()

        {

            this.InitializeComponent();

            this.Loaded += BindingCollection_Loaded;

        }

        void BindingCollection_Loaded(object sender, RoutedEventArgs e)

        {

            _employees = new ObservableCollection<Employee>(TestData.GetEmployees());

            // 集合数据在发生添加，删除，更新时触发的事件（源自 INotifyCollectionChanged 接口）

            _employees.CollectionChanged += _employees_CollectionChanged;

            // 指定 ListView 的数据源

            listView.ItemsSource = _employees;

        }

        void _employees_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)

        {

            /*

             * e.Action - 引发此事件的操作类型（NotifyCollectionChangedAction 枚举）

             *     Add, Remove, Replace, Move, Reset

             * e.OldItems - Remove, Replace, Move 操作时影响的数据列表

             * e.OldStartingIndex - Remove, Replace, Move 操作发生处的索引

             * e.NewItems - 更改中所涉及的新的数据列表

             * e.NewStartingIndex - 更改中所涉及的新的数据列表的发生处的索引

             */

        }

        private void btnDelete_Click(object sender, RoutedEventArgs e)

        {

            // 此处的通知来自 INotifyCollectionChanged 接口

            _employees.RemoveAt();

        }

        private void btnUpdate_Click(object sender, RoutedEventArgs e)

        {

            Random random = new Random();

            // 此处的通知来自实现了 INotifyPropertyChanged 接口的 Employee

            _employees.First().Name = random.Next(, ).ToString();

            // 此处的通知来自 INotifyCollectionChanged 接口

            _employees[] = new Employee() { Name = random.Next(, ).ToString() };

        }

    }

}

4、演示如何通过 x:Bind 绑定集合
Bind/BindCollection.xaml

<Page

    x:Class="Windows10.Bind.BindCollection"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.Bind"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:common="using:Windows10.Common"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="10 0 10 10">

            <Button Name="btnDelete" Content="删除第 1 条数据" Click="btnDelete_Click" Margin="5" />

            <Button Name="btnUpdate" Content="更新前 2 条数据" Click="btnUpdate_Click" Margin="5" />

            <ListView x:Name="listView" ItemsSource="{x:Bind Employees}" Margin="5">

                <ListView.ItemTemplate>

                    <DataTemplate x:DataType="common:Employee">

                        <Border Background="Blue" Width="200" CornerRadius="3" HorizontalAlignment="Left">

                            <TextBlock Text="{x:Bind Name, Mode=OneWay}" />

                        </Border>

                    </DataTemplate>

                </ListView.ItemTemplate>

            </ListView>

        </StackPanel>

    </Grid>

</Page>

Bind/BindCollection.xaml.cs

/*

 * 演示如何通过 x:Bind 绑定集合

 *

 *

 * 如果需要集合数据源在数据添加，删除，更新时对外通知，则需要实现 INotifyCollectionChanged 接口

 *     CollectionChanged - 集合数据在发生添加，删除，更新时触发的事件

 */

using System;

using System.Collections.ObjectModel;

using System.Collections.Specialized;

using System.Linq;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows10.Common;

namespace Windows10.Bind

{

    public sealed partial class BindCollection : Page

    {

        // 数据源

        // ObservableCollection<T> 实现了 INotifyCollectionChanged 接口

        public ObservableCollection<Employee> Employees { get; set; } = new ObservableCollection<Employee>(TestData.GetEmployees());

        public BindCollection()

        {

            this.InitializeComponent();

            this.Loaded += BindCollection_Loaded;

        }

        void BindCollection_Loaded(object sender, RoutedEventArgs e)

        {

            // 集合数据在发生添加，删除，更新时触发的事件（源自 INotifyCollectionChanged 接口）

            Employees.CollectionChanged += Employees_CollectionChanged;

        }

        void Employees_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)

        {

            /*

             * e.Action - 引发此事件的操作类型（NotifyCollectionChangedAction 枚举）

             *     Add, Remove, Replace, Move, Reset

             * e.OldItems - Remove, Replace, Move 操作时影响的数据列表

             * e.OldStartingIndex - Remove, Replace, Move 操作发生处的索引

             * e.NewItems - 更改中所涉及的新的数据列表

             * e.NewStartingIndex - 更改中所涉及的新的数据列表的发生处的索引

             */

        }

        private void btnDelete_Click(object sender, RoutedEventArgs e)

        {

            // 此处的通知来自 INotifyCollectionChanged 接口

            Employees.RemoveAt();

        }

        private void btnUpdate_Click(object sender, RoutedEventArgs e)

        {

            Random random = new Random();

            // 此处的通知来自实现了 INotifyPropertyChanged 接口的 Employee

            Employees.First().Name = random.Next(, ).ToString();

            // 此处的通知来自 INotifyCollectionChanged 接口

            Employees[] = new Employee() { Name = random.Next(, ).ToString() };

        }

    }

}

5、演示如何通过 Binding 绑定字典表
Bind/BindingDictionary.xaml

<Page

    x:Class="Windows10.Bind.BindingDictionary"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.Bind"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="10 0 10 10">

            <TextBlock Name="lblMsg" Margin="5" />

            <ComboBox x:Name="combo" SelectionChanged="combo_SelectionChanged" Margin="5">

                <ComboBox.ItemTemplate>

                    <DataTemplate>

                        <StackPanel Orientation="Horizontal">

                            <TextBlock Text="{Binding Key}"/>

                            <TextBlock Text=" - "/>

                            <TextBlock Text="{Binding Value}"/>

                        </StackPanel>

                    </DataTemplate>

                </ComboBox.ItemTemplate>

            </ComboBox>

        </StackPanel>

    </Grid>

</Page>

Bind/BindingDictionary.xaml.cs

/*

 * 演示如何通过 Binding 绑定字典表

 */

using System.Collections.Generic;

using Windows.UI.Xaml.Controls;

namespace Windows10.Bind

{

    public sealed partial class BindingDictionary : Page

    {

        private Dictionary<string, string> _data;

        public BindingDictionary()

        {

            this.InitializeComponent();

            _data = new Dictionary<string, string>();

            _data.Add("key1", "value1");

            _data.Add("key2", "value2");

            _data.Add("key3", "value3");

            combo.ItemsSource = _data;

        }

        private void combo_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            KeyValuePair<string, string> selectedItem = (KeyValuePair<string, string>)combo.SelectedItem;

            lblMsg.Text = $"selectedItem: {selectedItem.Key}, {selectedItem.Value}";

        }

    }

}

OK
[源码下载]

背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合的更多相关文章

  1. 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧

    [源码下载] 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧 作者:webabcd 介绍背水一战 Wind ...

  2. 背水一战 Windows 10 (20) - 绑定: DataContextChanged, UpdateSourceTrigger, 对绑定的数据做自定义转换

    [源码下载] 背水一战 Windows 10 (20) - 绑定: DataContextChanged, UpdateSourceTrigger, 对绑定的数据做自定义转换 作者:webabcd 介 ...

  3. 背水一战 Windows 10 (19) - 绑定: TemplateBinding 绑定, 与 RelativeSource 绑定, 与 StaticResource 绑定

    [源码下载] 背水一战 Windows 10 (19) - 绑定: TemplateBinding 绑定, 与 RelativeSource 绑定, 与 StaticResource 绑定 作者:we ...

  4. 背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue

    [源码下载] 背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue 作者:weba ...

  5. 背水一战 Windows 10 (24) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过非 ButtonBase 触发命令

    [源码下载] 背水一战 Windows 10 (24) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现,通过非 ButtonBase 触发命令 作者:webabcd ...

  6. 背水一战 Windows 10 (23) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过 ButtonBase 触发命令

    [源码下载] 背水一战 Windows 10 (23) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现,通过 ButtonBase 触发命令 作者:webabcd ...

  7. 背水一战 Windows 10 (26) - XAML: x:DeferLoadStrategy, x:Null

    [源码下载] 背水一战 Windows 10 (26) - XAML: x:DeferLoadStrategy, x:Null 作者:webabcd 介绍背水一战 Windows 10 之 XAML ...

  8. 背水一战 Windows 10 (17) - 动画: ThemeTransition（过渡效果）

    [源码下载] 背水一战 Windows 10 (17) - 动画: ThemeTransition(过渡效果) 作者:webabcd 介绍背水一战 Windows 10 之 动画 ThemeTrans ...

  9. 背水一战 Windows 10 (8) - 控件 UI: StateTrigger

    [源码下载] 背水一战 Windows 10 (8) - 控件 UI: StateTrigger 作者:webabcd 介绍背水一战 Windows 10 之 控件 UI VisualState 之 ...

随机推荐

  1. RCF进程间通信Demo程序

    在上一篇文章RPC通信框架--RCF介绍中,介绍了RCF的优点,本篇文章从头开始演示如何用RCF编写一个跨进程通信的Demo程序. 将RCF编译为静态库 从官网下载到的源码中包含一个RCF的项目,但是 ...

  2. js模版引擎handlebars.js实用教程——目录

    写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...

  3. Android-简单的图片验证码

    Android-图片验证码生成1.为啥要验证码?图片验证码在网络中使用的是比较普遍的.一般都是用来防止恶意破解密码.刷票.论坛灌水.刷页等.2.怎样的验证码比较好?验证码的获取方式无非就两种,一种是后 ...

  4. js实现继承的方式总结

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  5. SSIS Design4: 处理外键

    假设一种场景:有一个ETL系统,通过记录数据最后更新的时间,对数据进行增量更新.如果Data Warehouse中存在有外键关系的两个表,Group(GroupID,StudentID,GroupDa ...

  6. ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务

    1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...

  7. nodejs 批量修改、删除

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQhCAIAAABDaAVHAAAgAElEQVR4nOydeXxU5aH359733vd9b/ ...

  8. 深入学习jQuery事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...

  9. javascript动画系列第五篇——模拟滚动条

    × 目录 [1]原理介绍 [2]数字加减 [3]元素尺寸[4]内容滚动 前面的话 当元素内容溢出元素尺寸范围时,会出现滚动条.但由于滚动条在各浏览器下表现不同,兼容性不好.所以,模拟滚动条也是很常见的 ...

  10. Android 开源框架Universal-Image-Loader完全解析（一）--- 基本介绍及使用

    转载博客:http://blog.csdn.net/xiaanming/article/details/26810303 大家好!差不多两个来月没有写文章了,前段时间也是在忙换工作的事,准备笔试面试什 ...