使用MVVM框架中的按钮动态添加文本框 [英] Dynamically Adding TextBox using a Button within MVVM framework

问题描述

我继续攀登陡峭的WPF山丘！因此，我想创建一个允许用户动态添加文本框的UI.为此，他们将按一下按钮.

I keep climbing the steep WPF hill! So I want to create a UI that allows the user to dynamically add a text box. To do this they would hit a button.

我设法在后面使用代码创建了此代码，但是我想转向MVVM结构，因此视图中没有任何代码.我已经尝试过ICommand和ObservableCollection，但是我缺少了一些东西，我也不知道在哪里.这是我的简单示例.

I've managed to create this using code behind but I want to move towards an MVVM structure so I don't have any code in the view. I've tried ICommand and ObservableCollection but I'm missing something and I don't know where. Here is my simple example.

XAML:非常基本，只有一个按钮可以添加一行.

XAML: Very basic with one button that adds a row.

<Window x:Class="WPFpractice072514.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WPFpractice072514"
        Title="MainWindow" Height="350" Width="525">
    <Grid Name="mymy" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0" Grid.Row="0" Name="ButtonUpdateArtist"
                Content="Add TextBox" Click="ButtonAddTexboxBlockExecute" />

    </Grid>
</Window>

C#后面的代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WPFpractice072514
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        #region members
        int count = 0;
        #endregion

        public MainWindow()
        {
            InitializeComponent();
        }

        private void ButtonAddTexboxBlockExecute(Object Sender, RoutedEventArgs e)
        {
            TextBox t = new TextBox();
            t.Height = 20;
            t.Width = 20;
            t.Name = "button";

            RowDefinition rowDef1;
            rowDef1 = new RowDefinition();
            mymy.RowDefinitions.Add(rowDef1);

            ColumnDefinition colDef1;
            colDef1 = new ColumnDefinition();
            mymy.ColumnDefinitions.Add(colDef1);
            ++count;

            mymy.Children.Add(t);

            Grid.SetColumn(t, 1);
            Grid.SetRow(t, count);

        }
    }
}

问题:我需要什么代码(XAML和C#)才能将方法从代码后面移到视图模型中?

Questions: What code (XAML and C#) do I need to be able to move the method out of the code behind and into a viewmodel?

您可以使用命令动态添加文本框吗?

Can you use commands to dynamically add a textbox?

我假设文本框必须保存在一个容器中，在这种情况下，该容器是用于网格的.但是，如果我使用的是MVVM，我是否需要将文本框包含在列表视图中或其他使用ItemsSource的容器中?

I'm assuming that the textboxes must be kept in a container which in this case is what grid is for. But if I'm using an MVVM do I need to contain the textboxes in a listview or some other container that uses ItemsSource?

推荐答案

按照以下步骤操作，您就可以完成:

Follow these steps and you are done:

1. 使用ItemsControl并将其ItemsSource绑定到ViewModel中的某个集合(最好是ObservableCollection).
2. 为其中包含TextBox的ItemsControl定义ItemTemplate.
3. 在ViewModel中创建一个ICommand并将其绑定到按钮.
4. 在命令上执行集合中的添加项，您将看到TextBox被自动添加.

1. Use ItemsControl and bind it's ItemsSource to some collection (preferably ObservableCollection) in your ViewModel.
2. Define ItemTemplate for ItemsControl with TextBox in it.
3. Create an ICommand in ViewModel and bind it to button.
4. On command execute add item in the collection and you will see TextBox gets added automatically.

---

XAML :

<StackPanel>
    <Button Content="Add TextBox" Command="{Binding TestCommand}"/>
    <ItemsControl ItemsSource="{Binding SomeCollection}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBox Text="{Binding Path=.}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</StackPanel>

ViewModel :

public class MainWindowViewModel : INotifyPropertyChanged
{
    public ObservableCollection<string> SomeCollection { get; set; }
    public ICommand TestCommand { get; private set; }

    public MainWindowViewModel()
    {
        SomeCollection = new ObservableCollection<string>();
        TestCommand = new RelayCommand<object>(CommandMethod);
    }

    private void CommandMethod(object parameter)
    {
        SomeCollection.Add("Some dummy string");
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

RelayCommand :

public class RelayCommand<T> : ICommand
{    
    readonly Action<T> _execute = null;
    readonly Predicate<T> _canExecute = null;

    public RelayCommand(Action<T> execute)
        : this(execute, null)
    {
    }    

    public RelayCommand(Action<T> execute, Predicate<T> canExecute)
    {
        if (execute == null)
            throw new ArgumentNullException("execute");

        _execute = execute;
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        return _canExecute == null ? true : _canExecute((T)parameter);
    }    

    public event EventHandler CanExecuteChanged
    {
        add { CommandManager.RequerySuggested += value; }
        remove { CommandManager.RequerySuggested -= value; }
    }

    public void Execute(object parameter)
    {
        _execute((T)parameter);
    }
}

注意 -我假设您知道如何通过设置DataContext来使View插入ViewModel来使绑定魔术起作用.

Note - I assume you know how to plug View with your ViewModel by setting DataContext to make the binding magic to work.

这篇关于使用MVVM框架中的按钮动态添加文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！