WPF 参照WPF实现Silverlight中的多值绑定特性

前言

数据绑定在WPF和Silvelright开发中的作用不言而喻，无处不在的绑定，节省了大量的代码，也实现了很多之前用代码都无法实现的特性。

下面有很多参考的文章

http://zzk.cnblogs.com/so.aspx?w=silverlight+databinding&t=

http://zzk.cnblogs.com/so.aspx?w=wpf+databinding&t=

 

我们之前熟知的绑定，有单向绑定，双向绑定等等。今天要讲一下多值绑定的问题，也就是说，如何给一个属性的值绑定多个数据源。

这个特性，在WPF中是内置的，而Silverlight中则没有提供直接的支持。本文提供了一个对照，并且给出了在Silverlight中的一个替代方案，实际上与WPF使用很类似了。

 

WPF中的实现

我们首先来看一下常规的绑定

<Window    x:Class="WpfApplicationSample.MainWindow"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    Title="MainWindow"    Height="350"    Width="525">    <Grid>        <!--WPF 单值绑定-->        <TextBlock            Text="{Binding Title}"></TextBlock>    </Grid></Window>

这个很简单，我们几乎不需要做任何解释

 

接下来看一下WPF中如何进行多值绑定

<Window    x:Class="WpfApplicationSample.MainWindow"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    Title="MainWindow"    Height="350"    Width="525">    <Grid>        <!--WPF 单值绑定-->        <TextBlock            Text="{Binding Title}"></TextBlock>        <!--WPF 多值绑定,结合StringFormat-->        <TextBlock>            <TextBlock.Text>                <MultiBinding                    StringFormat=" {0}-{1}">                    <Binding                        Path="Title"></Binding>                    <Binding                        Path="Time"></Binding>                </MultiBinding>            </TextBlock.Text>        </TextBlock>    </Grid></Window>

这是第一种多值绑定方式，可以直接通过StringFormat格式化多个值，并最终显示在TextBlock中。这种做法，在很多时候，都够用了。

 

但是，在某些时候，我们可能需要对这些多个值做复杂的处理，光用StringFormat满足不了要求，怎么办呢？

