MAUI新生2.1-数据绑定和MVVM：数据绑定基础

一、基本概念

1、数据绑定，链接两个对象的属性，其中一个对象作为绑定源，另一个对象作为绑定目标。两个链接的属性之间，可以实现双向、单向或单次等丰富的数据响应，一方数据发生变化，另一方做出同步响应。绑定目标几乎总是页面元素，而绑定源可能是同一页面某一元素，也可能是后台代码文件中某一对象。

2、数据绑定的另一个显著特征是，绑定源对绑定目标是无感的，它不需要知道哪些目标绑定了它。只要是可绑定对象（BindableObject），并具有可绑定属性（BindableProperty），就可以作为绑定源，而绝不多数控件都是可绑定对象，绝不多数控件属性都是可绑定属性，MVVM模式中的ViewModel也是可绑定对象。所以，绑定设置主要在绑定目标上进行，主要完成以下两个工作：①通过BindingContext属性设置绑定源，或直接通过Binding扩展标记设置绑定源；②通过Binding扩展标记设置绑定的Path（绑定源的绑定属性）。其中BindingContext（绑定上下文）比较特殊，可以将绑定上下文设置在控件树的上级元素上，绑定目标会延着控件树向上找，以最先找到的上下文为准，这叫绑定上下文继承。

一、数据绑定的五种实现方式（以同一页面元素之间的绑定为例）

1、以下案例实现Lable/文本控件的Text值，与Slider/滑块控件的Value值绑定。Lable是绑定目标，Slider是绑定源。提供了5种实现方式。 

<!--实现方式①：BindingContext和Binding都在绑定目标上设置-->
<VerticalStackLayout>
    <!--StringFormat实现格式化字符串输出。{0:F0}，其中0表示变量占位符，F0表示小数位为0位的浮点值-->
    <Label BindingContext="{x:Reference slider}" Text="{Binding Path=Value, StringFormat='滑块值为：{0:F0}'}" />
    <Slider x:Name="slider" Maximum="360" />
</VerticalStackLayout>


<!--实现方式②：BindingContext上控制树的上级元素中设置-->
<VerticalStackLayout BindingContext="{x:Reference slider}">
    <!--Path是内容属性，可以省略，即{Binding Value}-->
    <Label Text="{Binding Path=Value, StringFormat='滑块值为：{0:F0}'}" />
    <Slider x:Name="slider" Maximum="360" />
</VerticalStackLayout>


<!--实现方式③：直接在Binding扩展标记上设置绑定源-->
<VerticalStackLayout>
    <Label Text="{Binding Source={x:Reference slider}, Path=Value, StringFormat='滑块值为：{0:F0}'}" />
    <Slider x:Name="slider" Maximum="360" />
</VerticalStackLayout>


<!--实现方式④：通过后台代码设置数据绑定，使用BindingContext-->
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        label.BindingContext = slider;
        label.SetBinding(Label.TextProperty,"Value",stringFormat:"滑块值为：{0:F0}");
    }
}


<!--实现方式⑤：通过后台代码设置数据绑定，不使用BindingContext-->
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        label.SetBinding(Label.TextProperty,new Binding("Value",source:slider,stringFormat:"滑块值为：{0:F0}"));
    }
}

二、绑定基础配置

1、绑定路径Path：通过绑定路径，选择绑定源的链接属性。如果属性为复杂类型或带索引的集合类型，可以通过点运算符或索引运算符选择子属性

<!--  绑定TimePicker的Time属性的子属性Hours  -->
<VerticalStackLayout HorizontalOptions="Center">
    <Label
        x:Name="label"
        BindingContext="{x:Reference timePicker}"
        Text="{Binding Time.Hours}" />
    <TimePicker x:Name="timePicker" />
</VerticalStackLayout>


<!--  绑定源为ContentPage，Content属性为VerticalStackLayout  -->
<!--  VerticalStackLayout的Children属性是一个集合，通过索引获得第label1  -->
<!--  最后绑定到label1的Text属性的Length属性  -->
<ContentPage
    x:Class="MauiApp8.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Name="page">

    <VerticalStackLayout HorizontalOptions="Center">
        <Label x:Name="label1" Text="HelloWorld" />
        <Label x:Name="label2" TText="{Binding Source={x:Reference page}, Path=Content.Children[0].Text.Length}" />
    </VerticalStackLayout>

</ContentPage>

2、绑定模式BindingMode：通过设置绑定模式，可以规定两个链接属性之间数据响应的方式，有以下几种方式：

• TwoWay：数据在源和目标之间双向移动
• OneWay：数据从源流向目标
• OneWayToSource：数据从目标流向源
• OneTime：数据从源流向目标，但仅在更改BindingContext时，响应一次
• Default：默认值，大多数绑定目标的属性是OneWay，少部分是TwoWay，如：Editor/Entry/SercherBar/EntryCell的Text属性，DatePicker的Date属性，TimePicker的Time属性，Picker的SelectedIndex和SelectedItem属性，Slilder和Stepper的Value属性，Switch的IsToggled属性，SwitchCell的On属性，MultiPage的SelectedItem属性，ListView的IsRefreshing属性，其中大部分是表单类控件。

<!--在XAML中设置-->
<VerticalStackLayout>
    <Label
        x:Name="label"
        BindingContext="{x:Reference slider}"
        Scale="{Binding Value, Mode=TwoWay}"
        Text="HelloWorld!"/>
    <Slider x:Name="slider" Maximum="360" />
</VerticalStackLayout>


<!--在后台代码C#中设置-->
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        label.BindingContext = slider;
        label.SetBinding(Label.ScaleProperty, "Value", BindingMode.TwoWay);
    }
}

3、绑定数据源的字符串格式化

如果绑定目标的属性为字符串，且绑定模式为OneWay或TwoWay，可以使用StringFormat对数据源进行格式化。<Label Text="{Binding Value,StringFormat='The slider value is {0:F2}'}" /> 。如上例，{0:F2}，其中0为绑定源数据值的占位符号，F2为输出格式。需要注意的是，即使绑定模式为TwoWay，使用StringFormat后，数据仅从源流向目标。