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.

Thanks!
gusseologyAsked:
Who is Participating?
 
SawinerConnect With a Mentor Commented:
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:

<UserControl
    x:Class="WindowsFormsApplication1.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300" Width="300">
   
    <WrapPanel Name="hostMain" Width="298">
        <Button
                Click="Button_Click"
                VerticalAlignment="Top"
                HorizontalAlignment="Left"
                >
            <Button.Content>
                Press here to create another button
            </Button.Content>

        </Button>
    </WrapPanel>
</UserControl>

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()
        {
            InitializeComponent();
        }

        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();

            ++_btnCnt;

            btn.Content = tb;

            //add it to the host
            hostMain.Children.Add(btn);
        }
    }
}

p.s.
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.
0
 
gusseologyAuthor Commented:
Sawiner,

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!  :)


jesse

0
All Courses

From novice to tech pro — start learning today.