美文网首页
数据绑定

数据绑定

作者: Lulus | 来源:发表于2018-01-02 20:43 被阅读0次

概念

数据绑定连接两个对象,称为源和目标。源对象提供数据。目标对象将消耗(并经常显示)来自源对象的数据。例如,Label(目标对象)通常将其Text属性绑定到源对象中的公共字符串属性。下图说明了绑定关系:

1
数据绑定的主要好处是您不再需要担心在视图和数据源之间同步数据。源对象中的更改被绑定框架自动推送到目标对象的幕后,目标对象中的更改可以选择性地推回到源对象

建立数据绑定是一个两步过程

目标对象的BindingContext属性必须设置为源
目标和来源之间必须建立约束。在XAML中,这是通过使用绑定标记扩展来实现的。在C#中,这是通过SetBinding方法实现的
有关数据绑定的更多信息,请参阅https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-basics/data_binding_basics/

绑定方式

1.XAML
2.C#

XAML

前端Binding

<StackLayout Padding="0,20,0,0">
    <Label Text="Forename:" />
    <Entry Text="{Binding Forename, Mode=TwoWay}" />
    <Label Text="Surname:" />
    <Entry Text="{Binding Surname, Mode=TwoWay}" />
    <StackLayout Padding="0,20,0,0" Orientation="Horizontal">
        <Label Text="Your forename is:" />
        <Label Text="{Binding Forename}" />
    </StackLayout>
    <StackLayout Orientation="Horizontal">
        <Label Text="Your surname is:" />
        <Label Text="{Binding Surname}" />
    </StackLayout>
</StackLayout>

后台BindingContext赋值

BindingContext = new DetailsViewModel();

DetailsViewModel类

public class DetailsViewModel : INotifyPropertyChanged
{
    string forename, surname;

    public string Forename
    {
        get
        {
            return forename;
        }
        set
        {
            if (forename != value)
            {
                forename = value;
                OnPropertyChanged("Forename");
            }
        }
    }

    public string Surname
    {
        get
        {
            return surname;
        }
        set
        {
            if (surname != value)
            {
                surname = value;
                OnPropertyChanged("Surname");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        var changed = PropertyChanged;
        if (changed != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

示例代码

https://github.com/zLulus/NotePractice/tree/dev3/Xamarin.Forms/XamarinDemo/XamarinDemo/XamarinDemo/Bindings 的BindingFirstName2

使用内置模板TextCell进行数据绑定(C#)

进行数据绑定

//Model
Employee employeeToDisplay = new Employee();

//输入框
var firstNameEntry = new Entry()
{
    HorizontalOptions = LayoutOptions.FillAndExpand
};
//绑定  下面两个绑定,任选其一即可   
this.BindingContext = employeeToDisplay;
firstNameEntry.SetBinding(Entry.TextProperty, "FirstName");

Employee类
实现接口INotifyPropertyChanged,FirstName在set时,触发OnPropertyChanged方法

public class Employee : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    string _firstName;
    public string FirstName
    {
        get { return _firstName; }
        set
        {
            if (value.Equals(_firstName, StringComparison.Ordinal))
            {
                // Nothing to do - the value hasn't changed;
                return;
            }
            _firstName = value;
            OnPropertyChanged();

        }
    }

    void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        var handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

查看绑定结果

//查询按钮
Button getValueButton = new Button();
getValueButton.Text = "查看结果";
getValueButton.Clicked += (async (sender, e) =>
{
    await DisplayAlert("绑定结果",$"当前Entry的Text是{firstNameEntry.Text},后台实体的FirstName是{employeeToDisplay.FirstName}","确定");
});

示例代码

https://github.com/zLulus/NotePractice/tree/dev3/Xamarin.Forms/XamarinDemo/XamarinDemo/XamarinDemo/Bindings 的BindingFirstName

相关文章

  • AngularJs数据绑定

    数据的绑定:单项数据绑定和双向数据绑定 1、单项数据绑定(模型到视图) 运行结果: 其中绑定数据有两种方式:“{{...

  • 六、ASP.NET之数据绑定控件(一)

    数据绑定控件 简单数据绑定 1、数据绑定的实现方式分为: (1)简单绑定 (a)表达式绑定 (b)方法绑定 (2...

  • Data Bindings 数据绑定

    数据绑定 分为两种:1.控件间绑定 2.后台数据绑定 一、控件间绑定 二、后台数据绑定

  • 第十三章 数据绑定

    数据绑定介绍 Spring MVC是怎样完成的数据绑定 在数据绑定过程中,Spring MVC框架会通过数据绑定组...

  • Vue和React数据绑定对比

    在数据绑定上来说,vue的特色是双向数据绑定,而在react中是单向数据绑定。 一 单向和双向数据绑定其实不是完全...

  • 数据的绑定 --- 双向绑定

    数据双向绑定 : 视图的数据可以绑定到模型当中,模型的数据可以绑定到视图当中 想要实现视图的数据绑定到模型当中,必...

  • AppWorker教程-数据绑定

    数据绑定 数据绑定是在应用程序 UI 与数据源建立连接的过程。如果绑定正确数据,则当数据更改其值时,绑定到数据的U...

  • Angular入门0

    Angular 绑定数据 数据文本绑定 绑定HTML 3.声明属性的几种方式 4.绑定属性用[]包裹 5.数据循环...

  • Vue入门(二)——数据绑定

    一、什么是双向数据绑定 双向数据绑定是Vue的核心功能之一。所谓双向数据绑定是指:HTML标签上的数据绑定到Vue...

  • Vue之表单双向数据绑定和组件

    三、表单双向数据绑定和组件 目录:双向数据绑定、组件 1.双向数据绑定 1)什么是双向数据绑定Vue.js是一个M...

网友评论

      本文标题:数据绑定

      本文链接:https://www.haomeiwen.com/subject/lswqnxtx.html