Tag Archives: 2013 R1

Video Tutorials: Installing Mobile Studio and Preparing Your Development Environment

In the early September 2013, we proudly announced our comprehensive toolset for the mobile development world, the Mobile Studio. Using Mobile Studio, now you can rapidly build powerful mobile apps on the world’s top platforms – iOS, Android and Windows – with a single application codebase. Check out our site for more information on Mobile Studio. To help you get started with Mobile Studio, this blog post aims to guide you from start-to-finish on how to install Mobile Studio on both Mac and Windows, as well as preparing your machine for cross-platform development for both platforms.

Mobile Studio ships with the all-new powerful mobile development toolset that will change how you program native apps, using Microsoft’s and Xamarin’s technology. Introducing Crosslight, the world’s first robust, extensible mobile toolset that leverages the MVVM pattern that extends over world’s 4 most famous mobile platforms: iOS, Android, Windows Phone 8 and Windows 8. To get a general overview of what is Crosslight, how Crosslight add values to your business, and understand how Crosslight works, see our blog post: Getting Started with Crosslight. Also check out our site for more information on Crosslight.

Installing Mobile Studio

To help you install Mobile Studio on Mac and Windows, check out the following videos.

Windows

Mac

Preparing Your Development Environment

These videos will help you in configuring your machine for development using Crosslight.

Windows

Android

iOS

Windows Phone 8

Windows 8

Mac

Android

iOS

After you have successfully followed these videos, your machine should be ready for cross-platform development using Crosslight. Should you need any further assistance, feel free to contact us at technical@intersoftpt.com or you can visit our forums. If these videos helped you, don’t forget to like our videos and subscribe to our YouTube channel for more videos.

Cheers,

Nicholas Lie

Building Inventory Tracker Apps with Crosslight

The Inventory Tracker sample shipped with Intersoft Mobile Studio is a great reference sample that simulates the real-world condition of how a basic, yet still providing a great user experience app should be. The Inventory Tracker is designed for workers that in a warehouse who want to track the items they have in store. The sample provides intuitive CRUD operation that extends beyond common applications with CRUD functionality. Some details are meticulously considered and thoughtfully designed to provide the user with a great form input experience, when usually form inputs have an impression of being a boring chore.

This blog post aims to elaborate the details that made this reference sample app different from other app with form inputs in the market, while exposing the features of form builder built into Crosslight framework. By just defining one form metadata, you can rest assured that the forms you create in one platform will easily work in another and provide a great and consistent user experience.

Supports Multiple Platforms

Supports Multiple Platforms

The Inventory Tracker sample runs on a shared application logic, and runs great on iOS, Android, WIndows Phone and WinRT, while conforming to each platform UI guidelines. The sample does not enforce the same design throughout different platforms, this is because different platforms have different design guidelines and if you try to imitate one platform’s experience with another, this would greatly crimp the user experience.

Automatic Rotation Handling

Automatic Rotation Handling

The Inventory Tracker responds fluidly to orientation changes, while keeping the bindings intact. Take Android for example, by standard measures, you would have to eventually store the values entered by the user back and forth yourself every time the Activity is recreated after rotation. Handling this scenario will definitely take a lot of your precious development time. Crosslight has taken care of this from the back-end, so you can rest assure that your data integrity is maintained even after countless orientation changes and the bindings will remain intact.

Master-Detail Navigation

Master-Detail Navigation

The user experience when using a tablet must differ, as you have more screen estate to utilize. In a tablet, you would probably want to split the screen into two parts, a smaller left portion for the items list and the rest of the screen for the detail view. The Inventory Tracker executes this scenario beautifully by adapting itself to tablet devices, using a single codebase. Try to deploy the sample on a tablet device or emulator and see for yourself. More importantly, Crosslight ships with this template by default, so you can easily create such experience with greater ease.

Powerful Data Bindings

Powerful Data Bindings

By default, when you are either in add new item screen or editing an item screen, the bindings are set two-way by default. This allows hassle-free editing of items, and the changes made truly reflects the underlying model of the item. The add item command and the save item command are also bound to the button using the robust data binding feature introduced by the form builder of the Crosslight framework.

Versatile Visibility Bindings

