Wpf: How to Dynamically Add Controls in Dynamically Created Wpf Window

WPF: How to dynamically Add Controls in dynamically created WPF Window

There are two ways to get controls in your window:

1. Do the whole designing stuff in the Designer of VisualStudio

2. Add the controls by code. Here is a short, simple sample of creating a window and putting controls in it:

   var window = new Window();
   var stackPanel = new StackPanel { Orientation = Orientation.Vertical };
   stackPanel.Children.Add(new Label { Content = "Label" });
   stackPanel.Children.Add(new Button { Content = "Button" });
   window.Content = stackPanel;
   

WPF: How to dynamically create controls and edit controls in code

WPF/UWP and XAML are designed with the MVVM pattern in mind. While you can use other approaches, doing so will miss about 90% of it's power and run into issues at every other corner.

In MVVM this would be simply a mater of Exposing a Collection and having a Tempalte targetting that type. ListBoxes might even have a custom Template system, but using ListBoxes might no longer be nessesary - any container can expose a Collection.

If you plan on learning MVVM, mid to longertem you should learn MVVM. I wrote a short intro a few years back, that should help you going. Help for people not following MVVM is parse on the Forum.

Adding controls dynamically in WPF MVVM

If you really want to do mvvm , try to forget "how can I add controls". You don't have to, just think about your viewmodels - WPF create the contols for you :)

In your case lets say we have a SearchViewModel and a SearchEntryViewmodel.

public class SearchEntryViewmodel
{
    //Properties for Binding to Combobox and Textbox goes here
}

public class SearchViewModel 
{
    public ObservableCollection<SearchEntryViewmodel> MySearchItems {get;set;}
    public ICommand AddSearchItem {get;}
}

Till now you dont have to think about usercontrols/view. In your SearchView you create an ItemsControl and bind the ItemsSource to MySearchItems.

<ItemsControl ItemsSource="{Binding MySearchItems}"/> 

You see now all of your SearchEntryViewmodels in the ItemsControl(just the ToString() atm).

To fit your requirements to show every SearchEntryViewmodel with 3Comboboxes and so on you just have to define a DataTemplate in your Resources

<DataTemplate DataType="{x:Type local:SearchEntryViewmodel}">
    <StackPanel Orientation="Horizontal">
        <Combobox ItemsSource="{Binding MyPropertyInSearchEntryViewmodel}"/>
        <!-- the other controls with bindings -->
    </StackPanel>
</DataTemplate>

That's all :) and you never have to think about "how can I add controls dynamically?". You just have to add new SearchEntryViewmodel to your collection.

This approach is called Viewmodel First and I think it's the easiest way to do MVVM.

Add WPF Controls Dynamically using Code

Try below code

 var panel = new WrapPanel() { Height = 39 };
            panel.Children.Add(new TextBox() { Width = 93, Margin = new Thickness(-1, 5, 0, 0) });
            panel.Children.Add(new TextBox() { Width = 76, Margin = new Thickness(0, 5, 0, 0) });
            panel.Children.Add(new TextBox() { Width = 70, Margin = new Thickness(0, 5, 0, 0) });
            panel.Children.Add(new TextBox() { Width = 70, Margin = new Thickness(0, 5, 0, 0) });
            panel.Children.Add(new TextBox() { Width = 127, Margin = new Thickness(0, 5, 0, 0) });
            panel.Children.Add(new TextBox() { Width = 100, Margin = new Thickness(0, 5, 0, 0) });
            this.Content = panel;

Add WPF Controls Dynamically using Code

Try below code

 var panel = new WrapPanel() { Height = 39 };
            panel.Children.Add(new TextBox() { Width = 93, Margin = new Thickness(-1, 5, 0, 0) });
            panel.Children.Add(new TextBox() { Width = 76, Margin = new Thickness(0, 5, 0, 0) });
            panel.Children.Add(new TextBox() { Width = 70, Margin = new Thickness(0, 5, 0, 0) });
            panel.Children.Add(new TextBox() { Width = 70, Margin = new Thickness(0, 5, 0, 0) });
            panel.Children.Add(new TextBox() { Width = 127, Margin = new Thickness(0, 5, 0, 0) });
            panel.Children.Add(new TextBox() { Width = 100, Margin = new Thickness(0, 5, 0, 0) });
            this.Content = panel;

Add UserControl dynamically in WPF C#

It is as simple as that.Firstly,what you can do is,create a UserControl with all your controls inside like TextBlocks and others.Then,decide which type of container control you want to use to hold your UserControl.Let's assume it's a grid.You can specify/set grid's column/rows for each user control.A sample :

private void addControl()
{
UserControl1 MyCon = new UserControl1;
MyGrid.Children.Add(MyCon);
Grid.SetRow(MyCon , 1); ////replace 1 with required row count
}

You can create grid rows in design time,or u can do it in code behind as well :

MyGrid.RowDefinitions.Add(new RowDefinition);

If you want to use columns instead,just apply same code but change Row/Rowdefinition with Column/ColumnDefinition

Hope this helps :)

adding event handlers on dynamically created WPF controls

You could hook up an event handler to an event of the Button or Image using the += syntax:

 Image image = new Image();
 image.SizeChanged += (s, e) => { /* handle event */ };

---

Related Topics