Silverlight的数据绑定

最新推荐文章于 2017-10-12 17:30:00 发布

蝈蝈俊

最新推荐文章于 2017-10-12 17:30:00 发布

阅读量3.5k

点赞数

分类专栏： Silverlight 文章标签： silverlight binding button textbox object class

本文链接：https://blog.youkuaiyun.com/ghj1976/article/details/5089740

版权

Silverlight 专栏收录该内容

32 篇文章

订阅专栏

Silverlight数据绑定有三种模式（没有WPF的 OneWayToSource 模式），如下：

OneTime：一次绑定，在绑定创建时使用源数据更新目标，适用于只显示数据而不进行数据的更新。这是绑定的默认情况。
OneWay：单向绑定，在绑定创建时或者源数据发生变化时更新到目标，适用于显示变化的数据。
TwoWay：双向绑定，在任何时候都可以同时更新源数据和目标。

下面是这三种的代码演示：

OneTime 绑定

这种数据绑定模式，只是显示数据而不对数据做任何修改，默认的绑定模式就是OneTime绑定。

绑定到一个实体的一个属性：

Xaml 文件

<TextBlock x:Name="tb_1" Text="{Binding I}"  Margin="100,50,100,200" />

或者可以稍稍复杂的写法：

<TextBlock x:Name="tb_1" Text="{Binding Path=I}"  Margin="100,50,100,200" />

CS 代码文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApplication_Binding
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            BindingDemoObject o = new BindingDemoObject();
            o.I = 15;
            tb_1.DataContext = o;
        }
    }

    public class BindingDemoObject
    {
        public int I {get;set;}
    }
}

如果要绑定到一个实体，则演示代码如下：

<TextBlock x:Name="tb_1" Text="{Binding}"  Margin="100,50,100,200" />

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    int w = 30;
    tb_1.DataContext = w;
    // 当然也可以写成:
    // tb_1.DataContext = 30;
}

OneWay 绑定

如果需要在数据源发生变化时能够通知UI进行相应的更新，则需要使用单向绑定OneWay或者双向绑定TwoWay。

若要支持 OneWay 或 TwoWay 绑定，从而使绑定目标属性能够自动反映绑定源的动态更改（例如，用户编辑窗体后，预览窗格会自动更新），类需要提供相应的属性更改通知。即创建实现 INotifyPropertyChanged 的类。

下面要演示的例子是当点击按钮时，实体的一个属性发生变化，继而前台显示也发生变化。

Xaml 文件

<Grid x:Name="LayoutRoot" Background="White">
        <TextBlock x:Name="tb_1" Text="{Binding I, Mode=OneWay}"  Margin="100,50,100,200" />
        <Button Content="变化"   Margin="222,112,0,0" Name="button1" Width="75" Click="button1_Click" />

  
  Grid>

CS 代码文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;


namespace SilverlightApplication_Binding
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        BindingDemoObject o = new BindingDemoObject();

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            o.I = 15;
            tb_1.DataContext = o;
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            o.I = 58;
        }
    }

    public class BindingDemoObject : System.ComponentModel.INotifyPropertyChanged
    {
        private int _i = 0;

        public int I
        {
            get
            {
                return _i;
            }
            set
            {
                _i = value;
                OnPropertyChanged("I");
            }
        }

        /// 
        /// Declare the event
        /// 
        public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;

        /// 
        /// Create the OnPropertyChanged method to raise the event
        /// 
        /// 
        protected void OnPropertyChanged(string name)
        {
            System.ComponentModel.PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new System.ComponentModel.PropertyChangedEventArgs(name));
            }
        }

    }
}

TwoWay 绑定

网上很多例子没有 Twoway的演示，下面就是一个 Twoway的演示。

Xaml 文件

<UserControl
	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"
	x:Class="SilverlightApplication_TwoWayBinding.MainPage"
	Width="400" Height="200" mc:Ignorable="d">
	<Grid x:Name="LayoutRoot" Background="White">
		<Ellipse Fill="#FF2F70C0" Stroke="Black" Height="57" HorizontalAlignment="Left" Margin="52,28,0,0" VerticalAlignment="Top" Width="{Binding Value, ElementName=silderSelf, Mode=OneWay}" />
		<Slider x:Name="silderSelf" Height="30" Margin="52,103,48,0" VerticalAlignment="Top" Maximum="300" Minimum="10" LargeChange="10" SmallChange="1" Value="100" Width="300"/>
		<TextBox Height="30" HorizontalAlignment="Left" Margin="52,150,0,0" VerticalAlignment="Top" Width="150" Text="{Binding Value, ElementName=silderSelf, Mode=TwoWay}" TextWrapping="Wrap"/>
	
  
  Grid>

   
   UserControl>

演示效果：

style="width: 400px; height: 200px" src="http://silverlight.services.live.com/invoke/111821/TwoWay%20Binding%20Demo/iframe.html" frameborder="0" scrolling="no">

解释：

这里我们把椭圆的宽度和 TextBox 的值捆绑到 Slider 的值。
对椭圆的捆绑是 OneWay 模式，表示只是读取Slider 的值。

TextBox 的捆绑则是 TwoWay，表示我们即可以接受 Slider 的值,也可以设置 Slider 的值。当 TextBox 中输入了值，按 Tab 离开焦点后，我们就可以看到 Slider 和椭圆的值都发生变化了。

当我们移动 Slider 时， TextBox 的值和椭圆的宽度都发生变化。

参考资料：

一步一步学Silverlight 2系列（11）：数据绑定
http://www.cnblogs.com/Terrylee/archive/2008/03/08/Silverlight2-step-by-step-part11-Data-Binding.html

如何在Blend设置数据绑定
http://msdn.microsoft.com/zh-cn/library/cc295161(Expression.30).aspx

silverlight数据绑定模式TwoWay,OneWay,OneTime的研究
http://www.cnblogs.com/yjmyzz/archive/2009/11/09/1599058.html