When adding new items using the form metadata, you can hide a specific section using the visibility binding attribute. The item form metadata has a specific SoldSection that can be hidden during addition of new item, since it would be counter-intuitive if you add a new item then immediately mark that item as sold.

In the editing item screen, when the IsSold switch is turned on, the Sold Date property immediately responds by making the sold date editor to visible, on the other hand, when the IsSold switch is turned off, the sold date editor is hidden from the view. This is possible because of the solid MVVM binding framework introduced in Crosslight.

public class SoldSection
{
	[Editor(EditorType.Switch)]
	[Display(Caption = "Is Sold")]
	public static bool IsSold;

	[Display(Caption = "Sold Date")]
	[Editor(EditorType.Date)]
	[VisibilityBinding(Path = "IsSold")]
	[Binding(StringFormat = "{0:d}")]
	public static DateTime SoldDate;
}

Batch Operations

Batch Operations

You can execute batch operations on multiple items at once, for example, deleting multiple items at once, or marking them as sold. When marked as sold, the UI immediately responds by giving the label a strikethrough effect to provide a solid user experience. Batch operations allows for greater time saving when executing redundant operations for a batch of items. Apps developed using Crosslight will save a lot of time, not only for you, but also for the users of your app.

Data Presentation Variations

Data Presentations Variations

We have shipped two different variations for the iPad version. The first variation of Inventory Tracker sample presents the list of items in a master-detail fashion, whereas the other one showcases the items in a grid-view like structure. These two samples follows the Apple HIG (Human Interface Guidelines) for iPad, therefore giving users a better experience when using the app. Editing screen is also shown differently, one in a detail view, whereas the other one in a popover controller.

Efficient Memory Management

The list view introduced in Inventory Tracker sample highlights one of the most important feature that a listing app should have: efficient memory management. This feature is efficiently achieved through smart cell reuse, all done in background. The table cell gets reused when it is out of the view, so you don’t have to worry of having a large amount of footprint when your item list gets too large. All you have to do is provide the items source in the view model and let Crosslight do the rest. Did I forgot to mention that you can freely customize the item template yourself?

Built-in Search

Built-in Search

If you have hundreds and thousands of items in the list, how can you filter items accordingly? Well, the Inventory Tracker for Android and iOS platforms are shipped with a powerful built-in search feature that allows you to filter items in a fast, efficient manner. On iOS, items are filtered along as you type, so you can quickly choose an item when it comes to view. On Android, the items will be shown at the exact same time after you have hit the search button on your keyboard.

Powerful Image Picker Editor

Powerful Image Picker Editor

Inventory Tracker ships with a powerful image picker editor that allows you to take pictures from the device camera, with added support for cropping and scaling, native to the platform level. More importantly, this is all done just by defining the form metadata using the form builder. You can also add your own custom logic after the you have retrieved the image from the camera by defining commands from the view model.

The Form Metadata definition:

[ImagePicker(ImageResultMode = ImageResultMode.Both, ActivateCommand = "ActivateImagePickerCommand", PickerResultCommand = "FinishImagePickerCommand")] public static byte[] ThumbnailImage;

You can intercept the commands in the view model:

  private void ExecuteActivateImagePicker(object parameter)
        {
            ImagePickerActivateParameter activateParameter = parameter as ImagePickerActivateParameter;
            if (activateParameter != null)
            {
                activateParameter.CustomCommands = new Dictionary();
                activateParameter.CustomCommands.Add("View Larger", this.ViewLargeImageCommand);
            }
        }

        private void ExecuteFinishImagePickerCommand(object parameter)
        {
            ImagePickerResultParameter resultParameter = parameter as ImagePickerResultParameter;

            if (resultParameter != null && resultParameter.Result != null)
                this.Item.LargeImage = resultParameter.Result.ImageData;
        }

Intelligent Layout Awareness

Intelligent Layout Awareness

Apps built on the WinRT platform introduces many visual states that many apps might forget to cover: landscape, filled, snapped and portrait. In the WinRT version of the Inventory Tracker sample, we have covered this scenario in depth, while introducing the wrapped LayoutAwarePage that smartly responds to the various screen states introduced in WinRT platform.

<VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemGridView" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="96,137,10,56"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemGridView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

