遵循MVVM模式，如何创建“设置”功能，在其他用户控件中设置数据绑定项值？

Question

!!请先看看底部的第二个编辑！

我的问题的简化版本：我有两个简单的用户控件Apple和Banana（view）及其相应的视图模型，每个模型包含2个属性。我还有一个ListBox作为Apple和Banana属性的“设置”。

苹果：

<UserControl>  
    <StackPanel Orientation="Horizontal">  
        <TextBlock Margin="0,0,20,0" Text="{Binding AppleID}"/>  
        <TextBlock Text="{Binding Size}"/>  
    </StackPanel>  
</UserControl>

香蕉：

<UserControl>  
    <StackPanel Orientation="Horizontal">
        <TextBlock Margin="0,0,20,0"  Text="{Binding BananaID}"/>
        <TextBlock Text="{Binding Length}"/>
    </StackPanel>
</UserControl>

Apple VM：

public class AppleViewModel : Notifier
{
    private string appleID;
    public string AppleID
    {
        get => appleID; set
        {
            appleID = value;
            OnPropertyChanged("AppleID");
        }
    }
    private int size;
    public int Size
    {
        get => size; set
        {
            size = value;
            OnPropertyChanged("Size");
        }
    }
}

香蕉VM：

public class BananaViewModel : Notifier
{
    private string bananaID;
    public string BananaID
    {
        get => bananaID; set
        {
            bananaID = value;
            OnPropertyChanged("BananaID");
        }
    }
    private int length;
    public int Length
    {
        get => length; set
        {
            length = value;
            OnPropertyChanged("Length");
        }
    }
}

主窗口看起来像这样：

<Window>
    <StackPanel Orientation="Vertical">
        <local:AppleControlxaml x:Name="apple"/>
        <local:BananaControl x:Name="banana"/>
        <ListBox>

        </ListBox>
    </StackPanel>
</Window>

为了更快地进行设置，我在mainwindow中的代码中分配了DataContext。在实际情况中，我使用了window viewmodel。

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        apple.DataContext = new AppleViewModel()
        {
            AppleID = "Apple001",
            Size = 10,
        };
        banana.DataContext = new BananaViewModel()
        {
            BananaID = "Banana002",
            Length = 10
        };
    }
}

现在我希望listBox控件显示并允许用户设置被聚焦的用户控件的属性值。典型的交互将是Select / Mousedown Apple用户控制区域 - >更改列表框中的长度 - >查看Apple用户控件值已更改。

如果用户选择/ mousedown香蕉用户控制，他/她应该能够做同样的事情。

问题是：如何使用MVVM和数据绑定实现此设置功能？我尝试为要绑定的视图框的ItemsSource创建一个ObservableCollection，但是如何确保集合正确更新apple视图模型？

对不起，很长的帖子。我是stackoverflow的新手。

第二次编辑

我很抱歉，但我的描述可能会使问题更加混乱。属性应使用ItemsControl而不是ListBox。这是期望的行为。 The UI when apple user control is MouseDown The UI when banana user control is MouseDown

当用户更改属性中的值时，用户控件（苹果或香蕉）也应更新其值。

我怀疑我应该将Properties的ItemControl中的ItemsSource属性数据绑定到AppleVM和BananaVM的实际属性，但我不确定如何正确使用数据绑定。

这是更新后的MainWindow.xaml。其他代码在第一次编辑时大多没有变化

<Window>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <StackPanel>
            <local:AppleControl x:Name="apple1" MouseDown="apple1_MouseDown"/>
            <local:BananaControl x:Name="banana1" MouseDown="banana1_MouseDown"/>
        </StackPanel>
        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <TextBlock Text="Properties of selected item" Foreground="Blue" Margin="10"></TextBlock>
            <ItemsControl Name="properties" Grid.Row="1" Margin="10">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding PropertyName}"/>
                            <TextBlock Text="{Binding PropertyValue}"/>
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Grid>
    </Grid>
</Window>