zoukankan      html  css  js  c++  java
  • 数据绑定

    概念

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

     
    1


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

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

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

    绑定方式

    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

    绑定高度属性——如何绑定非文本属性

    如何绑定非文本属性,需要找到该属性对应的数据类型,给它一个相应的数据类型即可
    示例绑定的是Grid的RowDefinition,其数据类型是GridLength

    <RowDefinition Height="{Binding GridLength, Mode=TwoWay}"></RowDefinition>
    BindingContext = new HeightViewModel()
    {
        GridLength=new GridLength(200.00)
    };

    示例代码

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

  • 相关阅读:
    Chrome浏览器M53更新后超链接的dispatchEvent(evt)方法无法触发文件下载
    用es5实现模板字符串
    JS求数组最大值常用方法
    js生成随机数
    常用MouseEvent鼠标事件对象&KeyboardEvent键盘事件对象&常用键盘码
    原生js重写each方法
    indexdb开cai发keng实zhi践lu
    substring和substr的区别和使用
    前端常见面试题总结part2
    前端常见面试题总结1
  • 原文地址:https://www.cnblogs.com/Lulus/p/8179065.html
Copyright © 2011-2022 走看看