Tactical Use of Presenters with Data Validation Support

Tactical Use of Presenters with Data Validation Support

The Inventory Tracker sample offers data validation support with targeted use of presenters. For example, when you try to add an item and you have not entered a product name, a message presenter will be shown, notifying the error. Also, a toast presenter will be shown after you have finished editing. This subtle, yet important toast message informs the user that changes have been made and saved successfully. Giving users the right feedback at the right time is one of the key fundamentals of creating a rich experience for the users of your app. More importantly, you can be invoke the toast presenter from the view model, making sure that all your apps behave in the same, consistent manner.

this.ToastPresenter.Show("Changes saved.");

Wrap-Up

Now you have just seen the features exposed in the inventory tracker sample. This is great news for you because you can easily obtain the same user experience in your app by utilizing the powerful form builder feature in Crosslight. The form builder feature allows you to build forms in minutes, just by specifying partial class for the model which acts as the metadata and giving the corresponding attributes. You can try all of this exciting features by grabbing a copy of Intersoft Mobile Studio from this link: http://www.intersoftpt.com/RequestTrial. Learn more about Crosslight at: http://www.intersoftpt.com/Crosslight/.

Cheers,

Nicholas Lie


Cross Platform Mobile Development with Crosslight – Part 2

This is the second post of cross-platform mobile development with Crosslight series. Continuing from the previous post , I am most pleased to share two of the exciting features shipped with Crosslight: unified navigation framework and powerful data binding.

Unified Navigation Framework

As navigation differs from one mobile framework to another, it’s a challenging task for mobile developers to streamline the navigation logic all in one place that can work consistently between platforms. Take iOS, Android, Windows Phone, and WinRT for example. iOS uses push navigation while Android uses Intent-based navigation while Windows Phone and WinRT use Page-based navigation. Gone are the days you will have to worry about these troubles with Crosslight. This section will outline the features supported by Crosslight navigation framework.

Basic Navigation

Crosslight navigation supports basic navigation to a page using the view model.  This is achieved using the navigation service from the view model and calling the Navigate method then specify the desired view model to navigate. It’s as simple as that.

Basic Navigation on iOS

At its simplest form, basic navigation can simply be done with the following simple calls from the view model:

private void ExecuteNavigateIdentifier(object parameter)
{
    this.NavigationService.Navigate("ViewModel1Derivative");
}

private void ExecuteNavigateParameter(object parameter)
{
    // You can pass any objects as parameter during navigation
    this.NavigationService.Navigate(new NavigationParameter(parameter));
}

private void ExecuteNavigateType(object parameter)
{
    this.NavigationService.Navigate();
}

Note that you can also navigate to the same view model but consumed by different views using the NavigationParameter as shown above.

List Navigation (Push Navigation)

Crosslight navigation service enables you to perform navigation from within the view model. You can navigate to a view model by providing the type, or a known identifier.

Unified List Navigation on WIndows Phone

The navigation view model looks as simple as this:

public class NavigationViewModel : ListViewModelBase
{
    public NavigationViewModel()
    {
        IApplicationContext context = this.GetService().GetContext();

        List items = new List();

        items.Add(new NavigationItem("Simple List", "Data View", typeof(SimpleListViewModel)));
        items.Add(new NavigationItem("Grouped List", "Data View", typeof(GroupListViewModel)));
        items.Add(new NavigationItem("Grouped List (Section)", "Data View", new NavigationTarget(typeof(GroupListViewModel), "GroupStyle")));
        items.Add(new NavigationItem("Grouped List with Index", "Data View", new NavigationTarget(typeof(GroupListViewModel), "GroupIndex")));
        items.Add(new NavigationItem("Searchable List", "Data View", typeof(FilterListViewModel)));
        
	...

        this.SourceItems = items;
        this.RefreshGroupItems();
    }

    public override void RefreshGroupItems()
    {
        if (this.Items != null)
            this.GroupItems = this.Items.GroupBy(o => o.Group).Select(o => new GroupItem(o)).ToList();
    }
}

Modal Navigation

The integrated navigation service supports a special navigation type called as modal navigation. It is particularly useful to present a view that waits for user input; you can return a navigation result indicating whether the user provided the input or cancelled the input, as well as capturing additional data as the result of the modal navigation.

