使用MVVM模式，如何创建“设置”控件，在其他用户控件中设置数据绑定项值？ [英] Using MVVM pattern, how to create a “Settings” control that sets the data-bound item values in other user controls?

问题描述

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

Suppose I have two simple user controls Apple and Banana (view) with their corresponding view models containing 2 properties each. I also have a ListBox as the "Settings" of Apple and Banana properties.

Apple：

Apple:

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

Banana：

Banana:

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

Apple VM：

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

Banana VM：

Banana 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");
        }
    }
}

主窗口如下所示：

The mainwindow looks like this:

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

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

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

For quicker setup I assigned the DataContext in code behind in mainwindow. In the real situation I used window viewmodel instead.

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用户控制区域 - >更改列表框中的长度 - >看到苹果用户控制
值已更改。

And now I wish the listBox control displays and allows user to set the property values of the user control being focused. A typical interaction would be Select/Mousedown Apple user control area -> Change length in listbox -> See that apple user control values changed.

如果用户选择/ mousedown Banana用户控件，他/她应该能够做到相同。

And if the user select/mousedown Banana user control, he/she should be able to do the same.

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

The question is: How can I implement this settings functionality using MVVM and databinding? I tried creating a ObservableCollection for the viewbox's ItemsSource to bind to, but how can makes sure the collection updates the apple view model correctly?

对不起，很长的帖子。如果我的描述中有任何含糊不清的内容，请告诉我

Sorry for the long post. Please let me know if there's anything vague in my description

推荐答案

您好RyanRen2018，

Hi RyanRen2018,

根据根据您的描述，您似乎想通过ListBox事件更改相关的ViewModel值，如果是这样，请参考以下代码，它将相关的ViewModel定义为类中的字段，并通过ListBox事件更改VM的属性值。

According to your description, it seems that you want to change related ViewModel's value via ListBox event, if so, please refer to the following code, which define related ViewModel as field in the class, and change VM's property's value via ListBox event.

public partial class MainWindow : Window
    {

        private AppleViewModel appVM;
        private BananaViewModel banVM;
        public MainWindow()
        {


            InitializeComponent();

            appVM = new AppleViewModel()
            {
                AppleID = "Apple001",
                Size = 10,
            };
            apple.DataContext = appVM;
             
            banVM = new BananaViewModel()
            {
                BananaID = "Banana002",
                Length = 10
            };

            banana.DataContext = banVM;
        }

        

        private void listBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            appVM.AppleID = this.listBox1.SelectedItem.ToString();
        }
    }

祝你好运，

张龙

这篇关于使用MVVM模式，如何创建“设置”控件，在其他用户控件中设置数据绑定项值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！