.NET MAUI CommunityToolkit.MVVM选中项属性未自动更新问题求助

问题原因 #

你当前的代码中，在页面构造函数里手动给lblName、lblState、lblPostalCode设置了BindingContext = vm.SelectedData，这会让这些Label的上下文固定在初始的SelectedData实例上。当ViewModel中的SelectedData切换为新的MyData实例时，页面的Label并不会自动切换到新实例的上下文，所以字段不会更新。

解决方案 #

不需要复制MyData的属性，只需要调整绑定方式，让页面控件感知到ViewModel中SelectedData实例的变化：

1. 清理代码后置的冗余逻辑

修改MainPage.xaml.cs，删除构造函数里手动设置Label上下文的代码：

// 删掉这三行
lblName.BindingContext = vm.SelectedData;
lblState.BindingContext = vm.SelectedData;
lblPostalCode.BindingContext = vm.SelectedData;

同时删除TapGestureRecognizer_Tapped方法，改用MVVM原生绑定处理选中逻辑。

2. 修改XAML绑定方式（二选一即可）

方式一：直接绑定到ViewModel的SelectedData子属性

保留页面根节点的x:DataType="ViewModel:MyViewModel"，修改展示区域的Label绑定路径：

<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="Start" Grid.Row="1">
    <Label Text="Name: " Style="{StaticResource Headline}" SemanticProperties.HeadingLevel="Level1" />
    <Label Text="{Binding SelectedData.Name}" Style="{StaticResource SubHeadline}" SemanticProperties.HeadingLevel="Level2"/>

    <Label Text="State: " Style="{StaticResource Headline}" SemanticProperties.HeadingLevel="Level1" />
    <Label Text="{Binding SelectedData.State}" Style="{StaticResource SubHeadline}" SemanticProperties.HeadingLevel="Level2"/>

    <Label Text="Postal Code: " Style="{StaticResource Headline}" SemanticProperties.HeadingLevel="Level1" />
    <Label Text="{Binding SelectedData.PostalCode}" Style="{StaticResource SubHeadline}" SemanticProperties.HeadingLevel="Level2"/>
</StackLayout>

方式二：给展示区域设置绑定上下文

给展示用的StackLayout设置上下文绑定，同时指定x:DataType为MyData，内部控件可直接绑定属性：

<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="Start" 
             Grid.Row="1"
             BindingContext="{Binding SelectedData}"
             x:DataType="ViewModel:MyData">
    <Label Text="Name: " Style="{StaticResource Headline}" SemanticProperties.HeadingLevel="Level1" />
    <Label Text="{Binding Name}" Style="{StaticResource SubHeadline}" SemanticProperties.HeadingLevel="Level2"/>

    <Label Text="State: " Style="{StaticResource Headline}" SemanticProperties.HeadingLevel="Level1" />
    <Label Text="{Binding State}" Style="{StaticResource SubHeadline}" SemanticProperties.HeadingLevel="Level2"/>

    <Label Text="Postal Code: " Style="{StaticResource Headline}" SemanticProperties.HeadingLevel="Level1" />
    <Label Text="{Binding PostalCode}" Style="{StaticResource SubHeadline}" SemanticProperties.HeadingLevel="Level2"/>
</StackLayout>

3. 优化CollectionView选中逻辑（推荐）

去掉CollectionView里的TapGestureRecognizer，直接绑定SelectedItem到ViewModel的SelectedData，选中时自动更新属性，无需后台事件：

<CollectionView ItemsSource="{Binding DataList}" 
                HorizontalOptions="CenterAndExpand" 
                VerticalOptions="Start" 
                Grid.Row="0" 
                BackgroundColor="LightGrey"
                SelectedItem="{Binding SelectedData}">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="ViewModel:MyData">
            <StackLayout Orientation="Vertical" VerticalOptions="Start" HorizontalOptions="CenterAndExpand">
                <Label Text="{Binding Name}" Style="{StaticResource SubHeadline}" SemanticProperties.HeadingLevel="Level2"/>
                <Label Text="{Binding State}" Style="{StaticResource SubHeadline}" SemanticProperties.HeadingLevel="Level2"/>
                <Label Text="{Binding PostalCode}" Style="{StaticResource SubHeadline}" SemanticProperties.HeadingLevel="Level2"/>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

此时可以删除ViewModel中的SelectionChanged命令，因为SelectedItem绑定会自动更新SelectedData属性。

简化后的ViewModel（可选） #

using CommunityToolkit.Mvvm.ComponentModel;

namespace OPProblems.VM
{
    public partial class MyViewModel : ObservableObject 
    {
        [ObservableProperty]
        List<MyData> dataList = new List<MyData>();

        [ObservableProperty]
        MyData selectedData = new MyData();

        public MyViewModel()
        {
            DataList = new List<MyData>()
            {
                new MyData() {Name="Name 1", State="ME", PostalCode="11111" },
                new MyData() {Name="Name 2", State="MS", PostalCode="22222" },
                new MyData() {Name="Name 3", State="PA", PostalCode="33333" },
                new MyData() {Name="Name 4", State="DE", PostalCode="44444" },
            };

            SelectedData = DataList[0];
        }
    }

    public partial class MyData: ObservableObject
    {
        [ObservableProperty]
        string name = "";
        [ObservableProperty]
        string state = "";
        [ObservableProperty]
        string postalCode = "";
    }
}

内容的提问来源于stack exchange，提问作者George M Ceaser Jr