MAUI学习笔记（三）-视图绑定模型

一、创建实体模型-About.cs

using System;

namespace Test.Models
{
    /// <summary>
    /// 关于页
    /// </summary>
    public class About
    {
        /// <summary>
        /// App标题
        /// </summary>
        public string Title=> AppInfo.Name;
        /// <summary>
        /// App版本
        /// </summary>
        public string Version => AppInfo.VersionString;
        /// <summary>
        /// 信息
        /// </summary>
        public string Text => "Holle World!";
    }
}

二、创建视图-AboutPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:models="clr-namespace:Test.Models"
             x:Class="Test.Views.AboutPage"
             Title="关于页">
    <ContentPage.BindingContext>
        <models:About />
    </ContentPage.BindingContext>
    <VerticalStackLayout>
        <HorizontalStackLayout Spacing="10">
            <Image Source="dotnet_bot.png"
                   SemanticProperties.Description="你好!"
                   HeightRequest="64" />
            <Label FontSize="22" FontAttributes="Bold" Text="{Binding Title}" VerticalOptions="End" />
            <Label FontSize="22" Text="{Binding Version}" VerticalOptions="End" />
        </HorizontalStackLayout>
        <Label Text="{Binding Text}" />
    </VerticalStackLayout>
</ContentPage>

  1、AboutPage.xaml视图页引用模型类所在的路径：xmlns:models="clr-namespace:Test.Models"；

  2、AboutPage.xaml根元素ContentPage添加BindingContext属性用来绑定数据：

<ContentPage.BindingContext>
        <models:About />
    </ContentPage.BindingContext>

  3、使用 {Binding ..}来给控件的属性绑定实体中的数据，例如：<Label Text="{Binding Version}" />

作者：꧁执笔小白꧂