.NET Maui PropertyChanged 事件未更新 XAML 视图答案

【问题标题】：.NET Maui PropertyChanged event is not updating XAML view.NET Maui PropertyChanged 事件未更新 XAML 视图
【发布时间】：2022-09-28 17:03:03
【问题描述】：

我正在构建一个 Maui Blazor 应用程序，但是我需要实现一个 QR 阅读器，这需要我在 XAML 中使用它。在实现 QR 阅读器之前，我正在测试如何使用简单的 XAML 标签来使用 XAML 绑定，但是当支持 App State 服务类属性更改时，我无法更新标签。然而，标签确实获得了初始值，所以我假设绑定正在加载。此外，当从我的 Blazor 界面更改属性时，我可以看到调用了 OnPropertyChanged 方法并且值是正确的。

我在这里遵循示例：https://docs.microsoft.com/en-us/dotnet/maui/xaml/fundamentals/mvvm

这是我的 MauiProgram：

namespace MyNamespace;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
    var builder = MauiApp.CreateBuilder();

    builder
        .UseMauiApp<App>()
        .UseBarcodeReader()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont(\"OpenSans-Regular.ttf\", \"OpenSansRegular\");
        });

    builder.Services.AddScoped(sp => new HttpClient
    {
        Timeout = TimeSpan.FromMinutes(10)
    });
    builder.Services.AddSingleton<MainPage>();
    builder.Services.AddBlazorWebViewDeveloperTools();
    builder.Services.AddMauiBlazorWebView();        
    builder.Services.AddScoped<IAuthenticationService, AuthenticationService>();
    builder.Services.AddScoped<AuthenticationStateProvider, AuthStateProvider>();
    builder.Services.AddAuthorizationCore();
    builder.Services.AddScoped<AppStateService>();
    builder.Services.AddScoped<APIService>();
    builder.Services.AddScoped<CommonMethods>();

    string dbPath = Path.Combine(FileSystem.AppDataDirectory, \"LocalDb.db3\");
    builder.Services.AddDbContext<LocalDb>(options => options.UseSqlite($\"Filename={dbPath}\"));


    return builder.Build();
    }
}

这是我的应用状态服务类：

namespace MyNamespace.Data
{

public class AppStateService : INotifyPropertyChanged
{
    //My global app state management 
    private SortedLocalDb _db;

    public AppStateService(SortedLocalDb db) 
    {
        this.AppState = new AppState();
        _db = db;
    }

    public string _CardType = \"settings\";
    public string CardType
    {
        get => _CardType;
        set
        {
            if (_CardType != value)
            {
                _CardType = value;
                OnPropertyChanged(); // reports this property
            }
        }
    }
    
    public event Action OnChange;
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged([CallerMemberName] string name = \"\") =>
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    
    public void NotifyStateChanged() => OnChange?.Invoke();

    //removed other code for brevity but should be unrelated...

    }

}

这是我的 MainPage.xaml.cs：

using MyNamespace.Data;
using System.Globalization;

namespace MyNamespace;

public partial class MainPage : ContentPage
{
    public MainPage(AppStateService AppStateService)
    {
        InitializeComponent();

        this.BindingContext = AppStateService;
    }
}

这是 MainPage.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:b=\"clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui\"
         xmlns:local=\"clr-namespace:MyNamespace\"
         xmlns:data=\"clr-namespace:MyNamespace.Data\"
         BackgroundColor=\"{DynamicResource PageBackgroundColor}\">

<AbsoluteLayout>
    <Label
        x:Name=\"barcodeResult\"
        Text=\"{Binding CardType}\"
        SemanticProperties.HeadingLevel=\"Level1\"
        FontSize=\"32\"
        ZIndex=\"2\"          
      >
    </Label>

    <b:BlazorWebView HostPage=\"wwwroot/index.html\" 
                     AbsoluteLayout.LayoutBounds=\"0, 0, 1, 1\" 
                     AbsoluteLayout.LayoutFlags=\"All\"
                     ZIndex=\"0\">
        <b:BlazorWebView.RootComponents>
            <b:RootComponent Selector=\"#app\" ComponentType=\"{x:Type local:Main}\" />
        </b:BlazorWebView.RootComponents>
    </b:BlazorWebView>
</AbsoluteLayout>

提前致谢！

标签： c# xaml maui

【解决方案1】：

是的，Databinding没有问题，但是我发现你的OnPropertyChanged method使用可能有问题。

您需要将CardType 名称添加到OnPropertyChanged method 作为参数。当它改变 OnPropertyChanged 方法时可以注意到变化。

 public string _CardType = "settings";
 public string CardType
    {
        get => _CardType;
        set
        {
            if (_CardType != value)
            {
                _CardType = value;
                OnPropertyChanged("CardType"); 
            }
        }
    }

public void OnPropertyChanged([CallerMemberName] string name = "") =>
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));

【讨论】：