Category Archives: 2013 R1

Video Tutorials: Understanding MVVM Pattern and Building Simple Tip Calculator App with Crosslight

We have released two new video tutorials on Crosslight to help you better understand how to develop better mobile applications using Crosslight.

Understanding MVVM Pattern in Crosslight

This video tutorial outlines in general how the MVVM pattern works in Crosslight apps development. You will learn how Crosslight leverages the MVVM concept in order to produce cross-platform projects with a single shared application layer. By the end of this video, you will be able to grasp the MVVM pattern in general as well as getting the right mindset when building apps using Crosslight.

Building Simple Tip Calculator using Crosslight

This video tutorial explains how you can build a simple tip calculator app using Crosslight  within minutes that target all four major platforms at once (Android, iOS, Windows Phone, Windows 8). This video aims to highlight the data binding capabilities in Crosslight that leverages the MVVM pattern found in .NET applications to mobile apps development. You can find the source code for this video in our GitHub link:

Should you have any further questions, feel free to contact us at or raise a thread in our forums. Hopefully this video will give you a clearer concept how Crosslight works and how you can slash development time in more than half and increase your productivity. Stay tuned for more Crosslight video tutorials. Don’t forget to subscribe to our YouTube channel as well!

Nicholas Lie

Crosslight December 2013 Update Delivers Many Refined Features

The best cross-platform mobile toolset refined to its core.

Two weeks ago, we released our SP1 milestone for Mobile Studio, bringing many new yet useful features such as the versatile navigation drawer for iOS and Android platforms. Today we have just released a more refined version of the the world’s most robust toolset for cross-platform development, with features that may not be plainly seen with the naked eye. In this post, we will cover many meticulous details such as elegant rotation handling for use with the Android navigation drawer and nested fragment navigation, updated navigation drawer samples, and also a delicate handling of the IsTransitioning state with the new left-edge swipe gesture and controller transition support introduced in iOS 7.

Rotation, Elegantly Handled.

Developers coming from the Android world will be familiar with the pain and frustration that we all share when designing apps for the Android platform, especially when fragments are used. When the Android device is rotated, the FragmentActivity as well as the Fragments are destroyed, which will then need to be recreated. Handled incorrectly, will result to incorrect app behavior that may confuse user and breaks overall user experience, not forgetting to mention how apps will crash more often.

Rotation Elegantly Handled

Crosslight for Android has been updated to address this issue, and developers will appreciate how all the intricate details have been taken care of. Now you will only need to focus on the ViewModel as well as the look and feel of their app, instead of having to handle the delicate rotation lifecycle. The ViewModels are now automatically persisted across rotation lifecycle, making sure that the screen view state and user’s editing session are correctly persisted when the FragmentActivity is recreated. Tested and proven on all form factors and orientation, this great time-saving feature will definitely shave weeks off your time table.

Nested Fragment Navigation in Navigation Drawer.

Previously, we have introduced the stunning and elegantly designed navigation drawer for Crosslight. Now, it has been updated to support nested fragment navigation as well as keeping the navigation stack intact when the user has navigated and the device is rotated, allowing greater user experience and flexibility of your app when using the navigation drawer.

Nested Navigation

We have also introduced a new RightButtonDrawerId property for DrawerSettings in Android, allowing you to toggle the right navigation drawer using the action bar, if you wish to. The feature can be easily enabled by supplying the RightButtonDrawerId with the ID of menu item you wish to use as the toggle in the ActionBar. We also have updated our Facebook-style and Worthy-style navigation drawer samples to reflect the changes.

Updated Navigation Drawer Samples

Left-edge Swipe Gesture and Controller Transition Support for iOS 7.

Since the introduction of iOS 7, Apple has introduced a new “hidden” gesture that most users might not be aware, which is the left-edge swipe gesture.  iOS 7 has introduced a new state where the view is transitioning, which is now handled correctly. Changes to the view model will now take place when the view has completely transitioned, which means, changes will not be processed if the user swipes halfway through and returns to the editing page. The view is now also smoothly transitioned with fading animation during transition. This subtle yet important feature reflects our commitment to pay attention the smallest details that can give impact to user experience.

Left-edge Swipe Gesture and Controller Transition Support for iOS 7.

This update marks as the last and most stable version of Crosslight until the next major version is available. Sign in to your account to download the new December 2013 update today.

