C1SuperPanel Migration: Palomino to Wijmo

As we continue the evolution of our web stack here at Component One, we find ourselves exploring more and more controls and finding ways to improve them. The new Studio for ASP.NET Wijmo keeps up with this trend with the new and improved C1SuperPanel control. The ASP.NET AJAX's successor is not only more powerful, it also has a robust set of theming options with themeroller support. This post is meant to guide you through the process of migrating your ASP.NET AJAX controls to the new ASP.NET Wijmo controls and also give you an idea of how the control has evolved.

Prerequisites

Before we get started, there are a few things that you will need for this migration. Obviously, the first thing that you will need is the new Studio for ASP.NET Wijmo control suite. Studio for ASP.NET Wijmo can be downloaded and installed as a standalone studio or as a part of the Studio Enterprise and Studio Ultimate packages. You will also need a project to migrate. You can find the instructions for creating a sample AJAX SuperPanel project here. Once you have installed the controls and created the base project, we are ready to roll.

Getting Started

First, let's take a look at what you are getting with the new Wijmo controls. The new Wijmo C1SuperPanel offers many improvements over its predecessor. One notable mention would be client side scrolling API which brings faster, more accurate scrolling to the C1SuperPanel. 

Migration

With that being said, let's get started. First you will need to create a basic ASP.NET Website in Visual Studio. Starting out, the creation and modification of the Wijmo C1SuperPanel is very similar to the AJAX C1SuperPanel. So, with a new ASP.NET Website created, start by adding the Wijmo C1SuperPanel to the aspx page. Once added, let's get some content in there. As with the AJAX C1SuperPanel, the Wijmo C1SuperPanel is capable of holding HTML markup as well as ASP.NET controls that are accessible from code behind. Navigate to the markup for the aspx page and add the following Content Template markup inside the SuperPanel tags.

This will load the content into the C1SuperPanel control. If you run the application right now, it should resemble the following. As opposed to the AJAX C1SuperPanel shown here: The next step is to add some styling to the elements within the C1SuperPanel. This is done through the xml on the aspx page also. Enter the following xml between the head tags of the aspx markup page. If you run the application and test the scrolling, you should notice right away the speed and fluidity improvements in the new control. Let's take this one step further and implement a mixed scroll mode. For this we will add some code in the code behind. As I said, the setup for these controls is almost identical, but the end result is a vast improvement over the AJAX control. In the PageLoad event, add the following code: This is a bit different than the AJAX C1SuperPanel code behind which looks like the following: As you can see, there are subtle differences that need to be observed. Now run the new Wijmo app and notice that now there are now multiple scrolling options. You will notice that there are now navigation arrows on the edges of the panel and the modified C1SuperPanel should resemble the following. You can customize the newly implemented scrolling options by setting the animation properties of the C1SuperPanel. Navigate to the properties grid for the Wijmo C1SuperPanel and expand the PanelBehaviorSettings node and notice AnimationOptions.AnimationEasing and AnimationOptions.AnimationDuration settings. These are the settings that you adjust to set the animation effects of the panel's scroll mode. One thing that I wanted to mention before I wrap it up here is the theming of the new Wijmo controls. The new Wijmo controls offer numerous theming options from the 6 brand new built in themes to several themes available from ThemeRoller. To access the built in themes, navigate to the task menu of any Wijmo control and pick your poison.

Conclusion

Now that you have seen it done, hopefully you'll be more inclined to pick up the new Wijmo suite of controls. The C1SuperPanel as well as many other supercharged ASP.NET controls can be downloaded as a part of Studio for ASP.NET, Studio Enterprise or Studio Ultimate downloads.