美文网首页Xamarin
Data Bindings 数据绑定

Data Bindings 数据绑定

作者: 落地成佛 | 来源:发表于2017-12-07 15:03 被阅读9次

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

一、控件间绑定

//1.使用BindingContext确定绑定源格式:{x:Reference Name=xxx}"
//2.使用Binding 确定绑定属性格式:{Binding Path=Value}
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.SliderBindingsPage"
             Title="Slider Bindings Page">

    <StackLayout>
        <Label Text="ROTATION"
               BindingContext="{x:Reference Name=slider}"//确定绑定源
               Rotation="{Binding Path=Value}"//绑定Value属性 即当slider发生改变时label会发生相应的旋转
               FontAttributes="Bold"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <Slider x:Name="slider"
                Maximum="360"
                VerticalOptions="CenterAndExpand" />

        <Label BindingContext="{x:Reference slider}"
               Text="{Binding Value, StringFormat='The angle is {0:F0} degrees'}"
               FontAttributes="Bold"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

二、后台数据绑定

//引用静态属性
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"//引用后台命名空间
             x:Class="XamlSamples.OneShotDateTimePage"
             Title="One-Shot DateTime Page">

    <StackLayout BindingContext="{x:Static sys:DateTime.Now}"//绑定了DateTime.Now
                 HorizontalOptions="Center"
                 VerticalOptions="Center">

        <Label Text="{Binding Year, StringFormat='The year is {0}'}" />//使用绑定属性year
        <Label Text="{Binding StringFormat='The month is {0:MMMM}'}" />
        <Label Text="{Binding Day, StringFormat='The day is {0}'}" />
        <Label Text="{Binding StringFormat='The time is {0:T}'}" />

    </StackLayout>
</ContentPage>
//MVVM
//1.后台
using System;
using System.ComponentModel;
using Xamarin.Forms;

namespace XamlSamples
{
    public class HslViewModel : INotifyPropertyChanged
    {
        double hue, saturation, luminosity;
        Color color;

        public event PropertyChangedEventHandler PropertyChanged;

        public double Hue
        {
            set
            {
                if (hue != value)
                {
                    hue = value;
                    OnPropertyChanged("Hue");
                    SetNewColor();
                }
            }
            get
            {
                return hue;
            }
        }

        public double Saturation
        {
            set
            {
                if (saturation != value)
                {
                    saturation = value;
                    OnPropertyChanged("Saturation");
                    SetNewColor();
                }
            }
            get
            {
                return saturation;
            }
        }

        public double Luminosity
        {
            set
            {
                if (luminosity != value)
                {
                    luminosity = value;
                    OnPropertyChanged("Luminosity");
                    SetNewColor();
                }
            }
            get
            {
                return luminosity;
            }
        }

        public Color Color
        {
            set
            {
                if (color != value)
                {
                    color = value;
                    OnPropertyChanged("Color");

                    Hue = value.Hue;
                    Saturation = value.Saturation;
                    Luminosity = value.Luminosity;
                }
            }
            get
            {
                return color;
            }
        }

        void SetNewColor()
        {
            Color = Color.FromHsla(Hue, Saturation, Luminosity);
        }

        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
//2.xamal
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamlSamples;assembly=XamlSamples"
             x:Class="XamlSamples.HslColorScrollPage"
             Title="HSL Color Scroll Page">
    <ContentPage.BindingContext>
        <local:HslViewModel Color="Aqua" />
    </ContentPage.BindingContext>

    <StackLayout Padding="10, 0">
        <BoxView Color="{Binding Color}"
                 VerticalOptions="FillAndExpand" />

        <Label Text="{Binding Hue, StringFormat='Hue = {0:F2}'}"
               HorizontalOptions="Center" />

        <Slider Value="{Binding Hue, Mode=TwoWay}" />

        <Label Text="{Binding Saturation, StringFormat='Saturation = {0:F2}'}"
               HorizontalOptions="Center" />

        <Slider Value="{Binding Saturation, Mode=TwoWay}" />

        <Label Text="{Binding Luminosity, StringFormat='Luminosity = {0:F2}'}"
               HorizontalOptions="Center" />

        <Slider Value="{Binding Luminosity, Mode=TwoWay}" />
    </StackLayout>
</ContentPage>
//Commanding 

相关文章

  • Data Bindings 数据绑定

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

  • Xamarin.forms目录

    1、Data Bindings 数据绑定2、Page 页面3、Resources 资源4、DependencySe...

  • ReactiveSwift框架分析6 — 操作符

    <~操作符 <~的左边是绑定目标(BindingTargetProvider), 右边则是数据源(BindingS...

  • Data Binding初步体验

    前言 Data Binding,就是数据绑定的意思。Data Binding 在布局文件中实现数据绑定声明,使数据...

  • vue-数据绑定

    1.单项数据绑定数据只能从data流向页面2.双向数据绑定数据能让data流向页面,还可以冲页面流向data

  • 微信小程序的数据绑定

    数据绑定 WXML中的动态数据均来自对应Page的data。 简单绑定 数据绑定使用"Mustache"语法(双大...

  • vue的重要组件

    data里面绑定的数据对象 methods:绑定方法属性。console.log(this.a)打印的就是data...

  • vue日常坑1

    父子通信 双向绑定时,应该直接绑定data中的数据,不要绑定props中的数据,不然会报错

  • 微信小程序的数据绑定

    数据绑定 几种数据绑定方式。jQuery Vue 微信小程序 注意 data 是一个字典。 获取和修改 data...

  • Vue双向数据绑定v-model

    v-model 数据双向绑定用作双向数据绑定 一、组件内部双向数据绑定 1、在实例的data中,设置content...

网友评论

    本文标题:Data Bindings 数据绑定

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