Search code examples
c#wpf

How to bind controls to properties dynamically added in run time?


I see various tutorials around showing how to bind properties to static controls, that is, txt_box1.Text bound to Prop1, txt_box2.Text to Prop2, and so on. But as you know, the textboxes, or any other control bound to the property, are all there when the program starts. The binding is already in the XAML.

However, my problem is that I don't know how many bindings will be needed until user input is provided. This means I will add the controls in run time as well as the properties that should be bound to them. Because of that, once the control is added to the panel I lose the ability to refer to it by name... at least in my limited knowledge of C#/WPF.

Back in the days of Borland Delphi/C++ Builder I abused the "Tag" property of objects, assigning the loop index value to it and keep track of individual objects dynamically added to an array. Maybe there was a smarter way to do it but I didn't know any better, at least it solved the problems. But I am not using it here so I don't restrict your suggestions.

See the XAML and C# below.

<Window x:Class="SO_Binding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SO_Binding"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="600">
    <StackPanel>
        <WrapPanel>
            <Label Content="How many textboxes?"></Label>
            <TextBox x:Name="txt_numboxes" Width="50" KeyDown="txt_numboxes_KeyDown"></TextBox>
        </WrapPanel>
        <Separator></Separator>

        <StackPanel x:Name="spanel">
            
        </StackPanel>
    </StackPanel>
</Window>

C#

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace SO_Binding
{
    public partial class MainWindow : Window
    {
        List<String> ourlist = new List<String>();

        public MainWindow()
        {
            InitializeComponent();
        }

        private void txt_numboxes_KeyDown(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Enter)
            {
                ourlist?.Clear();
                ourlist.Capacity = Convert.ToInt32(txt_numboxes.Text);
                ourlist.Add("");                            // Initialize the list with empty strings

                spanel.Children?.Clear();
                for(int i = 0; i < Convert.ToInt32(txt_numboxes.Text); i++)
                    spanel.Children.Add(new TextBox());     // Each of these textboxes should be bound to their respective strings in the list

                spanel.Children.Add(new Separator());

                for (int i = 0; i < Convert.ToInt32(txt_numboxes.Text); i++)
                    spanel.Children.Add(new TextBlock());   // Display the strings in their respective textblocks to check the binding
            }
        }
    }
}

After you type a number like 5 and hit enter, it creates 5 textboxes and textblocks, increases the list capacity to 5 and initializes it. Textbox 0 and Textblock 0 should be bound to List[0], so that when you type something, the property is updated and the textblock shows it. I have no idea how to do it in that scenario when things are not known beforehand, or even if it is possible. If you know, please show me.


Solution

  • Look at this example:

    // This is the namespace for my implementation of the ViewModelBase class.
    // Since you will have your own implementation or use some kind of package,
    // you need to change this `using` to the one that is relevant for you.
    using Simplified;
    
    using System.Collections.ObjectModel;
    
    namespace Core2024.SO.JayY
    {
        public class ChangingCountTextBoxesVM : ViewModelBase
        {
            public int Count { get => Get<int>(); set => Set(value); }
    
            public ReadOnlyObservableCollection<TextField> Fields { get; }
            private readonly ObservableCollection<TextField> FieldsList = new();
    
            public ChangingCountTextBoxesVM()
            {
                Fields = new(FieldsList);
                Count = 3;
            }
    
            protected override void OnPropertyChanged(string propertyName, object oldValue, object newValue)
            {
                base.OnPropertyChanged(propertyName, oldValue, newValue);
    
                if (propertyName == nameof(Count))
                {
                    int count = (int)newValue;
                    FieldsList.Clear();
                    for (int i = 0; i < count; i++)
                    {
                        FieldsList.Add(new TextField());
                    }
                }
            }
        }
    
        public class TextField : ViewModelBase
        {
            public string Text { get => Get<string>(); set => Set(value); }
        }
    }
    
    <Window x:Class="Core2024.SO.JayY.ChangingCountTextBoxesWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:Core2024.SO.JayY"
            mc:Ignorable="d"
            Title="ChangingCountTextBoxesWindow" Height="450" Width="800">
        <Window.DataContext>
            <local:ChangingCountTextBoxesVM/>
        </Window.DataContext>
        <StackPanel>
            <WrapPanel>
                <Label Content="How many textboxes?"></Label>
                <TextBox x:Name="txt_numboxes" Width="50" Text="{Binding Count, UpdateSourceTrigger=PropertyChanged}"></TextBox>
            </WrapPanel>
            <Separator/>
    
            <StackPanel x:Name="spanel">
                <ItemsControl ItemsSource="{Binding Fields}" >
                    <ItemsControl.ItemTemplate>
                        <DataTemplate DataType="{x:Type local:TextField}">
                            <TextBox Text="{Binding Text, UpdateSourceTrigger=PropertyChanged}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
                <Separator/>
                <ItemsControl ItemsSource="{Binding Fields}" >
                    <ItemsControl.ItemTemplate>
                        <DataTemplate DataType="{x:Type local:TextField}">
                            <TextBox Text="{Binding Text, UpdateSourceTrigger=PropertyChanged}"
                                     IsReadOnly="True"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        </StackPanel>
    </Window>