0 rating
  • 1
  • 2
  • 3
  • 4
  • 5
Compatible with
  • iOS
  • Windows
  • Android

Crosslight 5.0

Intersoft Solutions Corp.

A powerful cross-platform toolset for building enterprise-class mobile apps for the iOS, Android and Windows platforms – all with a single application codebase

Introduction to Crosslight

This Crosslight component is a fully-featured commercial component with 30 days Crosslight Project Wizard trial. If you're new to Crosslight, check out the Getting Started with Crosslight.

What's New

We're very excited to announce that Crosslight 5 is now available to the public.

In this release, we're bringing full Material Design support for Crosslight. We've also made it super easy for you to include various Material UI elements and interactions such as Floating Action Buttons, Parallax Image, Collapsing Toolbar, Shared Element Transitions, Material Navigation Drawer, and so much more.

In addition, we've also embraced full NuGet support as the main delivery channel for future Crosslight packages and updates.

Check out the full list below.

Crosslight 5 At a Glance

Introducing Crosslight Android Material

Comprehensive Material Components

Material UI Components

Upgrading Your Project to Material Design

Crosslight Core Improvements

Streamlined Crosslight Development with NuGet Packages

New Crosslight.UI Components

Crosslight.iOS Improvements

IDE Improvements

Improve Documentation with New Starter Walkthroughs

New Crosslight Samples

Updated Samples

Updates and fixes in this release

Intersoft Developer Center

Introducing Intersoft Developer Center, a one-stop portal for all your development needs. Featuring comprehensive and detailed documentation, plethora of samples and video tutorials, the Developer Center aims to answer all your questions about Crosslight.

Overview

Leveraging extensible architecture, MVVM design pattern and integration with Xamarin Platforms, Crosslight lets you easily build powerful iOS, Android and Windows native apps with a common application codebase including domain model, data access, and user interaction logic. And that's nearly 96% of your project's codebase. Built with cutting-edge portable framework and MVVM pattern, Crosslight lets you build cross-platform mobile apps by leveraging the programming skills and tools you loved – such as C#, MVVM, .NET and Visual Studio. Key features include:

  • Comprehensive and advanced mobile frameworks leveraging MVVM design pattern
  • Build native iOS, Android, Windows Phone 8 and Windows 8 apps with a single application codebase
  • Elegant, developer-friendly API based on platform standards
  • Universal data management with automatic binding
  • Streamlined navigation services supporting push, modal and nested navigation mode
  • Rich form builder with 20+ pre-built editors
  • Highly customizable editor controls ranging from auto resize textbox to image picker with camera support and more
  • Comprehensive mobile services for business apps
  • Native user experiences conforming to platform design guidelines
  • Support Visual Studio 2012 and Xamarin Studio
  • Integrated to Xamarin platforms with full AOT compliance
  • Time-saving Project Wizard featuring 30+ templates variants supporting iOS, Android, Windows Phone 8 and Windows 8

Important!

If you have purchased a the Crosslight component from the Xamarin Component Store, send us your purchase details to us via live chat for further assistance.

Sample Code

Creating a data form editor in all platforms. When users tapped on the Save button, it will perform data saving, show a toast presenter and navigates back to the previous screen.

Shared Application Project

Powered by Crosslight Foundation, the shared application project contains shareable code that can be easily consumed on each platform. Shareable code includes various user interaction logic, reusable ViewModel classes, domain models, data access layers, and more.

Form Metadata:

The Form Metadata is a part of the form builder feature introduced in Crosslight; just by defining the metadata, you can easily create beautiful-looking forms complete with custom data validation and rich editing features.

    using Intersoft.Crosslight;
    using Intersoft.Crosslight.Forms;
    using MyInventory.ViewModels;
    using System;

    namespace MyInventory.Models
    {
        [FormMetadataType(typeof(Item.FormMetadata))]
        partial class Item
        {
            [Form(Title = "{FormState} Item")]
            public class FormMetadata
            {
                [Section(Style = SectionLayoutStyle.ImageWithFields)]
                public static GeneralSection General;

                [Section("Item Details")]
                public static ItemDetailSection ItemDetail;

                [Section("Item Status")]
                [VisibilityBinding(Path = "IsNewItem", SourceType = BindingSourceType.ViewModel, ConverterType=typeof(BooleanNegateConverter))]
                public static SoldSection Sold;

                [Section]
                public static NotesSection Notes;
            }

            public class GeneralSection
            {
                [Editor(EditorType.Image)]
                [Image(Height = 83, Width = 80, Placeholder = "item_placeholder.png", Frame = "frame.png", FramePadding = 6, FrameShadowHeight = 3)]
                [ImagePicker(ImageResultMode = ImageResultMode.Both, ActivateCommand = "ActivateImagePickerCommand", PickerResultCommand = "FinishImagePickerCommand")]
                public static byte[] ThumbnailImage;

                [StringInput(Placeholder = "Product name")]
                [Layout(Style = LayoutStyle.DetailOnly)]
                public static string Name;

                [StringInput(Placeholder = "Price")]
                [Layout(Style = LayoutStyle.DetailOnly)]
                public static decimal Price;
            }

            public class ItemDetailSection
            {
                ...
            }

            //Define other sections and properties
            public class ActionSection
            {
                ...
            }
        }
    }