Modal Navigation on Android

To execute a modal navigation, in the view model, we can specify as follows:

private void ExecuteNavigateModal(object parameter)
{
    NavigationParameter navigationParameter = new NavigationParameter()
    {
        NavigationMode = NavigationMode.Modal
    };

    ...

    this.NavigationService.Navigate(
        new NavigationTarget(typeof(ViewModel3), navigationParameter),
        (result) =>
        {
            if (result.Action == NavigationResultAction.Cancel)
                this.MessagePresenter.Show("You cancelled the data input");
            else
                this.MessagePresenter.Show("You entered: " + result.Data.ToString());
        });
}

Notice that after modal navigation is executed, you can handle the result of the modal navigation through action callbacks.

Nested Modal Navigation

In addition to basic modal navigation, the Crosslight navigation service also supports advanced modal navigation that allows you to perform navigation within the modal view context. Called Nested Modal Navigation, this feature is particularly useful when you need to capture numerous data input that are split to multiple views (wizard-like).

Nested Modal Navigation on WIndows Phone

The navigation service manages the navigation stack made during the modal session. When the Close method is called, it automatically discards the entire modal navigation stack, and return to the initiator view.

Nested Modal Navigation Result on Windows Phone

It is quite simple to execute a nested modal navigation:

private void ExecuteNavigateModal(object parameter)
{
    NavigationParameter navigationParameter = new NavigationParameter(new RegistrationData())
    {
        NavigationMode = NavigationMode.Modal,
        EnsureNavigationContext = true
    };

    this.NavigationService.Navigate(
        new NavigationTarget(typeof(NestedStep1ViewModel), navigationParameter),
        (result) =>
        {
            if (result.Action == NavigationResultAction.Cancel)
                this.MessagePresenter.Show("You cancelled the data input");
            else
                this.ShowRegistrationData(result.Data as RegistrationData);
        });
}

Similar to the previous modal navigation, you can handle the result of the nested modal navigation through action callbacks through the nested modal view initiator.

Master-Detail Navigation

The Crosslight navigation service supports master-detail navigation, both when deployed to a phone device or a tablet device. On a phone device, the navigation would be interpreted as push navigation while on a tablet it would be treated differently based on the targeted platform.

On phone, it will look like this:

Master Detail Navigation on Phone

While on tablet:

Master Detail Navigation on Tablet

For iOS and Android, you would need a binding provider that specifies the detail view model when the item is tapped.

public class ListNavigationBindingProvider : BindingProvider
{
    #region Constructors

    public ListNavigationBindingProvider()
    {
        ItemBindingDescription itemBinding = new ItemBindingDescription()
        {
            DisplayMemberPath = "Name",
            DetailMemberPath = "Location",
            ImageMemberPath = "ThumbnailImage"
        };

        this.AddBinding("TableView", BindableProperties.ItemsSourceProperty, "Items");
        this.AddBinding("TableView", BindableProperties.ItemTemplateBindingProperty, itemBinding, true);
        this.AddBinding("TableView", BindableProperties.SelectedItemProperty, "SelectedItem", BindingMode.TwoWay);
        this.AddBinding("TableView", BindableProperties.DetailNavigationTargetProperty, new NavigationTarget(typeof(ItemDetailViewModel)), true);
    }

    #endregion
}

Tab Navigation

The navigation service also supports tab navigation using selected index. By inheriting a special view model called MultiPageViewModelBase, you can perform navigation setting the selected index of the navigation items. You can also send parameters and custom objects during tab navigation.

Tabbed Navigation on iOS

The TabViewModel that enables tab navigation:

public class TabViewModel : MultiPageViewModelBase
{
    #region Constructors

    public TabViewModel()
    {
        var items = new List();
        items.Add(new NavigationItem("Simple Page", typeof(SimpleViewModel)) { Image = "first.png" });
        items.Add(new NavigationItem("About", typeof(AboutNavigationViewModel)) { Image = "second.png" });

        this.Items = items.ToArray();
    }

    #endregion
}

Powerful Data-Binding Features

