WPF---数据绑定（一）

一、何为数据绑定

场景：考虑一个Window上有一个TextBox和一个Slider两个元素，当我们拖动滑动条的时候，会在TextBox中显示当前滑动条的数值；当我们在TextBox中输入一个有效值，滑动条

中的滑块会滑到TextBox中输入的值所对应的位置。

定义：数据绑定可以理解为两个对象之间的一种关联，对象中的某个属性总是保持同步于另个对象的某个属性值。我们可以形象的把绑定比作一个桥梁，它负责同步桥头两侧的物体。

保持同步的数据元素必须是属性，一个叫源属性，一个叫目标属性；

目标属性必须是一个依赖属性。

二、如何绑定元素对象

关于上面滑动条和文本框的绑定，我们可以用以下Xaml代码实现：

<Window x:Class="BindingDemo1.MainWindow"
        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"
        xmlns:local="clr-namespace:BindingDemo1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <TextBox Name="tbx" Text="{Binding Path=Value, ElementName=sldrSlider}" ></TextBox>
            <Slider Name="sldrSlider" Minimum="0" Maximum="100"></Slider>
        </StackPanel>
    </Grid>
</Window>

等价的后台代码实现如下：

using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;

namespace BindingDemo1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
           // Binding binding = new Binding() { ElementName = "sldrSlider",Path= new PropertyPath("Value")};
            Binding binding = new Binding("Value") { ElementName = "sldrSlider" };
            tbx.SetBinding(TextBox.TextProperty, binding);
        }
    }
}

后台代码主要完成了以下功能：
 1）创建一个binding对象；

 2）设置了binding对象的Source和Path值；

 3）调用了目标（textbox）的SetBinding方法创建一个binding表达式，它连接了binding对象和目标依赖属性。

三、数据绑定的方向

我们可以通过设置Binding对象的Mode属性来控制数据绑定的方向。

OneWay：数据源改变时，更新目标；

TwoWay：双向更新；

OneWayToSource：目标改变时，更新数据源；

OneTime：只更新目标一次，使用数据源的初值，以后目标不再被更新；

Default：使用目标的默认绑定模式。

四、触发器---更新数据源的时机

仍然考虑上面滑动条和文本框的绑定关系，我们会发现当文本框的数值改变后，滑动条的滑块不会立即改变，而是在文本框失去焦点的时候，才会改变。

这就涉及到当目标属性变化的时候，数据源如何以及何时变化。

关于数据的更新方向和时机，可以参见下图：

当目标依赖属性发生变化，我们可以利用Binding对象的UpdateSourceTrigger属性来控制何时更新数据源，UpdateSourceTrigger属性值包括以下：

注：UpdateSourceTrigger属性值不影响目标的更新方式，它仅仅控制TwoWay模式或OneWayToSource模式的绑定更新源的方式。

而文本框正是使用LostFocus方式从目标向源进行更新的。

如果要完全控制源对象的更新时机，则可以选择UpdateSourceTrigger.Explicit模式。

此时就需要额外编写代码手动触发更新。可以添加一个Apply按钮，并在按钮的Click事件处理程序中调用BindingExpression.UpdateSource方法立即更新数据源。

参考代码以下：

<Window x:Class="BindingDemo1.MainWindow"
        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"
        xmlns:local="clr-namespace:BindingDemo1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <TextBox Name="tbx" Text="{Binding Path=Value, ElementName=sldrSlider,UpdateSourceTrigger=Explicit}" ></TextBox>
            <Slider Name="sldrSlider" Minimum="0" Maximum="100"></Slider>
            <Button Height="30" Width="100" Content="Apply" Click="Button_Click"></Button>
        </StackPanel>
    </Grid>
</Window>

using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;

namespace BindingDemo1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
           //Binding binding = new Binding() { ElementName = "sldrSlider",Path= new PropertyPath("Value")};
           //Binding binding = new Binding("Value") { ElementName = "sldrSlider" ,UpdateSourceTrigger=UpdateSourceTrigger.};
           //tbx.SetBinding(TextBox.TextProperty, binding);
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            //获得应用于文本框上的绑定
            BindingExpression be = tbx.GetBindingExpression(TextBox.TextProperty);
            //调用UpdateSource更新源对象
            be.UpdateSource();
        }
    }
}

 五、转换器

上面的例子中，当拖动滑动条的时候，文本框中显示的数字会显示好多位小数，现在我们想让在文本框中只显示两位小数，这时候就需要转换器来实现了。

定义：转化器是一个类，用于拦截数据源和目标之间的数据，拦截之后，就可以按照我们的意愿对数据进行操作。

转换器包括单值转换器和多值转换器。单值转换器需要实现IValueConverter接口，多值转换器需要实现IMultiValueConverter接口。

对于上面的需求，我们可以使用单值转换器，参考代码如下：

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;

namespace BindingDemo1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
           //Binding binding = new Binding() { ElementName = "sldrSlider",Path= new PropertyPath("Value")};
           //Binding binding = new Binding("Value") { ElementName = "sldrSlider" ,UpdateSourceTrigger=UpdateSourceTrigger.};
           //tbx.SetBinding(TextBox.TextProperty, binding);
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            //获得应用于文本框上的绑定
            BindingExpression be = tbx.GetBindingExpression(TextBox.TextProperty);
            //调用UpdateSource更新源对象
            be.UpdateSource();
        }
    }
    public class SliderValue2StringConverter:IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            double valueFromSource = (double)value;
            return valueFromSource.ToString("F2");//保留两位小数
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException("Method ConvertBack not implemented");
        }
    }
}