In the next major release, Crosslight will ship the world’s first cross-platform data access framework with EntityContainer with tracking changes, async CRUD operation, async batch update, and much more . Supporting latest Microsoft technologies such as WebApi 2 and EntityFramework 6, Crosslight data service will provide advanced TT code generation as well as streamlined serialization and deserialization which were recently released, as well as support for transmission using OData. Stay tuned for more!

Got questions? Feel free to leave a comment or start a discussion at our forums.

Nicholas Lie

Intersoft Studio 2013 SP1 Features Visual Studio 2013, IE 11, and Many Major Updates

We are very excited to announce the release of our latest and greatest toolset for .NET development, which have reached SP1 milestone. Our ASP.NET controls are now updated with full Internet Explorer 11 and Visual Studio 2013 support, running on both designer and runtime environment. Project templates for Crosslight are now updated with latest PCL support, as well as Crosslight-enabled navigation drawer controls are now fully supported in both Android and iOS platforms. The Mobile Studio Installer for Mac is also updated to really get you jump quickly on the mobile development train. Read on.

Full Internet Explorer 11 and Visual Studio 2013 Support

Users running Microsoft’s latest internet browser can now rest assured knowing that our controls consisted in WebUI Studio for ASP.NET lineups, such as WebCombo, WebDesktop, WebEssentials, WebGrid, WebInput, WebScheduler, WebTextEditor and WebTreeView are now updated with full Internet Explorer 11 support, as well as support for designer and runtime support in Visual Studio 2013.

WebScheduler Design

WebScheduler Runtime

Full PCL Support for Visual Studio 2013 and Xamarin Studio on Mac

Since Xamarin announced full PCL support, we have also updated our time-saving templates to fully comply with the latest PCL standard, ensuring smooth operations on all supported IDEs across Windows and Mac: Visual Studio 2012, Visual Studio 2013, Xamarin Studio for Windows and Xamarin Studio for Mac. You can rest assured knowing that your projects will flawlessly support PCL on .NET Framework 4.0 upwards.

Crosslight running on Visual Studio 2012.

Visual Studio 2012 Compatible - 1

Crosslight running on Visual Studio 2013.

Visual Studio 2013 Compatible - 3

Crosslight running on Xamarin Studio for Windows.

Xamarin Studio on Windows

Crosslight running on Xamarin Studio for Mac.

Xamarin Studio PCL

New Navigation Drawer Samples

As navigation drawer becomes a standard design pattern for mobile apps, we realize it is necessary to create Crosslight-enabled navigation drawers that runs on two of the world’s most most popular platform: iOS and Android. Designed with intuitive navigation interface that conforms to each platform’s UI guidelines, the navigation drawer is guaranteed to give you greater control over your apps that allows more complex navigation features. Check out our previous post that outlines the Crosslight-enabled navigation drawer experience in detail.

Jump-start Your Development on Mac

Our Mobile Studio installer for Mac now supports streamlined Mobile Studio installation as well as automatic installation of Xamarin platforms. During the installation, Mobile Studio installer now intelligently detects whether Xamarin platforms are installed and completely removes the technical difficulties for you to jump-start native cross-platform mobile development using Crosslight.

Streamlined Xamarin Installation - 1

Streamlined Xamarin Installation - 2

If you’re still unsure, we have provided a video that outlines the process clearly and you’ll be wondering why do we even make the video in the first place.

Wrapping Up

As a leading .NET component provider in the industry, we always strive to keep up with the latest Microsoft technologies, providing you with versatile components to speed up your development time so that you can ship your apps faster to market. You can get these exciting features by downloading our latest installer from the account portal. Existing customers will automatically entitled for auto upgrade, whilst if you are interested, contact us at or visit our site for complete licensing schemes.

See you on the next post,

Nicholas Lie

Crosslight Adds Stunning Drawer Navigation UI Components

It’s been really busy yet exciting time for all of us here at Intersoft. In just a few weeks time frame, we have recorded 9 new Crosslight video tutorials and publish all of them last week. At the same time, our engineering team is laser-focused in delivering new exciting updates across all product lineup. Today, we’re pleased to announce the first service pack of Premier Studio 2013 which is immediately available for download. Existing customers with active subscriptions can download the update from the account portal.

