.NET Maui PropertyChanged 事件未更新 XAML 視圖

Question

我正在構建 Maui Blazor 應用程序，但是我需要實現一個 QR 閱讀器，這需要我在 XAML 中使用它。在實現 QR 閱讀器之前，我正在測試如何使用簡單的 XAML 綁定 XAML label 但我無法獲得 48824888 4882488當支持應用程序 State 服務 class 屬性更改時更新。 然而，label 確實獲得了初始值，因此我假設綁定正在加載。 此外，當從我的 Blazor 接口更改屬性時，我可以看到調用了 OnPropertyChanged 方法並且值是正確的。

我在這里遵循示例： https://learn.microsoft.com/en-us/do.net/maui/xaml/fundamentals/mvvm

這是我的 Maui 程序：

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();
    }
}

這是我的應用程序 State 服務 class：

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>

提前致謝！

Answer 1

是的，數據綁定沒有問題，但我發現您使用的OnPropertyChanged method可能有一些問題。

您需要將CardType名稱作為參數添加到 OnPropertyChanged OnPropertyChanged method 。 當它更改時，OnPropertyChanged 方法可以注意到更改。

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

private void OnPropertyChanged(string propertyName)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}