Crosslight was designed with the powerful MVVM design pattern in mind. The MVVM design pattern itself is almost always associated with data-binding concept. .NET developers targeting Silverlight and WPF will be at home with the concept. However, this post will not cover the concepts of data-binding itself, but more on how Crosslight leverages this concept to the mobile development world, which were only available to platforms such as Silverlight and WPF. If you would like to learn more about data-binding concept, Microsoft has detailed a very good article here that covers the topic in-depth.

Property-to-Property Binding

Crosslight data-binding framework supports the very basic property-to-property data binding, enabling you to bind a property to another property using various information contained in BindingDescription using a BindingProvider class.

public class BindingModeBindingProvider : BindingProvider
{
    public BindingModeBindingProvider()
    {
        this.AddBinding("Label1", BindableProperties.TextProperty, "Text", BindingMode.OneTime);
        this.AddBinding("Label2", BindableProperties.TextProperty, "Text", BindingMode.OneWay);
        this.AddBinding("TextField1", BindableProperties.TextProperty, "Text", BindingMode.TwoWay);
        this.AddBinding("Label3", BindableProperties.TextProperty, "Amount", BindingMode.OneWay);
        this.AddBinding("Slider1", BindableProperties.ValueProperty, "Amount", BindingMode.TwoWay);
        this.AddBinding("TextField2", BindableProperties.TextProperty, "Amount", BindingMode.TwoWay);
        this.AddBinding("Stepper1", BindableProperties.ValueProperty, "Amount", BindingMode.TwoWay);
    }
}

Universal Data Management

Crosslight data binding framework supports automatic UI updates when bound to a collection. This allows for easier data management as well as saving you the trouble of updating the UI when the underlying data model changes. Consider the following view model:

private void ExecuteBatchUpdate(object parameter)
{
    // Begin updating
    this.IsBatchUpdating = true;

    // Perform multiple add and remove simultaneously
    var items = this.Items.ToObservable();
    var updatedItem = items.ElementAt(0);

    updatedItem.Name = "Modified at " + DateTime.Now.ToString("hh:mm:ss");
    this.OnDataChanged(updatedItem);

    items.Insert(1, new Item {Name = "New Item " + this.NewIndex++, Location = "New warehouse", ThumbnailImage = updatedItem.ThumbnailImage});
    items.Insert(3, new Item {Name = "New Item " + this.NewIndex++, Location = "New warehouse", ThumbnailImage = updatedItem.ThumbnailImage});
    items.Insert(6, new Item {Name = "New Item " + this.NewIndex++, Location = "New warehouse", ThumbnailImage = updatedItem.ThumbnailImage});

    items.Remove(items.ElementAt(5));
    items.Remove(items.ElementAt(7));

    this.ToastPresenter.Show("Added 3 items, removed 2 items, updated 1 item", null, null, ToastDisplayDuration.Immediate, ToastGravity.Center);

    // End updating
    this.IsBatchUpdating = false;
}

After you have finished inserting items to the model, the view updates accordingly.

Universal Data Management on iPhone

Binding to Nested Property

Aside from binding to a top-level property, you can also bind to a nested property.

Binding to Nested Property on WinRT

Case 1: Loan Calculator

Loan Calculator

A simple app that can be made using the data-binding framework is the loan calculator where you would input the amount of loan, the loan term in years, and the interest rate per year.

Loan Calculator Result on Android

Each of the textboxes and the button is bound using a BindingProvider.

public class LoanCalculatorBindingProvider : BindingProvider
{
    public LoanCalculatorBindingProvider()
    {
        this.AddBinding("AmountTextField", BindableProperties.TextProperty, "Amount", BindingMode.TwoWay);
        this.AddBinding("LoanTermTextField", BindableProperties.TextProperty, "LoanTerm", BindingMode.TwoWay);
        this.AddBinding("InterestRateTextField", BindableProperties.TextProperty, "InterestRate", BindingMode.TwoWay);
        this.AddBinding("MonthlyPaymentLabel", BindableProperties.TextProperty, new BindingDescription("MonthlyPayment") { StringFormat = "{0:c}" });
        this.AddBinding("CalculateButton", BindableProperties.CommandProperty, "CalculateCommand");
    }
}

