[源码下载]

背水一战 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. 掀起你的盖头来：Unit Of Work-工作单元

    写在前面 阅读目录: 概念中的理解 代码中的实现 后记 掀起了你的盖头来,让我看你的眼睛,你的眼睛明又亮呀,好像那水波一模样:掀起了你的盖头来,让我看你的脸儿,看看你的脸儿红又圆呀,好像那苹果到秋天. ...

  2. R in Action 读书笔记（4）

    MindMapper 原文件

  3. 同步博客到CSDN

    经过一些朋友的多次邀请,现同步博客到CSDN,地址:http://blog.csdn.net/knightswarrior.

  4. 可以这样去理解group by和聚合函数

    写在前面的话:用了好久group by,今天早上一觉醒来,突然感觉group by好陌生,总有个筋别不过来,为什么不能够select * from Table group by id,为什么一定不能是 ...

  5. Mysql 备份

    MySQL数据库备份命令   备份MySQL数据库的命令 mysqldump -hhostname -uusername -ppassword databasename > backupfile ...

  6. LInux MySQL 端口验证

    linux suse11在terminal可以正常登录进行各种操作,在tomcat运行jdbc web程序异常: com.mysql.jdbc.exceptions.jdbc4.Communicati ...

  7. 《超实用的JavaScript代码段》—— 读后总结

    这本书全是代码,从头到尾跟着坐下来确实收获很多.比那些古板的教科书式的理解更多,不过书中并不是每个例子都做了,有的作者封装的太多,觉得看了收获不多,就没细看——比如模块渐变.有空好好学学这段的代码. ...

  8. 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  9. c#字段

    1.C#中是不允许用new操作符创建String对象的,编译器会报错. 2.实例字段:使用new对class创建对象直接赋初始值,不适用于struct slass Rect { public int ...

  10. Derived Column 用法

    Derived Column Component 用法是为数据流增加派生列,Derived column  有两种用法:add as new column 或 replace . 图中,增加一个 De ...