View Model

The ViewModel class contains shareable user interaction logic as well as interaction with the model, for instances performing navigation, showing a message presenter, and more. The ViewModel class will be then consumed by native views on each platform.

    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Linq;
    using System.Windows.Input;
    using Intersoft.Crosslight;
    using Intersoft.Crosslight.Forms;
    using Intersoft.Crosslight.Input;
    using Intersoft.Crosslight.ViewModels;
    using MyInventory.Infrastructure;
    using MyInventory.ModelServices;
    using MyInventory.Models;

    namespace MyInventory.ViewModels
    {
        public class ItemEditorViewModel : EditorViewModelBase<Item>
        {
            public ItemEditorViewModel()
            {
               ...
            }

            public override void Navigated(NavigatedParameter parameter)
            {
                base.Navigated(parameter);

                if (parameter.Data != null)
                {
                    this.Item = parameter.Data as Item;
                }
                else
                {
                    this.Item = new Item();
                    this.Item.PurchaseDate = DateTime.Today;
                    this.Item.Quantity = 1;
                    this.Item.Category = this.Categories.ElementAt(0);

                    this.IsNewItem = true;
                    this.Title = "Add New Item";
                }
            }

            protected override void ExecuteSave(object parameter)
            {
                this.Validate();

                if (!this.HasErrors)
                {
                    if (this.IsDirty)
                    {
                        if (this.IsNewItem)
                        {
                            this.ItemRepository.Insert(this.Item);
                        }
                        else
                        {
                            this.ItemRepository.Update(this.Item);
                            this.OnDataChanged(this.Item);
                        }

                        // show quick status
                        this.ToastPresenter.Show("Changes saved", ToastDisplayDuration.Immediate);
                    }

                    this.IsDirty = false;

                     this.ItemRepository.SaveChanges(null, null);

                    this.NavigationService.Close(new NavigationResult(NavigationResultAction.Done));
                }
                else
                {
                    this.ShowErrorMessage();
                }
            }

            ...
        }
    }   

iOS

Consuming the Form Metadata from the view model on iOS:

    using Intersoft.Crosslight.iOS;
    using MyInventory.ViewModels;

    namespace MyInventory.iOS
    {
        public partial class ItemEditViewController : UIFormViewController<ItemEditorViewModel>
        {
        }
    }

Android

Consuming the Form Metadata from the view model on Android:

    using Android.App;
    using MyInventory.ViewModels;
    using Intersoft.Crosslight.Android;

    namespace MyInventory.Android
    {
        [Activity(Label = "Edit Item", Icon = "@drawable/icon")]
        public class ItemEditActivity : FormActivity<ItemEditorViewModel>
        {
        }
    }

Windows Phone

Consuming the Form Metadata from the view model on Windows Phone:

The page:

    <Intersoft:PhoneFormPage
        x:Class="MyInventory.WinPhone.Views.ItemEditPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Intersoft="clr-namespace:Intersoft.Crosslight.WinPhone;assembly=Intersoft.Crosslight.WinPhone"
        SupportedOrientations="PortraitOrLandscape" Orientation="Portrait">

        <Intersoft:PhoneFormPage.HeaderTemplate>
            <DataTemplate>
                <StackPanel Margin="4,17,0,28">
                    <TextBlock Text="CROSSLIGHT APP" Style="{StaticResource PhoneTextNormalStyle}"/>
                </StackPanel>
            </DataTemplate>
        </Intersoft:PhoneFormPage.HeaderTemplate>
    </Intersoft:PhoneFormPage>

The code-behind:

    using Intersoft.Crosslight;
    using MyInventory.ViewModels;

    namespace MyInventory.WinPhone.Views
    {
        [ViewModelType(typeof(ItemEditorViewModel))]
        public partial class ItemEditPage
        {
            public ItemEditPage()
            {
                InitializeComponent();
            }
        }
    }

Learn More

© Intersoft Solutions Corporation. All rights reserved.

Release Notes

Full release notes can be found here.

Be the first to write a review