After inputting the specified amount, loan term, and interest rate, and hit calculate, it calculates the monthly payment by calling the command specified in the view model, as follows:

private decimal GetCalculateMontlyPayment()
{
    return decimal.Round((this.Amount + (this.Amount * this.InterestRate * (decimal)this.LoanTerm)) / ((decimal)this.LoanTerm * (decimal)12),2);
}

Case 2: Currency Converter

Another simple example would be to make an offline currency converter. This example demonstrates Crosslight support for binding with full converter and UpdateSourceTrigger support.

Currency Converter

Full Converter Support

Just like the native binding found in Silverlight and WPF platforms, Crosslight also supports binding with converter, complete with converter parameter and converter culture.

UpdateSourceTrigger Support

Intersoft Crosslight provides four predefined UpdateSourceTrigger values, namely Default, Explicit, LostFocus, and PropertyChanged. By default, the update process to the bound property will be done after lost focus event is triggered. The following code shows how you can use the two-way BindingMode as well as setting the UpdateSourceTrigger to PropertyChanged.

public class CurrencyConverterBindingProvider : BindingProvider
{
    public CurrencyConverterBindingProvider()
    {
        CurrencyFormatConverter converter = new CurrencyFormatConverter();

        this.AddBinding("BaseCurrencyTextField", BindableProperties.TextProperty, new BindingDescription("USCurrency", BindingMode.TwoWay, UpdateSourceTrigger.PropertyChanged));
        this.AddBinding("BritishCurrencyTextField", BindableProperties.TextProperty, new BindingDescription("UKCurrency") { Converter = converter, ConverterParameter = "{0:c}", ConverterCulture = new CultureInfo("en-gb") });
        this.AddBinding("EuroCurrencyTextField", BindableProperties.TextProperty, new BindingDescription("EuroCurrency") { Converter = converter, ConverterParameter = "{0:c}", ConverterCulture = new CultureInfo("nl-NL") });
        this.AddBinding("SGCurrencyTextField", BindableProperties.TextProperty, new BindingDescription("SGCurrency") { Converter = converter, ConverterParameter = "{0:c}", ConverterCulture = new CultureInfo("zh-sg") });
        this.AddBinding("AUCurrencyTextField", BindableProperties.TextProperty, new BindingDescription("AUCurrency") { Converter = converter, ConverterParameter = "{0:c}", ConverterCulture = new CultureInfo("en-au") });
    }
}

As a result, the respective currencies will be converted in real time when the text is changed.

Currency Converter on iOS

StringFormat Support

Crosslight BindingProvider also supports binding with StringFormat support.

StringFormat Support on Windows Phone

public class StringFormatBindingProvider : BindingProvider
{
    public StringFormatBindingProvider()
    {
        this.AddBinding("Label1", BindableProperties.TextProperty, new BindingDescription("Amount", BindingMode.OneWay) { StringFormat = "{0:c0}" });
        this.AddBinding("Label2", BindableProperties.TextProperty, new BindingDescription("Amount", BindingMode.OneWay) { StringFormat = "{0:###,###.00}" });
        this.AddBinding("Label3", BindableProperties.TextProperty, new BindingDescription("Date", BindingMode.OneWay) { StringFormat = "{0:g}" });
        this.AddBinding("Label4", BindableProperties.TextProperty, new BindingDescription("Date", BindingMode.OneWay) { StringFormat = "{0:F}" });

        this.AddBinding("Slider1", BindableProperties.ValueProperty, "Amount", BindingMode.TwoWay);
        this.AddBinding("DatePicker1", BindableProperties.ValueProperty, "Date", BindingMode.TwoWay);
    }
}

Wrap-up

Navigation and data-binding are just some of the features Crosslight introduced to the mobile development world. It is important to note while all these features are shown platform specific, they work consistently across multiple platforms. The diverse pictures shown in this blog post is to give you an overview about the features described earlier were not platform-specific; they can be applied cross-platform. Some of the Crosslight API outlined in the code snippets are not explained in detail here; they will be covered comprehensively in our product documentation upon release. You might wonder, while these features sound too good to be true, in fact, they really are. These magical features will be available as soon as we hit our 2013 R1 milestone, which is going to be released very soon in early September.

Regards,

Nicholas Lie