Creating dynamic data entry form from the list of fields chosen by User at run time

Question

I have a WPF application where I have view which lets User choose list of fields at run-time and I am storing in a Text file and I am trying to create a Data entry form based on the list of fields that user created Run-time.

I have developed an solution using code behind but I am trying to implement this using MVVM.

Approach 1: I can create the textBlock and Textbox in the code-behind and bind it to the properties in the Viewmodel. The viewmodel will have all the possible field property.

Code-Behind=

string[] Data = File.ReadAllLines("Field.txt");
foreach (var part in Data)
{
    Grid mytxtBStack = new Grid();
    MainStack.Children.Add(mytxtBStack);
    ColumnDefinition column_1 = new ColumnDefinition();
    column_1.SharedSizeGroup = "FirstColumn";

    ColumnDefinition column_2 = new ColumnDefinition();
    column_2.SharedSizeGroup = "SecondColumn";

    mytxtBStack.ColumnDefinitions.Add(column_1);
    mytxtBStack.ColumnDefinitions.Add(column_2);

    txtBlock = new TextBlock();
    txtBlock.Name = "MyBlock" + i;
    txtBlock.Text = part;
    txtBlock.FontSize = 14;
    txtBlock.FontWeight = FontWeights.DemiBold;
    txtBlock.Foreground = Brushes.Black;
    txtBlock.Margin = new Thickness(0, 20, 0, 0);
    mytxtBStack.Children.Add(txtBlock);

    txtBox = new TextBox();
    txtBox.Name = "MyText" + i.ToString();
    txtBox.FontSize = 12;
    txtBox.Height = 25;
    txtBox.Width = 250;
    txtBox.BorderThickness = new Thickness(1, 1, 1, 1);
    txtBox.Margin = new Thickness(130, 20, 0, 0);
    txtBox.Foreground = Brushes.Black;
    txtBox.BorderBrush = Brushes.Black;
    txtBox.Background = Brushes.White;
    txtList.Add(txtBox);
    mytxtBStack.Children.Add(txtBox);
}

Approach 2: I can create a dynamic class using the Expandoobject based on the Textfile and create a itemscontrols to bind with view and mentioned all the possibile field properties in the Viewmodel. I am thinking about implementing this part with inside the TabControl,

Can anyone please suggest me a way to do this with MVVM wpf?

Andrew KeepCoding · Answer

I implemented this using the CommunityToolkit.Mvvm NuGet package.

MainWindowViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System.Collections.ObjectModel;

namespace WpfApp1;

public class Field
{
    public string Block { get; set; } = string.Empty;
    public string Text { get; set; } = string.Empty;
}

public partial class MainWindowViewModel : ObservableObject
{
    [ObservableProperty]
    // CommunityToolkit's source generator will create a "Field" property.
    private ObservableCollection fields = new();

    [RelayCommand]
    // CommunityToolkit's source generator will create a "LoadFieldsCommand" command.
    private void LoadFields()
    {
        for (int i = 0; i < 10; i++)
        {
            Fields.Add(new Field() { Block = $"Block#{i + 1}", Text = $"Text{i + 1}" });
        }
    }
}

MainWindow.xaml.cs

using System.Windows;

namespace WpfApp1;

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

    public MainWindowViewModel ViewModel { get; } = new();
}

MainWindow.xaml

Creating dynamic data entry form from the list of fields chosen by User at run time

1 Answers