使用 ViewModel 将子级添加到用户控件？

Question

问题：如何将新子项添加到我的用户控件？我被告知 viewmodel 不应该对视图有任何了解，而是使用绑定。现在我创建了一个项目控件并将我的绑定路径设置为包含标签数组的属性 MyLabels。它不起作用，老实说，我不确定推荐的方法是什么。

我的 XAML 的 itemscontrol（在我的用户控件中的某处）：

<UserControl x:Class="Test.Main"
             x:Name="this"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="600" d:DesignWidth="1000">

        <ScrollViewer Height="400" Width="900">
            <StackPanel Width="900">
                <Grid x:Name="myGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <ItemsControl ItemsSource="{Binding Path=MyLabels}"/>
                </Grid>

                <Image PreviewMouseDown="AddLabel""/>
            </StackPanel>
        </ScrollViewer>
    </StackPanel>
</UserControl>

这是我的视图模型：

namespace Test {
    public partial class Main {
        public ObservableCollection<string> MyLabels { get; set; } = new ObservableCollection<string>();

        public Main() {
            InitializeComponent();
            DataContext = this;
        }

        public void AddLabel(object sender, RoutedEventArgs e) {
            for (int i = 0; i < 2; i++) {
                MyLabels.Add("eee");
            }
        }
    }
}

Answer 1

将视图的DataContext 设置为视图模型的实例：

public Main() {
    InitializeComponent();
    DataContext = this;
}

然而视图模型应该是它自己的一个类：

public MainWindow() {
    InitializeComponent();
    DataContext = new ViewModel();
}

它不应该创建任何Label 元素，而是创建strings：

public class ViewModel
{
    public List<string> MyLabels { get; set; } new List<string>();

    public ViewModel()
    {
        AddLabels();
    }

    public void AddLabels()
    {
        for (int i = 0; i < 5; i++)
        {
            MyLabels.Add("Sample");
        }
    }
}

Label 是一个用户界面元素类型，它们只属于视图。

另请注意，您只能绑定到公共属性。

它现在可以工作了，唯一的问题是我不确定如何在不违反 MVVM 模式的情况下添加实际标签。

您在ItemsControl 的ItemTemplate 中添加Label 元素。此模板定义源集合中项目的外观，即在本例中为 string：

<ItemsControl ItemsSource="{Binding Path=MyLabels}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Label Content="{Binding}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Answer 2

通过以下 MVVM 模仿（轻量级风味！），您应该能够看到在视图中创建的标签。根据您的更新，仍在生成字符串。

视图模型

public class ViewModel
{
        public ObservableCollection<string> MyStrings { get; set; }
        public ICommand AddStringCommand { get; private set; }

        public ViewModel()
        {
            if (MyStrings == null) MyStrings = new ObservableCollection<string>();

            for (int i = 0; i < 5; i++)
            {
                MyStrings.Add("string " + i);
            }

            AddStringCommand = new AddLabelCommand(AddString);

        }

        public void AddString()
        {
            MyStrings.Add("string " + (MyStrings.Count));
        }

 }

public class AddLabelCommand : ICommand
{
        readonly Action _action = null;

        public AddLabelCommand(Action commandToExecute)
        {
            _action = commandToExecute; //Handle null condition
        }

        public bool CanExecute(object parameter)
        {
            return true;
        }

        public event EventHandler CanExecuteChanged;

        public void Execute(object parameter)
        {
            _action();
        }
}   

MainWindow.xaml.cs（视图背后的代码）

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

MainWindow.xaml（内部视图）

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="402" Width="540"
        xmlns:local="clr-namespace:WpfApplication1">
    <Window.Resources>
        <local:ViewModel x:Key="ViewModel"/> <!--Initialize ViewModel inside XAML-->
    </Window.Resources>
    <Grid Height="367" Width="526" DataContext="{StaticResource ViewModel}">
        <ItemsControl ItemsSource="{Binding Path=MyStrings}" Width="100" BorderBrush="Red">
            <ItemsControl.ItemTemplate> <!--If you want to display your content in a control you can use ItemTemplate as suggested by @mm8-->
                <DataTemplate>
                    <Label Content="{Binding}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
        <Button Content="Add Label" Height="23" Width="100" Command="{Binding Path=AddStringCommand}"/>
    </Grid>
</Window>

希望这能为您提供一个起点！！