Dynamic Controls creation in a C# WPF Application (Part 1)

This article demonstrates how to create animations by using pure XAML with a code behind C# file instead of using tools like Expression Blend. This provides the developer the comforts to animate a particular object in any way he wants.

Create a new WPF application. Select language as C# and name the application to whatever you desire.

Secondly, give your grid any name like Name=”MasterGrid”

Now you need to define a windows "Loaded" event. On your XAML code pane, simply define a new event handler for Loaded event

Now go to your Window1.xaml.cs file

Here you can easily find Windows Loaded method ready to be defined.

Now the first thing that you need to create for dynamic controls is Resource Dictionary. Resource Dictionary holds all the styles you wish to have for your dynamic user controls. So to create the Resource Dictionary, you do the following:

1- Right Click your project root and select Add->New Item…

2- From the Items selection menu select Resource Dictionary (WPF), give it any name and click OK.

3- Now open your Resource Dictionary file.

The problem with editing a Resource Dictionary in Visual Studio 2008 is that one cannot see what’s the behavior of style is or what animations one is referring to, so unfortunately we are left here with no choice but to use Expression Blend, Create a style there and then copy paste its xaml code in our resource dictionary file.

Note: If you are a true Pro in xaml and can define your styles by writing pure xaml then you can go for it. There also exist another option which in my opinion is better than the two option I have discussed but I will keep the discussion of that option in Part 2 of this article.

4- Create a New Project. Name it to whatever you like and then click OK.

5- Now in this environment I am going to create a button with certain modifications and animations. So for that, I need to create a style therefore I first drop a button in my workspace and right click on it and select Edit Control Parts(Template)->Edit a Copy

6- Provide a name to your new style and click ok. I named my style as btnStyle. (Leave every other option to its default settings)

7- Now you can create your button’s new style here and if you want you can also add animations to it. Without going into details here, I created a new style for my button. For your assistance the xaml code of my button is given below;

10- Note that there is an external reference required at line no.6 of this xaml code named PresentationFramework.Aero for this reference you need to right click your project file in solution explorer and select Add Reference… and select .NET->PresentationFramework.Aero

This is all we need to do in xaml and our resource dictionary file.

11- Now we go back to our Window1.xaml.cs file and create a global Button instance.

1: Button btn = new Button();

12- Exchange the code of Window_Loaded with the code below

1: privatevoid Window_Loaded(object sender, RoutedEventArgs e)

2: {

3: btn.Click += btn_Click;

4: btn.Height = 30;

5: btn.Content = "Click Me!!";

6: btn.Width = 200;

7:

8: MasterGrid.Children.Add(btn);

9: }

In the code above, we simply defined some properties of our global button.

13- Add a clicking event using

btn.Click += btn_Click;

in windows loaded event we now need to define btn_Click, which will be

1: privatevoid btn_Click(object sender, RoutedEventArgs e)

2: {

3: ResourceDictionary res = (ResourceDictionary)Application

.LoadComponent(new Uri("Style.xaml", UriKind.Relative));

4: Style style = (Style)res["btnStyle"];

5: btn.Style = style;

6: }

Here we created a reference to our resource dictionary file, then created a new style instance and provided it our Resource Dictionary of style "btnStyle" which we created earlier in Expression Blend and then finally defined a new style to our button.

This is a nice article with a good number of illustrations which helps a lot in conveying a concept. However, Blend can open an existing WPF Application Visual Studio project and also compile it, there is no need to create a separate project in Blend for customising a button (or any other control).

This is a nice article with a good number of illustrations which helps a lot in conveying a concept. However, Blend can open an existing WPF Application Visual Studio project and also compile it, there is no need to create a separate project in Blend for customising a button (or any other control).

This is a nice article with a good number of illustrations which helps a lot in conveying a concept. However, Blend can open an existing WPF Application Visual Studio project and also compile it, there is no need to create a separate project in Blend for customising a button (or any other control).

This is a nice article with a good number of illustrations which helps a lot in conveying a concept. However, Blend can open an existing WPF Application Visual Studio project and also compile it, there is no need to create a separate project in Blend for customising a button (or any other control).

Thanks and yes i agree one can edit existing WPF project in Blend but we are initializing every control on runtime using c# code. How can one edit a control or even customize it if it’s not already a part of our Layout Root or User Control file(if we have one, which is not the case), plus we are considering Resource Dictionary which use to work on existing controls if editing in Blend (using Blend tools). Anyways if you are interested to do so with the same project in Blend you have to create a new User Control then edit it in existing Resource Dictionary and utilize it in styling your control(s) created on runtime but don’t you think our project is going to hold an extra UserControl.xaml file, by creating a new project we are actually missing our headache of holding this file;) BUT if you are thinking about working with xaml code then why bother Blend you can do the same in Visual Studio (the second option :)).

Thanks and yes i agree one can edit existing WPF project in Blend but we are initializing every control on runtime using c# code. How can one edit a control or even customize it if it’s not already a part of our Layout Root or User Control file(if we have one, which is not the case), plus we are considering Resource Dictionary which use to work on existing controls if editing in Blend (using Blend tools). Anyways if you are interested to do so with the same project in Blend you have to create a new User Control then edit it in existing Resource Dictionary and utilize it in styling your control(s) created on runtime but don’t you think our project is going to hold an extra UserControl.xaml file, by creating a new project we are actually missing our headache of holding this file;) BUT if you are thinking about working with xaml code then why bother Blend you can do the same in Visual Studio (the second option :)).