The service pack includes many important updates that you surely won’t miss. In particular, the new update includes full support for Visual Studio 2013. It also readies support for Microsoft’s latest browser, Internet Explorer 11. This is huge one – given that IE11 is completely redesigned for modern web standards and many proprietary API are no longer existed. The good news is we make it just in timely fashion. All 40+ ASP.NET components with over thousands of features have been enhanced and revived – each tested to work flawlessly in this latest browser. Go ahead and download the latest release to add IE11 support to your WebUI Studio-powered apps.

In addition to huge updates on ASP.NET, we also delivered significant improvements to our flagship cross-platform mobile toolset, Crosslight. There have been a lot of new features and addition to Crosslight since its update on iOS 7 support last month. Specifically, we’ve added a new, stunning drawer navigation for both iOS and Android platforms which lets you easily add Facebook or Path style navigation menu to your Crosslight apps. I’ll dedicate this blog post to discuss about this exciting component, share its key features and quickly brief what you can do with it.

Drawer Navigation Done Right

Many drawer navigation implementation I’ve seen were implemented in such a way where the view and content are tightly coupled, for instance, the drawer content should be a table controller in order for the drawer navigation component to work. Although the tight coupling between the view and interaction may sound common in this case, it creates a number of drawbacks and limitations to the way the component is used. Put simply, you cannot use any arbitrary content to the drawer which actually defeats the purpose of a content control.

When we designed our drawer navigation component from the ground up, we were strongly focused in the view architecture to make sure it is built right from the start. As the results, the Crosslight drawer navigation conforms to the industry-standards content control which allows developers to put any arbitrary content in the drawer while seamlessly automating all navigation processes to the view’s delegate. This is made possible thanks to the thoughtfully designed architecture that emphasize pure separation between the view and the user interaction. Crosslight was built right since the beginning, which enables future components (drawer navigation in this case as the proof) to leverage the same design pattern and get everything working seamlessly – without changes to the existing codebase.

To show you how easy and straightforward it is to change a standard table view navigation into a drawer navigation, let’s take the original Data Samples that shipped with Crosslight and transform it to a stunning drawer navigation.

First, create a new ViewModel based on the DrawerViewModelBase class – new in this release. Let’s name it DrawerViewModel.

    public class DrawerViewModel : DrawerViewModelBase
        public DrawerViewModel()
            this.LeftViewModel = new NavigationViewModel();
            this.CenterViewModel = new SimpleListViewModel();


Then change the root view model of the app to the drawer view model that we just created. Generally, you set the root view model in the OnStart method of the application service

    public sealed class DataSamplesAppService : ApplicationServiceBase
        protected override void OnStart(StartParameter parameter) { base.OnStart(parameter); this.SetRootViewModel<DrawerViewWodel>();         } }

Finally, on the iOS project, simply add a new view controller class that derives from UIDrawerNavigationController generic class which is new in this release. Unless you’re doing extra customization to the drawer, you can leave the class empty without any single code within.

    public class DrawerNavigationController : UIDrawerNavigationController<DrawerViewModel>

Similarly, add a new class to the Android project which derives from the DrawerActivity class. Remember to specify the drawer view model that we’ve just added earlier as the generic type parameter of the class.

    [Activity(Label = "Drawer Activity")]
    public class DrawerNavigationActivity : DrawerActivity<DrawerViewModel>

Run the project – and you’ll see the classic table navigation now magically turn into a stunning drawer navigation interface – complete with the touch gestures, close on navigate, and automatic navigation bar synchronization, all done right.

Crosslight Drawer Navigation

Incredibly easy, isn’t it? More importantly, you can reuse existing ViewModel as the content for either left or right drawer by specifying them in the DrawerViewModel. In case you would like to change back to the previous table navigation, you simply change the root ViewModel back to NavigationViewModel – and everything on the UI side reflects automatically.

How’s that possible – you might asked. The answer lies in the architecture design that carefully separates the user interaction out from the view. In this scenario, the master and detail view are actually two separate objects which is controlled by user interaction logic, in this case, the navigation logic. Since the navigation logic is implemented in a different layer, this allows us to tear these views apart and put them side by side without requiring code changes on the application’s end. The following illustration gives you a better visualization to understand how we built Crosslight to be a truly extensible, future-proof framework.

Drawer navigation done right

All The Great Features You’ve Ever Wanted

So that now you’ve got a handsome drawer navigation UI ready to be plugged into your next-gen mobile apps, let’s explore what you can do to make it looks and feels the way you desire. Note that the drawer navigation component is available for both iOS and Android platforms – both designed with the native UI guidelines.

