快速构建Windows 8风格应用25-数据绑定

原文:快速构建Windows 8风格应用25-数据绑定

本篇博文主要介绍如何将UI元素与数据进行绑定、数据绑定的方向、数据更改通知、数据转换、数据绑定支持的绑定方案。

数据绑定是一种简单方式来显示数据,UI元素与数据对象之间的连接或绑定是允许数据在两者之间流动的。另外建立了绑定且数据发生变化时,相应的UI元素会自动显示变化。

 

如何将UI元素与数据进行绑定

 

从上面图可以知道,每个绑定必须指定一个源和一个目标。

其中源对象可以是任何CLR对象,包括目标元素自身和其他UI元素。目标可以是FrameworkElement的任何DependencyProperty(依赖属性)。

数据绑定引擎从Binding对象获取以下内容:

1)源对象和目标对象;

2)数据流的方向;

3)值转换器;

例如:使用C#代码和XAML将TextBox的Foreground属性进行绑定。

XAML代码:

<TextBox x:Name="MyTextBox" Text="Text" Foreground="{Binding Brush1, Mode=OneWay}"/>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

C#代码:

MyColors textcolor = new MyColors();
textcolor.Brush1 = new SolidColorBrush(Colors.Red);
MyTextBox.DataContext = textcolor;

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

绑定是使用{Binding…}语法在XAML中创建的。源是通过设置TextBox的DataContent属性在代码中设置的。

另外数据是会被继承的。若我们在某个父元素上设置数据上下文,那么其子元素将使用同一数据。我们可以通过设置Binding.Path属性绑定到源对象的某个属性。

 

数据绑定的方向

每一个绑定都包含一个Mode属性,用于确定数据流动的方式和时间。

三种类型的绑定:

1)OneTime:绑定会在创建时使用源数据更新目标。

2)OneWay:绑定会在创建时以及数据发生更改时使用源数据更新目标(默认模式)。

3)TwoWay:绑定会在目标和源中的任一个发生更改时同时更新目标和源。

 

数据更改通知

当源数据对象进行了更改,如何将新的源数据对象传递给目标对象呢?解决办法是源数据对象继承INotifyPropertyChanged 接口。因为INotifyPropertyChanged 接口提供了PropertyChanged 事件,该事件会告诉数据绑定引擎,源对象已经改变,方便更改目标值。

例如:

// Create a class that implements INotifyPropertyChanged.
public class MyColors : INotifyPropertyChanged
{
    private SolidColorBrush _Brush1;
 
    // Declare the PropertyChanged event.
    public event PropertyChangedEventHandler PropertyChanged;
 
    // Create the property that will be the source of the binding.
    public SolidColorBrush Brush1
    {
        get { return _Brush1; }
        set
        {
            _Brush1 = value;
            // Call NotifyPropertyChanged when the source property 
            // is updated.
            NotifyPropertyChanged("Brush1");
        }
    }
 
    // NotifyPropertyChanged will raise the PropertyChanged event, 
    // passing the source property that is being updated.
    public void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, 
                new PropertyChangedEventArgs(propertyName));
        }
    }
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

示例代码中MyColors类继承了INotifyPropertyChanged 接口,当Brush1属性更改时将触发PropertyChanged事件通知目标对象以及更改。

 

数据转换

当我们存储的数据在UI界面显示的时候,对用户来讲不友好时,可以将数据进行相应的转换进行显示。这时我们就需要一个数据的转换器了。

我们可以在任意的绑定上设置转换器,并且自定义转换器类必须继承实现IValueConverter 接口。

例如:

// Custom class implements the IValueConverter interface.
public class DateToStringConverter : IValueConverter
{
 
    #region IValueConverter Members
 
    // Define the Convert method to change a DateTime object to 
    // a month string.
    public object Convert(object value, Type targetType, 
        object parameter, string language)
    {
        // value is the data from the source object.
        DateTime thisdate = (DateTime)value;
        int monthnum = thisdate.Month;
        string month;
        switch (monthnum)
        {
            case 1:
                month = "January";
                break;
            case 2:
                month = "February";
                break;
            default:
                month = "Month not found";
                break;
        }
        // Return the value to pass to the target.
        return month;
 
    }
 