<Window x:Class="BindingDemo1.MainWindow"
        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"
        xmlns:local="clr-namespace:BindingDemo1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:SliderValue2StringConverter x:Key="s2vCvt"></local:SliderValue2StringConverter>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <TextBox Name="tbx" Text="{Binding Path=Value, ElementName=sldrSlider,UpdateSourceTrigger=Explicit,Converter={StaticResource ResourceKey=s2vCvt}}" ></TextBox>
            <Slider Name="sldrSlider" Minimum="0" Maximum="100"></Slider>
            <Button Height="30" Width="100" Content="Apply" Click="Button_Click"></Button>
        </StackPanel>
    </Grid>
</Window>

现在考虑以下场景，我们有一个椭圆，椭圆的颜色是根据RGB三个不同的分量变化的，我们让三个滑动条分别控制RGB三个分量，下面就用多值转换器进行实现。

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media;

namespace BindingDemo1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
           //Binding binding = new Binding() { ElementName = "sldrSlider",Path= new PropertyPath("Value")};
           //Binding binding = new Binding("Value") { ElementName = "sldrSlider" ,UpdateSourceTrigger=UpdateSourceTrigger.};
           //tbx.SetBinding(TextBox.TextProperty, binding);
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            //获得应用于文本框上的绑定
            BindingExpression be = tbx.GetBindingExpression(TextBox.TextProperty);
            //调用UpdateSource更新源对象
            be.UpdateSource();
        }
    }
    public class SliderValue2StringConverter:IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            double valueFromSource = (double)value;
            return valueFromSource.ToString("F2");//保留两位小数
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException("Method ConvertBack not implemented");
        }
    }
    public class Rgb2ColorConverter : IMultiValueConverter
    {
        //正向修改，整合颜色值
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            if (values == null || values.Length < 3)
                return null;
            byte r = System.Convert.ToByte(values[0]);
            byte g = System.Convert.ToByte(values[1]);
            byte b = System.Convert.ToByte(values[2]);
            Color myColor = Color.FromRgb(r, g, b);
            SolidColorBrush myBrush = new SolidColorBrush(myColor);
            return myBrush;
        }
        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException("Method ConvertBack not implemented");
        }

    }
}

<Window x:Class="BindingDemo1.MainWindow"
        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"
        xmlns:local="clr-namespace:BindingDemo1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:SliderValue2StringConverter x:Key="s2vCvt"></local:SliderValue2StringConverter>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="191*"/>
            <ColumnDefinition Width="326*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="111*"/>
            <RowDefinition Height="209*"/>
        </Grid.RowDefinitions>
        <StackPanel>
            <TextBox Name="tbx" Text="{Binding Path=Value, ElementName=sldrSlider,UpdateSourceTrigger=Explicit,Converter={StaticResource ResourceKey=s2vCvt}}" ></TextBox>
            <Slider Name="sldrSlider" Minimum="0" Maximum="100"></Slider>
            <Button Height="30" Width="100" Content="Apply" Click="Button_Click"></Button>
       
        </StackPanel>
        <StackPanel Grid.Column="1">
            <StackPanel Orientation="Horizontal">
                <Label Content="R:"></Label>
                <Slider Name="sldR" Foreground="Red" Width="300" Minimum="0" Maximum="255" Ticks="1"></Slider>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Label Content="G:"></Label>
                <Slider Name="sldG" Foreground="Red" Width="300" Minimum="0" Maximum="255" Ticks="1"></Slider>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Label Content="B:"></Label>
                <Slider x:Name="sldB" Foreground="Red" Width="300" Minimum="0" Maximum="255" Ticks="1"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Label Content="O:"></Label>
                <Slider Name="sldO" Foreground="Red" Width="300" Minimum="0" Maximum="1" Ticks="0.1" Value="0.5"></Slider>
            </StackPanel>

        </StackPanel>
        <Ellipse Grid.Row="1" Grid.Column="1" Stroke="Pink">
            <Ellipse.Resources>
                <local:Rgb2ColorConverter x:Key="colorCvt"></local:Rgb2ColorConverter>
            </Ellipse.Resources>
            <Ellipse.Fill>
                <MultiBinding Converter="{StaticResource colorCvt}">
                    <Binding ElementName="sldR" Path="Value"></Binding>
                    <Binding ElementName="sldG" Path="Value"></Binding>
                    <Binding ElementName="sldB" Path="Value"></Binding>
                </MultiBinding>
            </Ellipse.Fill>
            <Ellipse.Opacity>
                <Binding Path="Value" ElementName="sldO" >
                    
                </Binding>
            </Ellipse.Opacity>
        </Ellipse>
    </Grid>
</Window>

六、绑定的删除

我们可以使用类BindingOperations中的以下函数来删除绑定

public static void ClearAllBindings(DependencyObject target);
public static void ClearBinding(DependencyObject target, DependencyProperty dp);