Skip to content

MAUI 数据绑定之属性绑定与格式化

Jump to bottom
L edited this page Mar 25, 2023 · 3 revisions

MAUI属性绑定是将一个控件的属性与另一个对象的属性进行绑定，从而实现两者之间的自动同步。这种绑定方式可以减少代码量，提高开发效率，同时也能让UI界面更加灵活，响应式。

下面我们看一个例子。
在XAML文件中定义一个Slider和一个Label控件，绑定它们的Value和Text属性：
StringFormat是用来格式化数据绑定输出的字符串的属性。它可以让开发者自定义绑定的输出格式。在这个例子中，StringFormat指定了绑定输出的格式，{0}代表绑定的值，F0表示格式化为浮点数（F），保留0位小数（0），即整数。因此，Label显示的文本为“The value is: X”，其中X是滑块的值，格式化后显示整数值。

<StackLayout>
    <Slider x:Name="slider"
            Minimum="0"
            Maximum="100"
            Value="{Binding SliderValue}" />
    <Label Text="{Binding SliderValue, StringFormat='The value is: {0:F0}'}" />
</StackLayout>

在代码后端定义一个ViewModel类，声明SliderValue属性：

public class SliderValueViewModel : BaseNotifyPropertyChanged
{
    private double sliderValue;

    public double SliderValue
    {
        get => sliderValue;
        set
        {
            sliderValue = value;
            Notification(nameof(SliderValue));
        }
    }
}

在页面代码后端设置BindingContext，并将ViewModel实例赋给BindingContext：

public partial class DataConversionPage : ContentPage
{
	public DataConversionPage()
	{
		InitializeComponent();

		BindingContext = new SliderValueViewModel();
	}
}

实现的效果是当用户移动Slider时，Label的内容将更新为Slider的值，并显示为"The value is: X"的格式，其中X是Slider的实际值。这是通过属性绑定实现的，当Slider的值发生变化时，绑定的ViewModel属性也会相应地更新，从而触发INotifyPropertyChanged事件，从而更新绑定的Label的内容。

补充：BaseNotifyPropertyChanged类实现INotifyPropertyChanged接口

public class BaseNotifyPropertyChanged : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void Notification(string name)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
}

效果如图：
10

示例代码

PropertyBindingWithFormatPage.xaml
PropertyBindingWithFormatPage.xaml.cs

参考资料

绑定路径
字符串格式设置

Clone this wiki locally