    // ConvertBack is not implemented for a OneWay binding.
    public object ConvertBack(object value, Type targetType, 
        object parameter, string language)
    {
        throw new NotImplementedException();
    }
 
    #endregion
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

当从源对象传递数据时,绑定引擎会调用Convert 并将返回的数据传递回目标。

当从目标传递数据时,绑定引擎会调用ConvertBack 并将返回的数据传递回源。

XAML代码中设置Converter:

<UserControl.Resources>
  <local:DateToStringConverter x:Key="Converter1"/>
</UserControl.Resources>
 
...
 
<TextBlock Grid.Column="0" 
  Text="{Binding Month, Converter={StaticResource Converter1}}"/>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

转换器中还有两个可选参数:ConverterLanguage(该参数允许指定在转换中使用的语言)和 ConverterParameter(该参数允许为转换逻辑传递一个参数)。

注意:若在数据转换中存在错误,最好不要抛出异常,而是返回DependencyProperty.UnsetValue,它将停止数据传输。

 

支持的绑定方案

方案 C#
绑定到对象 可以为任何对象
从绑定对象中获取属性更改更新 数据对象必须实现INotifyPropertyChanged接口
绑定到集合 使用List(Of T)
从绑定集合中获取集合更改更新 使用ObservableCollection(Of T)
实现支持绑定的集合 扩展 List(Of T) 或实现 IListIList(属于 Object)、IEnumerableIEnumerable(属于 Object)。绑定到通用 IList(Of T)IEnumerable(Of T) 的操作不受支持
实现支持集合更改更新的集合 扩展ObservableCollection(Of T) 或实现(非通用)IListINotifyCollectionChanged
实现支持增量加载的集合 扩展 ObservableCollection(Of T) 或实现(非通用)IListINotifyCollectionChanged。此外,还实现ISupportIncrementalLoading

注:该表格根据MSDN提供的文档进行相应的整理。

更多关于数据绑定的文章可参考:

1.数据绑定概述

2.快速入门:到控件的数据绑定;

3.如何绑定到分层数据并创建主视图/详细信息视图;

时间: 2024-10-09 04:57:04

快速构建Windows 8风格应用25-数据绑定的相关文章

快速构建Windows 8风格应用32-构建辅助磁贴

原文:快速构建Windows 8风格应用32-构建辅助磁贴 引言 Windows Phone中,我们开发者可能会开发的一个功能点是将数据列表中某一项"Pin To Start(固定到开始屏幕)",大家都知道这种固定到开始屏幕的磁贴叫做辅助磁贴(也叫二级磁贴),用户可以通过该辅助磁贴启动应用程序并导航到应用程序中某一个页面或某一位置. 其实Windows 8 Store风格应用程序也引入了辅助磁贴的概念,用户在使用Windows 8 Store应用的辅助磁贴和Windows Phone

快速构建Windows 8风格应用35-触控输入

原文:快速构建Windows 8风格应用35-触控输入 引用 Windows 8设备通常具有多点触摸屏,用户可以同时使用多个手指来进行不同的输入交互,如点击.拖动或收缩等手势操作.另外Windows 8中将触摸.鼠标和笔/触笔交互是作为指针输入进行接收.处理和管理. 一.手势处理 首先我们来汇总一下Windows 8中常用的手势都有哪些. 1,点击:用一个手指触摸屏幕,然后抬起手指. 2,长按:用一个手指触摸屏幕并保持不动. 3,滑动:用一个或多个手指触摸屏幕并向着同一方向移动. 4,轻扫:用一

快速构建Windows 8风格应用22-MessageDialog

原文:快速构建Windows 8风格应用22-MessageDialog 本篇博文主要介绍MessageDialog概述.MessageDialog常用属性和方法.如何构建MessageDialog   MessageDialog概述 MessageDialog指的就是对话框. 对话框的命令栏中最多包含三个命令.如果我们指定任何命令,将会有一个默认命令添加到对话框中,目的是关闭对话框. 对话框弹出后界面中所有元素将在对话框下面显示,并且将会阻塞任何触摸事件直到用户进行响应对话框. 另外对话框应该

快速构建Windows 8风格应用36-商店应用发布流程

原文:快速构建Windows 8风格应用36-商店应用发布流程 引言 在发布应用之前,我们需要注册开发者账号才能够发布应用.我们可以登录https://appdev.microsoft.com/StorePortals/ 该网址进行注册开发者账号,同时我们也可以点击这里来浏览MSDN给到的开发者账号注册的详细步骤.那么注册完成开发者账号后,如何发布Windows Store 应用程序呢? Windows Store App 发布流程 1,使用Visual Studio 2012打开要上传的应用,

快速构建Windows 8风格应用23-App Bar概述及使用规范

原文:快速构建Windows 8风格应用23-App Bar概述及使用规范 本篇博文主要介绍App Bar概述.App Bar命令组织步骤.App Bar最佳实践.   App Bar概述 Windows 8 Store应用中的App Bar(应用程序工具栏)起到的作用和Windows Phone中AppBar一样.我们可以向用户提供各种操作接口,实现导航或者触发命令等. AppBar一般默认是隐藏的,也可以设置为始终可见.我们可以通过清扫屏幕上边缘或下边缘时显示AppBar,AppBar被点击

快速构建Windows 8风格应用26-本地应用数据

原文:快速构建Windows 8风格应用26-本地应用数据 本篇博文主要介绍如何获取应用的设置和文件容器.如何将数据写入设置.如何从设置中获取数据.如何删除设置中数据.如何将数据写入文件.如何从文件中获取数据. 当应用安装时,系统会为设置和文件等应用数据提供它自己的每用户数据存储.我们不需要知道这些数据存在哪里或如何存储,因为系统会负责管理物理存储工作.我们只需使用应用数据API就可以了. 本地应用数据一般用于当前设备数据的持久化,并且本地数据没有限制大小,通常情况使用本地数据存储大型数据集.

快速构建Windows 8风格应用2-创建调试应用

原文:快速构建Windows 8风格应用2-创建调试应用 本篇博文主要介绍的是创建应用时可以选择哪些模版,生成默认的Windows 8风格应用解决方案中含哪些文件,最后是如何调试Windows 8风格应用. 我们如何使用Visual Studio 2012创建Windows 8风格应用呢?可归结为以下几步: 1.选择我们要使用的开发语言,例如:JavaScript.C++.C#.Visual Basic. 2.选择项目模版,可以选择以下常用的项目模版: 1)拆分应用(Split App)模版 可

快速构建Windows 8风格应用30-应用生命周期管理

原文:快速构建Windows 8风格应用30-应用生命周期管理 引言 Windows 8 中可以启动多个应用并在其中切换,我们没有必要担心降低系统速度或消耗电池电量. 因为系统会自动挂起(有时会终止)在后台正在运行的应用.设计良好的应用可以由系统挂起.终止以及重新启动,并且这些过程看起来该应用一直在运行中. 一.原理 1.当激活了应用时,无论任何原因,系统都会发送 Activated 事件 2.每当用户切换到桌面或其他应用时,系统都会挂起你的应用,系统会发送Suspending事件 3.每当用户

快速构建Windows 8风格应用20-MediaElement

原文:快速构建Windows 8风格应用20-MediaElement 本篇博文主要介绍MediaElement概述.MediaElement对象介绍.MediaElement常用属性.如何控制媒体播放. MediaElement概述 通常在Windows 8风格应用中播放音频或视频文件时是使用MediaElement类进行构建的. MediaElement对象提供了用于播放视频或音频的属性和方法. 相关MediaElement的开发示例可参考该链接:XAML media playback sa