是的，我们会联想到使用ValueConverter。在System.Windows.Data这个命名空间中，我们以前用过一个IValueConverter的接口对吧，那是针对单值绑定的。关于这个接口，更多信息，可以参考http://msdn.microsoft.com/zh-cn/library/system.windows.data.ivalueconverter.aspx

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Windows.Data;namespace WpfApplicationSample{    /// <summary>    /// WPF单值绑定转换器    /// 作者：陈希章    /// </summary>    public class TitleConverter:IValueConverter    {        #region IValueConverter Members        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)        {            //这里实现具体逻辑            throw new NotImplementedException();        }        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)        {            //这里实现具体逻辑            throw new NotImplementedException();        }        #endregion    }}

 

既然是这个思路，那么有没有多值转换器呢？答案是有的。请参考

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Windows.Data;namespace WpfApplicationSample{    /// <summary>    /// WPF单值绑定转换器    /// 作者：陈希章    /// </summary>    class MultiValueConverterSample:IMultiValueConverter    {        #region IMultiValueConverter Members        public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)        {            //这里实现具体逻辑,请注意第一个参数是一个数组，可以传递多个值            throw new NotImplementedException();        }        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)        {            throw new NotImplementedException();        }        #endregion    }}

 

那么，如何在XAML中使用这个转换器呢？其实和单值转换器是一样的，请参考下面的语法

<Window    x:Class="WpfApplicationSample.MainWindow"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    Title="MainWindow"    Height="350"    Width="525"    xmlns:local="clr-namespace:WpfApplicationSample">    <Window.Resources>        <local:MultiValueConverterSample            x:Key="cv"></local:MultiValueConverterSample>    </Window.Resources>    <Grid>        <!--WPF 单值绑定-->        <TextBlock            Text="{Binding Title}"></TextBlock>        <!--WPF 多值绑定,结合StringFormat-->        <TextBlock>            <TextBlock.Text>                <MultiBinding                    StringFormat=" {0}-{1}">                    <Binding                        Path="Title"></Binding>                    <Binding                        Path="Time"></Binding>                </MultiBinding>            </TextBlock.Text>        </TextBlock>        <!--WPF 多值绑定，结合Converter-->        <TextBlock>            <TextBlock.Text>                <MultiBinding                    Converter="{StaticResource cv}">                    <Binding                        Path="Title"></Binding>                    <Binding                        Path="Time"></Binding>                </MultiBinding>            </TextBlock.Text>        </TextBlock>    </Grid></Window>

看起来很好理解，对吧？这是WPF中为我们默认就提供的功能，确实很方便。

但是，这个特性（多值绑定）却没有在Silverlight中实现。

 

如何在Silverlight中实现类似的功能

为了在Silverlight中实现类似的功能，不少先进同学前仆后继，做出了不懈的努力。我看到过一个比较好的实现是下面这个scott同学提供的，请参考英文博客

http://www.scottlogic.co.uk/blog/colin/2010/05/silverlight-multibinding-solution-for-silverlight-4/

我在这个基础上做了一些改动和完善，并且将它封装到了之前提供的WPFSilverlightExtension中，以便大家更好地使用

【备注】这个Extension包，我会不断更新，将可用于Silverlight或者WPF中的一些扩展功能添加进去。目前包含的两个功能是

1.GridHelper (给Grid添加边框，适用于WPF和Silverlight) 

2.Multiple Binding（多值绑定-仅Silverlight，在1.4版本中提供)

 

添加这个扩展之后，你可以通过下面的方式使用它

    <UserControl x:Class="SilverlightApplicationSample.MainPage"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"        mc:Ignorable="d"        d:DesignHeight="300" d:DesignWidth="400"        xmlns:data="clr-namespace:System.Windows.Data;assembly=SilverlightExtension">        <Grid x:Name="LayoutRoot" Background="White">            <TextBlock>                <data:BindingUtil.MultiBindings>                    <data:MultiBindings>                        <data:MultiBinding                            TargetProperty="Text"                            StringFormat=" {0}-{1}">                            <data:MultiBinding.Bindings>                                <data:BindingCollection>                                    <Binding                                        Path="Id"></Binding>                                    <Binding                                        Path="Time"></Binding>                                </data:BindingCollection>                            </data:MultiBinding.Bindings>                        </data:MultiBinding>                    </data:MultiBindings>                </data:BindingUtil.MultiBindings>            </TextBlock>        </Grid>    </UserControl>

 

你也可以同样定义一个多值转换器

    using System;    using System.Net;    using System.Windows;    using System.Windows.Controls;    using System.Windows.Documents;    using System.Windows.Ink;    using System.Windows.Input;    using System.Windows.Media;    using System.Windows.Media.Animation;    using System.Windows.Shapes;    using System.Windows.Data;    namespace SilverlightApplicationSample    {        public class MultiValueConverterSample:IMultiValueConverter        {            #region IMultiValueConverter Members            public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)            {                return string.Format("{0}-{1}", values);            }            public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)            {                throw new NotImplementedException();            }            #endregion        }    }

 

然后，像下面这样使用它

    <UserControl        x:Class="SilverlightApplicationSample.MainPage"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"        mc:Ignorable="d"        d:DesignHeight="300"        d:DesignWidth="400"        xmlns:data="clr-namespace:System.Windows.Data;assembly=SilverlightExtension"        xmlns:local="clr-namespace:SilverlightApplicationSample">        <UserControl.Resources>            <local:MultiValueConverterSample                x:Key="cv"></local:MultiValueConverterSample>        </UserControl.Resources>            <Grid            x:Name="LayoutRoot"            Background="White">            <TextBlock>                <data:BindingUtil.MultiBindings>                    <data:MultiBindings>                        <data:MultiBinding                            TargetProperty="Text" Converter="{StaticResource cv}">                            <data:MultiBinding.Bindings>                                <data:BindingCollection>                                    <Binding                                        Path="Id"></Binding>                                    <Binding                                        Path="Time"></Binding>                                </data:BindingCollection>                            </data:MultiBinding.Bindings>                        </data:MultiBinding>                    </data:MultiBindings>                </data:BindingUtil.MultiBindings>            </TextBlock>        </Grid>    </UserControl>

 

总结

本文对照了在WPF和Silverlight中实现多值绑定的特性，并且给出了一个Silverlight中的替代解决方案