为什么 MAUI 中的 Switch 和 ListView 控件不更新 2 向绑定？

Question

这个问题是关于两个 MAUI 控制（Switch 和 ListView）——我问的是同一个问题，因为我是预期两个控件的问题根本原因相同。它们完全有可能是不同的问题，只是有一些共同的症状。（CollectionView 有类似的问题，但其他混杂因素使其更难以证明。）

我在我的 MAUI 应用程序中使用双向数据绑定：对数据的更改可以直接来自用户，也可以来自检查规范数据是否已被访问的后台轮询任务其他地方变了。我面临的问题是视图模型的更改不会 视觉上 传播到 Switch.IsToggled 和 ListView.SelectedItem 属性，即使控件确实引发事件显示他们已经“注意到”了属性的变化。其他控件（例如 Label 和 Checkbox）是视觉更新，表明视图模型通知工作正常并且 UI 本身通常是健康的.

构建环境：Visual Studio2022 17.2.0预览版2.1
应用环境：Android，模拟器“Pixel 5 - API 30”或真正的 Pixel 6

示例代码都在下面，但根本问题是这是否是我代码中某处的错误（我是否需要“告诉”控件出于某种原因更新它们自己？）或者可能是 MAUI（在这种情况下我大概应该报告它）？

示例代码

下面的示例代码可以直接添加“File new project”MAUI app（名称为“MauiPlayground”以使用相同的命名空间），也可以全部使用from my demo code repo .每个示例都相互独立 - 您可以只尝试一个。（然后更新 App.cs 以将 MainPage 设置为正确的示例。）

这两个例子都有一个非常简单的情况：一个控件双向绑定到视图模型，以及一个更新视图模型的按钮属性（模拟“数据已在别处修改” “在真正的应用程序中）。在这两种情况下，控件在视觉上都保持不变。

请注意，我在这两种情况下都指定了 {Binding ..., Mode=TwoWay}，即使这是这些属性的默认设置，只是为了非常清楚不是问题。

ViewModelBase 代码由两个示例共享，并且只是一种无需任何额外依赖项即可引发 INotifyPropertyChanged.PropertyChanged 的简便方法：

ViewModelBase.cs:

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace MauiPlayground;

public class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public bool SetProperty<T>(ref T field, T value, [CallerMemberName] string name = null)
    {
        if (EqualityComparer<T>.Default.Equals(field, value))
        {
            return false;
        }
        field = value;
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        return true;
    }
}

切换示例代码

SwitchDemo.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"
             x:Class="MauiPlayground.SwitchDemo">
    <StackLayout>
        <Label Text="Switch binding demo" />
        <HorizontalStackLayout>
            <Switch x:Name="switchControl"
                    IsToggled="{Binding Toggled, Mode=TwoWay}"
                    Toggled="Toggled" />
            <CheckBox IsChecked="{Binding Toggled, Mode=TwoWay}" />
            <Label Text="{Binding Toggled}" />
        </HorizontalStackLayout>

        <Button Text="Toggle" Clicked="Toggle" />
        <Label x:Name="manualLabel1" Text="Value set in button click handler" />
        <Label x:Name="manualLabel2" Text="Value set in toggled handler" />
    </StackLayout>
</ContentPage>

SwitchDemo.cs

namespace MauiPlayground;

public partial class SwitchDemo : ContentPage
{
    public SwitchDemo()
    {
        InitializeComponent();
        BindingContext = new ViewModel();
    }

    private void Toggle(object sender, EventArgs e)
    {
        var vm = (ViewModel)BindingContext;
        vm.Toggled = !vm.Toggled;
        manualLabel1.Text = $"Set in click handler: {switchControl.IsToggled}";
    }

    private void Toggled(object sender, ToggledEventArgs e) =>
        manualLabel2.Text = $"Set in toggled handler: {switchControl.IsToggled}";

    private class ViewModel : ViewModelBase
    {
        private bool toggled;
        public bool Toggled
        {
            get => toggled;
            set => SetProperty(ref toggled, value);
        }
    }
}

单击更新视图模型的“切换”按钮后模拟器的屏幕截图：

备注：

复选框（绑定到同一 VM 属性）已更新
复选框旁边的标签（绑定到同一 VM 属性）已更新
按钮下方的标签表示 switch.IsToggled 为真
下面的标签表明 Switch.Toggled 事件已经发生
Switch本身没有改变可见状态

直接单击 Switch 控件确实可以直观地切换它。

ListView 示例代码

ListViewDemo.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"
             x:Class="MauiPlayground.ListViewDemo">
    <StackLayout>
        <Label Text="ListView binding demo" />
        <ListView x:Name="listView" ItemsSource="{Binding Items}"
                  SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                  VerticalOptions="Start"
                  ItemSelected="ItemSelected"/>
        <Label Text="{Binding SelectedItem}" />
        <Button Text="Toggle" Clicked="Toggle" />
        <Label x:Name="manualLabel1" Text="Text set in button click handler" />
        <Label x:Name="manualLabel2" Text="Text set in item selected handler" />
    </StackLayout>
</ContentPage>

ListViewDemo.cs

namespace MauiPlayground;

public partial class ListViewDemo : ContentPage
{
    public ListViewDemo()
    {
        InitializeComponent();
        BindingContext = new ViewModel();
    }

    private void Toggle(object sender, EventArgs e)
    {
        var vm = (ViewModel)BindingContext;
        vm.SelectedItem = vm.SelectedItem == "First" ? "Second" : "First";
        manualLabel1.Text = $"Set in click handler: {listView.SelectedItem}";
    }

    private void ItemSelected(object sender, EventArgs e) =>
        manualLabel2.Text = $"Set in item selected handler: {listView.SelectedItem}";

    private class ViewModel : ViewModelBase
    {
        public List<string> Items { get; } = new List<string> { "First", "Second" };

        private string selectedItem = "First";
        public string SelectedItem
        {
            get => selectedItem;
            set => SetProperty(ref selectedItem, value);
        }
    }
}

单击更新视图模型的“切换”按钮后模拟器的屏幕截图：

备注：

列表视图下方的标签（绑定到同一个虚拟机属性）已更新
按钮下方的标签表示 listView.SelectedItem 具有新值
下面的标签表明 ListView.ItemSelected 事件已经发生
ListView 本身似乎没有个选择项

有趣的是，列表视图确实确实改变了外观：在单击按钮之前，第一项在视觉上被选中（橙色）。从列表中手动选择一个项目会更新所有属性，但我们没有看到橙色的选定项目。

Answer 1

这两个可能是当前发布的 MAUI 版本的错误。

此 bug was recently posted and there is already a fix 用于解决此问题的 Switch。

Answer 2

Switch.IsToggled 的问题是已知的并且 has been fixed 但在发布下一个 RC (6.0.300-rc.1) 之前不会可用。

我没有发现任何关于 ListView 问题的报告问题，但我能够重现它。这似乎是由为每个项目创建的默认 ViewCell 引起的。可以通过像这样指定自定义 ListView.ItemTemplate 来修复它：

<ListView x:Name="listView" ItemsSource="{Binding Items}"
        SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
        VerticalOptions="Start"
        ItemSelected="ItemSelected">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding}" />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

为什么 MAUI 中的 Switch 和 ListView 控件不更新 2 向绑定？

Why do Switch and ListView controls in MAUI not update with 2-way binding?

c#

data-binding

maui

示例代码

切换示例代码

ListView 示例代码