.NET MAUI中如何向子组件传递变量？自定义消息组件实现

你设想的<views:MessageView MessageText={Binding ErrMsg} MessageType={Binding Type} />写法完全可以实现，核心是给自定义组件定义绑定属性（BindableProperty），这样才能支持MVVM模式下的数据绑定。下面是具体实现步骤：

1. 创建可复用的MessageView组件 #

首先定义一个继承自ContentView的自定义组件，包含消息文本和类型的绑定属性，同时根据类型动态调整样式。

MessageView.xaml #

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.Views.MessageView">
    <!-- 用Frame作为容器，方便调整背景色等样式 -->
    <Frame x:Name="MessageFrame" Padding="12" CornerRadius="6" Margin="0">
        <Label Text="{Binding MessageText, Source={RelativeSource AncestorType={x:Type views:MessageView}}}"
               TextColor="White" FontSize="14" />
    </Frame>
</ContentView>

MessageView.xaml.cs #

using Microsoft.Maui.Controls;

namespace YourApp.Views;

public partial class MessageView : ContentView
{
    // 定义MessageText绑定属性，支持数据绑定
    public static readonly BindableProperty MessageTextProperty =
        BindableProperty.Create(nameof(MessageText), typeof(string), typeof(MessageView), string.Empty);

    public string MessageText
    {
        get => (string)GetValue(MessageTextProperty);
        set => SetValue(MessageTextProperty, value);
    }

    // 定义MessageType绑定属性，附带属性变更回调用于更新样式
    public static readonly BindableProperty MessageTypeProperty =
        BindableProperty.Create(nameof(MessageType), typeof(MessageType), typeof(MessageView), MessageType.Info,
            propertyChanged: OnMessageTypeChanged);

    public MessageType MessageType
    {
        get => (MessageType)GetValue(MessageTypeProperty);
        set => SetValue(MessageTypeProperty, value);
    }

    public MessageView()
    {
        InitializeComponent();
        UpdateFrameAppearance(MessageType);
    }

    // 属性变更时触发样式更新
    private static void OnMessageTypeChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is MessageView view && newValue is MessageType type)
        {
            view.UpdateFrameAppearance(type);
        }
    }

    // 根据消息类型调整Frame样式
    private void UpdateFrameAppearance(MessageType type)
    {
        switch (type)
        {
            case MessageType.Success:
                MessageFrame.BackgroundColor = Colors.Green.WithAlpha(0.9f);
                break;
            case MessageType.Error:
                MessageFrame.BackgroundColor = Colors.Red.WithAlpha(0.9f);
                break;
            case MessageType.Warning:
                MessageFrame.BackgroundColor = Colors.Orange.WithAlpha(0.9f);
                break;
            case MessageType.Info:
            default:
                MessageFrame.BackgroundColor = Colors.Blue.WithAlpha(0.9f);
                break;
        }
    }
}

// 定义消息类型枚举，方便区分不同场景
public enum MessageType
{
    Info,
    Success,
    Warning,
    Error
}

2. 在MVVM模式下使用组件 #

接下来在父页面的ViewModel中定义对应的属性，实现INotifyPropertyChanged接口以支持属性变更通知。

示例ViewModel #

using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;
using Microsoft.Maui.Controls;

namespace YourApp.ViewModels;

public class MainViewModel : INotifyPropertyChanged
{
    private string _errMsg = "用户输入格式错误";
    private MessageType _type = MessageType.Error;

    public string ErrMsg
    {
        get => _errMsg;
        set
        {
            _errMsg = value;
            OnPropertyChanged();
        }
    }

    public MessageType Type
    {
        get => _type;
        set
        {
            _type = value;
            OnPropertyChanged();
        }
    }

    // 测试用命令：切换为成功消息
    public ICommand SwitchToSuccessCommand => new Command(() =>
    {
        ErrMsg = "数据提交成功！";
        Type = MessageType.Success;
    });

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

父页面XAML引用组件 #

在父页面中设置BindingContext为ViewModel，然后按你设想的方式绑定属性：

<?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:views="clr-namespace:YourApp.Views"
             xmlns:viewModels="clr-namespace:YourApp.ViewModels"
             x:Class="YourApp.Views.MainPage">
    <ContentPage.BindingContext>
        <viewModels:MainViewModel />
    </ContentPage.BindingContext>

    <VerticalStackLayout Padding="20" Spacing="15">
        <!-- 你的其他页面内容 -->
        <views:MessageView MessageText="{Binding ErrMsg}" MessageType="{Binding Type}" />
        
        <!-- 测试按钮：点击后切换消息类型和文本 -->
        <Button Text="标记为成功" Command="{Binding SwitchToSuccessCommand}" />
    </VerticalStackLayout>
</ContentPage>

关键注意点 #

• 必须使用BindableProperty而非普通CLR属性：只有绑定属性才能在XAML中支持数据绑定，普通属性无法响应ViewModel的属性变更。
• 属性变更回调：通过propertyChanged参数可以在消息类型变化时自动更新组件样式，无需手动触发。
• MVVM兼容性：只要ViewModel正确实现INotifyPropertyChanged，组件会自动同步属性值的变化。

内容的提问来源于stack exchange，提问作者yorick