Flexible one or two-sided drawer

Crosslight drawer navigation supports various drawer interface found in many popular apps today. You can choose one-sided drawer – where the drawer is either at the left or right side of the content; or two-sided drawer which are trending in recent apps such as Path, Worthy, and more.

The following illustration shows the left-side and right-side drawer navigation in iOS.

iOS Drawer Navigation

And the Android counterpart below.

Android Drawer Navigation

Keep in mind that although the drawer interface is designed according to the respective platform guidelines, the drawer view model and user interaction logic are entirely platform neutral which is defined in the shared application layer (portable project). As the results, when you modified the properties of drawer view model for example, the same app on both platforms will naturally reflect the changes.

Intuitive design based on platform’s native UI guidelines

In the iOS platform, the UIDrawerNavigationController class features dozens of drawer-related settings that you can easily customize through a single property set. One noteworthy feature is the status bar transition particularly useful in iOS 7 apps. We provided not only one status bar transition mode, but three. The first is the Facebook-style status bar transition where it smoothly fades from the original color to black. The second is the fading from any arbitrary custom color. The most interesting is perhaps the third one, translucent blur transition, where the status bar is smoothly faded with stunning translucent blur effect.

Crosslight drawer navigation features stunning status bar transition

Another noteworthy feature is the panoramic background image feature which lets you easily add beautiful photo to the drawer navigation control. Amaze your users with the combination of iOS7-style frosted-blur visual effect in the content view – creating sense of depth and great user experiences to your apps.

Background image with translucent blur drawer navigation

Other drawer settings on iOS that you might want to explore are drawer width, various shadow settings, fading animation, flick velocity, navigation bar tint color, status bar colors, status bar content styles, landscape background image, and much more.

The Android version has fewer customizable settings compared to iOS, although certain essential settings are must-have such as the background color, drawer width, and more.

5 Drawer Samples Included

Along with the service pack release, we’ve also updated Mobile Studio installer for both Windows and Mac with the latest Crosslight assemblies. The installers also include five new drawer samples that you can refer to learn more about the drawer navigation features. Or better, use it to quickly jump start your next mobile apps.

The included drawer samples are: Drawer Data Samples, Simple Drawer Style, Facebook Drawer Style, Translucent Drawer Style, and Two-sided Drawer Style.

Login to your account, download the new bits and test drive the new drawer UI components today.

What’s Next

In this blog post, I’ve covered the basics of our new drawer navigation UI components, how it’s designed and what features you can bring to your apps. In this milestone, you can now easily create great mobile apps for your business featuring great user experiences such as those popular apps in the store.

But, we still have a lot more to cover. In the upcoming 2013 R2 release, we’re planning to ship Crosslight vNext which will include a multitude of new cross-platform components and data services that will forever change the way you build data-intensive, enterprise-grade mobile apps. Stay tuned for our next announcement!


Video Tutorials: Getting Started with Crosslight

After you have successfully installed Mobile Studio by following the previous blog post, it’s highly recommended that you understand how Crosslight works as a framework, and how it can add significant values to your current application lifecycle management. The blog post will cover highlighted features of Crosslight in a high-level overview that reflects Crosslight values to the mobile world, especially when you’re coming from .NET. The video highlights the following:

  • Cross Platform Mobile Development Challenges
  • Crosslight Overview
  • Crosslight Architecture Overview
  • Crosslight Technology Overview
  • Hello World in Crosslight
  • MVVM Pattern Overview in Crosslight
  • Crosslight Solution Overview
  • Crosslight Enterprise Benefits
  • Crosslight Form Builder
  • Crosslight Mobile Services
  • Crosslight extensible architecture
  • Crosslight Project Wizard

This blog post has outlined how you can leverage Crosslight to your existing ALM, and how you can benefit from it. We truly believe that Crosslight will greatly improve your existing workforce. Cut development times, reduce costs, improve productivity and faster time-to-market.

You can find out more about Crosslight and Mobile Studio by visiting our site. Feel free to try out Crosslight for 30 days from the Request Trial page to see Crosslight for yourself. Got any questions about Crosslight? Visit the our forums or drop us a mail at Contact for licensing schemes. Stay tuned for more blog posts and video tutorials on Crosslight.


Nicholas Lie