Programatically adding a WPF control

I'm a newbie at using WPF.  I have a project that is a GUI that has a number of tabs displaying information in different ways.  One of my tabs I want to be a sort of "google earth" type view.  Where I can zoom and pan, etc.  

After reading around a bit, I decided to use WPF to accomplish this.  

So, I took my windows Form, which has a tab control with tab pages.  On one of the tab pages, I added a xaml user control via the element host.  So, I guess what I have, as I understand it, is a xaml control, added to a tab page control, via an element host.

Now, my xaml user control, right now, is super simple, just a hello world button.  I know I eventually want to add more buttons and other controls on the fly (programatically).  So I am just trying to do a simple test where I progrmatically add another button to my xaml user control.

I don't know how to do this in code.  Am I adding it to the xaml user control, if so, how?  Am I adding it to the element host?  The tab page??  I'm not really sure how to begin.

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

To add more controls into the xaml user control, you should the same as you would do in WPF project - add them to the main container.

The WPF user control can hold only one control. In order to add more than just one control, the first (and only) control added to the user control should be a control that can hold multiple controls, such as Grid/WrapPanel/StackPanel/DockPanel/Canvas/etc.

After creating the host/container (the control that holds multiple objects), all you need to do is create a button with a click event to code. In the code event you initialize a new control of your choice, set the right properties (much like you do in XAML, only you do it in C#), and add it to the host children.

In order to communicate back to host, to add child to it, we must name it through Xaml.

Here's code I created which have a simple WrapPanel and a button, where every click on the button creates a new one. The button can be easily replaced with any other control you like.

The project I used was very simple; A winforms project with one form, containing ElementHost, and a WPF user control. I will only post the code to the WPF user control, since you seem to know how to do the rest. Do note that the way WPF and Winforms arrange their controls is a bit different, which is why I set my ElementHost control's property "AutoSize" to true.

WPF User Control Xaml:

    Height="300" Width="300">
    <WrapPanel Name="hostMain" Width="298">
                Press here to create another button


WPF C# Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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 WindowsFormsApplication1
    /// <summary>
    /// Interaction logic for UserControl1.xaml
    /// </summary>
    public partial class UserControl1 : UserControl
        //keep count how many buttons we created,
        //so we can add an index to a new button text
        private Int32 _btnCnt;

        public UserControl1()

        private void Button_Click(Object sender, RoutedEventArgs e)
            //create the new button (can be any control derived from UIElement)
            Button btn = new Button();

            //set alignment to see the button nicely on the host
            btn.VerticalAlignment = VerticalAlignment.Top;
            btn.HorizontalAlignment = HorizontalAlignment.Left;

            //create text
            TextBlock tb = new TextBlock();
            tb.Text = "Button #" + (_btnCnt + 1).ToString();


            btn.Content = tb;

            //add it to the host

I am new to experts-exchange , and wasn't sure how to post the code.
The code link in the attachment seem to be able to attach only one code to the entire message, which is not what I was looking for.

Good Luck.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
gusseologyAuthor Commented:

thanks for the info!  I realized my mistake later.  When I created the user control xaml, VS2008 didn't name the canvas by default.  So when i tried to access it in the c# project, I couldn't get to it.  Once I named it (Name = "myName") in the XAML tag, I was of course able to get to it and its methods (like, Children.Add(newBtn)).

I also wanted to place the button strategically, so in case anyone is interested, here is a code snipped on how to place the button in a certain location on the canvas...

newBtn.SetValue(System.Windows.Controls.Canvas.LeftProperty, (double)100);
newBtn.SetValue(System.Windows.Controls.Canvas.TopProperty, (double)100);

Thanks!  Btw, I have another WPF question I'll post soon.  So look out for it!  :)


It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Editors IDEs

From novice to tech pro — start learning today.