Crosslight 5.0 brings a versatile gauge data visualization featuring a variety of styles and fully customizable appearance and behaviors. A lightweight signature pad component and a much improved Calendar with storyboard support are also featured in this release. In addition, Crosslight for iOS provides full support for iOS 9, enhanced Form Builder, better storyboard support, and stability improvements.
iOS 9 Support
When Apple unveiled the iPhone 6S back in 9th September 2015, Apple also announced the availability of iOS 9, the latest and greatest iOS yet. Sporting many breakthrough and exciting features such as 3D Touch, multitasking for iPad, app thinning and more, creating great user experiences for iOS platforms has never been easier. Building on Xamarin iOS 9 library, Crosslight 5 comes with full support for iOS 9.
Improved Storyboard Support
With Crosslight 5, now you can use UICollectionViewController, UIMasterDetailViewController, and UITabBarController with full storyboard support. With storyboards, you no longer need to specify multiple XIBs for content-based views. Simply use one storyboard for your entire iOS projects and adapt to various screen sizes and orientations using full Auto Layout support.
Form Builder Improvements for iOS
Prior to Crosslight 5, when you use the ImageView editor with Form Builder, it can only be contained inside a section that has its layout specified to ImageWithFields. Now you can use ImageView independently regardless of its container's section layout. Furthermore, UIFormViewController now supports forms placed inside a UITabBarController, and automatically taking account universal design support implied by ViewController classes starting in iOS 9.
Crosslight 5 includes the most advanced, beautifully-designed gauge data visualization components for iOS. Perfect for mobile dashboards, Gauge View sports two variants: UIGaugeView and UICircularGaugeView. The circular gauge variant presents a simple circular value suitable for modern interface design. Both gauge views provide a vast array of appearance settings that you can customize with simple property sets.
Key features include:
- Intuitive API with data binding support, all settings configurable from ViewModel.
- Axis position, supports inner and outer mode.
- Major and minor tick visibility, customizable interval and text visibility.
- Customizable axis tick and axis tick text margin.
- Axis region, supports three fill mode, Solid, Radial and Blend. Axis region length can be customized as well.
- Support invert value.
- Customizable start and end text, and start degree.
- Customizable arrow shape/path.
- Support storyboard, works on both iPhone and iPad with automatic rotation.
For more information, see iOS Gauge View.
UISignaturePadView is a versatile signature pad control with sleek and minimal design perfect for capturing signing in iOS apps.
Key features include:
- Modern design, customizable caption and decorator appearance.
- Fully customizable appearance, including the sign thickness and color.
- Easily capture result as byte image through ImageSource property binding.
- Include Form Builder widget extension, allowing signature pad to be used in Form Builder.
- Support storyboard, works on both iPhone and iPad with automatic rotation.
For more information, see iOS Signature Pad.
Calendar View 2.0
Crosslight 5 ships with UICalendar control which has been completely revamped with the latest Crosslight iOS control framework. As the result, the calendar control now fully supports storyboard which works on both iPhone and iPad with automatic rotation support. With storyboard support, the calendar control can now be simply defined in the interface definition and bound to the ViewModel through binding provider, no runtime code is required for instantiation.
For more information, see iOS Calendar View.
New Transparency Transition API for NavigationController
With Crosslight 5, now you can take advantage of the new modern transparency transition API for UINavigationControllers. Take a look at the video.
Notice how the NavigationController's status bar is fully transparent while performing navigation. Typically, achieving this effect is very hard, as common implementations require reengineering of the NavigationControllers, which may lead to a loss of native user experiences, such as the left-edge swipe gesture to return to previous screen. This new API retains the originality and native functionalities of the UINavigationController, while still achieving the transparency effect elegantly.
The following example shows how to use the new transition API in the the target ViewController.
Crosslight 4.0 release marks an important milestone for iOS development specifically the addition for universal storyboards and Xamarin iOS designer support. In addition, this release adds a highly sophisticated data visualization library and dozens of amazing UI components that will surely elevate your iOS app to the next level. That's not all – this release also includes over hundreds of new features and improvements across existing components that will significantly shorten your development time.
Universal Storyboard Support
Introduced in iOS 8, along with the introduction of iPhone 6 and iPhone 6 Plus featuring different screen size, the universal storyboards allow you to create adaptive UI and layout that are optimized for every device size within a single storyboard. With more device size coming in the future, storyboards will be the definitive way to build adaptive iOS interface.
Crosslight 4 has been significantly improved to fully support iOS storyboards, specifically, enabling Crosslight navigation framework to automatically locate the views defined in the storyboard. As the result, you may continue using the same existing Crosslight navigation API you already familiar with, while allowing you to target a view within a storyboard.
For more information, see Working with iOS Universal Storyboards.
Streamlined Crosslight Development with Xamarin iOS Designer
Crosslight 4 simplifies the way you build universal iOS apps through the storyboard support. More importantly, it is also the first in industry to support rich development experience in Xamarin iOS Designer. You can now discover Crosslight UI components in the Toolbox, then simply drag and drop them to the designer surface. The commonly customizable settings are now exposed to the Property Window as well, allowing you to conveniently modify the control's settings with just simple point and click.
For more information, see Introduction to iOS Apps Development.
Crosslight 4 includes a highly sophisticated, enterprise-class charting library engineered with a blend of great architecture and beautiful pixel-perfect design. Featuring over 20 chart types and customizable color themes, Chart View lets you quickly visualize your data in stunning charts with elegant startup animation – each customized to suit the nature of the chart type.
In addition to the fully customizable appearance, Chart View also includes a host of useful enterprise features such as chart zooming and panning supporting X, Y, and both axis, as well as data annotations and custom grid lines. And the best of all, it's super easy to get started with Chart View, thanks to the built-in data binding support, you can simply setup the chart source in the ViewModel and bind it to the chart view control.
For more information, see iOS Chart View.
In this release, Crosslight introduced an all-new gorgeous UI component that lets you easily design amazing iOS apps with modern user interface. Introducing Dialog Presenter, you can now present a custom dialog and receive additional input from users. It lets you present a custom view content that may contain additional input controls and more sophisticated UI logic bound to a ViewModel. Similar to the other presenter variants, you can easily consume dialog presenter right from the ViewModel. In addition, Dialog Presenter provides several built-in presentation styles designed with modern and adaptive layout in mind, which makes dialog presenter more appealing compared to the modal navigation.
For more information, see iOS Dialog Presenter.
Vibrant Rounded Button
Introducing the new vibrant rounded button, you can now facelift your iOS apps with modern and beautiful buttons featuring hairline-thin stroke and vibrancy effect. Crafted with pixel-perfect rendering, the gorgeous button control provides various predefined button styles and content styles that suit your design preferences. More importantly, the button control is engineered with compliance to iOS gesture tracking standard defined in the human interface guidelines, including ability to track touch down inside or out, as well as touch up inside or out.
For more information, see iOS Rounded Button.
In this release, Crosslight introduces a new search controller that is modeled upon iOS 8's universal presentation design pattern. Instead of embedding the search bar within table view, you can now display a search controller from anywhere in your app. The most common pattern is the promotion of the search button in the navigation bar which is adopted by many popular apps such as Photos, Calendar, YouTube, Twitter and many more. The search controller supports modal navigation, which smoothly animates the search bar from the top. Best of all, it provides built-in data binding support, enabling you to reuse existing ViewModel without code changes.
For more information, see iOS Search Controller.
Segmented Bar Controller
Every new Crosslight release introduce new design patterns allowing you to quickly build modern and professional-looking apps. In this release, you can now build advanced apps that use segmented bar as the navigation interaction. Seamlessly integrated to the Crosslight navigation framework, segmented bar controller lets you easily display multiple list of data, or a list of data with different filters. Built for flexibility in mind, you can present a combination of data list and custom content, for instances, Top Charts in one bar, and Reviews in another.
For more information, see iOS Segmented Bar Controller.
In its fourth generation, Crosslight is more mature than ever, enabling you to create a wide range of business apps rapidly through the introduction of many new UI components. This small yet super handy component, Cell Label, enables you to create a floating label in table view which is perfect for number indicator or highlight. Unlike the standard label, Cell Label maintains its styles and background color when the table cell is selected. This built-in feature eliminates the need to write hundreds line-of-code typically needed in manual subclassing approach. You can just add the label control in the cell template through Xcode designer – it's that simple.
For more information, see iOS Cell Label.
With the new barcode scanner service in Crosslight 4, you can now add support for scanning 50+ barcode types in your iOS apps. Featuring camera flash and fast automated scanning, you can consume the barcode scanner functionality directly from within the ViewModel, as well as capturing the output in the shared UI logic.
For more information, see Working with Barcode Reader Service.
Supercharged Table View
As one of the most essential components in iOS development, the Crosslight Table View component continues to receive new features and significant improvements in this release. With the simplicity of property sets, you can now customize most table view appearance settings such as the background color, cell background color, separator color, and many more. In Crosslight 4, you can now add blur and vibrancy visual effects to the cell and separator – all with just one property set away. No more tedious class subclassing which typically requires large amount of code just to achieve such effect.
In addition, Table View has now supported navigation to detail disclosure indicator which can be bound to the Command property. For more information, see iOS Table View.
Improved Drawer Navigation
Two new stunning animations have been added to the Drawer Navigation component, including the most demanded sliding parallax and scale animation. Rotations and gestures have been automatically handled for you, so all you need to do is simply setting a property to enable the animation.
For more information, see iOS Drawer Navigation.
Crosslight 3.0 release adds hundreds of significant new features to the iOS platform which are strongly focused on user interface components and support for the latest technologies available in iOS 8.
Full iOS 8 Support
Crosslight 3 release adds full support for iOS 8 which includes both new iOS 8 specific features and compatibility with Xamarin.iOS 8 framework. In addition, this release also adds several improvements to the overall stability related to the changes in iOS 8. For instances, modal navigation in master-detail scenario now works in iOS 8, while the message input view component is now enhanced to support iOS 8's custom keyboards and auto-suggest bar.
For more information, see iOS 8 Support.
In this release, Crosslight adds full data binding support for UIMapView component which lets you easily work with annotations right from the ViewModel. Leveraging the MVVM pattern, the UIMapView binding lets you write your UI logic in a single codebase. This opens up a whole new level of possibility not available before.For instance, you can now load customer address information from a REST service asynchronously, then simply assign the results to a collection property in the ViewModel. The UIMapView binding does the rest and automatically updates the view's annotations instantaneously. It's that simple. And best of all, the exact code in the ViewModel also applies to the map view in other platforms.
The UIMapView binding includes a vast array of mapping features that you can program from the ViewModel such as getting routes information, changing selected route, and finding directions by driving or walk In addition, you can also customize the annotation marker with a custom image as well as easily adding navigation interaction to your mapping apps.
To learn how to provide annotation items in ViewModel and bind it to UIMapView, see iOS Map View.
Carousel View lets you add image slider capability to your Crosslight iOS app in just a few lines of code, thanks to the built-in MVVM and data binding support. More than just an image slider, Carousel View lets you show virtually any kind of items, including your own custom view. For instance, you can display the content of a mail message and lets users quickly swipe to navigate to the previous or next item.
More importantly, Carousel View is blazing fast, thanks to its high-performance virtualization architecture. It lets you bind any number of items without worrying any performance or resources constraints. In addition, there are numerous features that you can enable with simple property sets, such as enabling slide show and customizing the page indicator colors.
For more information, see iOS Carousel View.
Message Input View
Message Input View is an innovative component that is specifically designed to comply with iOS human interface and user experiences guidelines. It provides a multitude of time-saving features that address the difficulties and challenges in iOS development. With Message Input View, you can quickly add a single input component that is attached atop of the keyboard. It beautifully animates along when the keyboard is shown or hidden, in addition to smooth rotation support.
You will find this component useful in many scenarios, such as providing a quick input for comment, reply, or add a new task. You can customize several options such as setting the watermark, adding a left button, changing the right button's caption, and much more.
For more information, see iOS Message Input View.
Calendar Month View
Calendar Month View is perfect to show a simple month calendar with subtle event information. It supports basic month navigation and allows you to customize a number of appearance settings. You can easily bind a list of events to the calendar view, thanks to the built-in data binding and MVVM support.
For more information, see iOS Calendar View.
Resizable TextView Cell
If you are looking to build Reminder style app, then the new Resizable TextView Cell component will make your day. It transforms your static table view into an in-line editable table instantly. Built with data binding support, changes made to the TextView will automatically reflect to the bound model.
Some of the key features include automatic height resize as users type into the text view, ultra-smooth animation during editing and resizing, automatic text view dismissal, and rotation support. Best of all, it also includes a bonus feature that lets you add a detail disclosure during editing – similar to Reminder app.
For more information, see iOS Resizable Table Cell.
New Radio Button Editor for Form Builder
With the new radio button editor, you can now easily provide a list of options for user to choose – all in a single screen. In addition, the radio button editor automatically deselect the other options and reflect the value in the model. This lets you quickly capture the chosen input value that bound one-to-one with the model without dealing with tedious workarounds.
To learn more, see Using Radio Button Editor in Form Builder.
New List View Editor for Form Builder
Form Builder is one of the most powerful features in Crosslight which allows you to build rich data form with simple metadata. Introducing the new List View editor, Crosslight 3 takes Form Builder to the next level by allowing you to present multiple list items in a single form. Similar to the features available in iOS Table View, the List View supports a number of common interactions such as single selection, multiple selection, and navigation. Best of all, it supports two-way collection binding which means the List View will be automatically sync'ed as the collection is modified in the ViewModel.
The List View editor supports a large number of potential line-of-business scenarios. For instance, in addition to general user information, you can now display list of available roles, branches, and other list – along with their selection state.
To learn more, see Using List View Editor in Form Builder.
Custom Cell Actions with Swipe Gesture
Since iOS 7, Apple introduces a new user interface feature called custom cell action which is activated through swipe gesture. It lets users easily swipe a cell to reveal the actions contextual to the item. This particular feature can be seen in the Mail app.
Crosslight 3 now lets you add custom cell actions in just a few line of code. You can customize the background color of each action, and easily handle the selected action in the ViewModel. Designed with MVVM and command design pattern, the table view routes the action information to the command bound in ViewModel. This enables you to streamline all UI logic in the ViewModel, and instantly reuse it for other platforms.
For more information, see Enable Custom Cell Actions with Swipe Gesture.
Translucent Visual Effect in Modal Navigation
By popular demand, Crosslight 3 includes the support to show translucent visual effect when performing navigation, particularly designed for modal navigation mode. You can enable translucency with just a simple property set on supported Crosslight's view controllers. It supports three kind of translucency – light, extra light, and dark.
It's noteworthy to mention that the visual effect is not a static image rendering, but a live translucent visual effect. This means that changes to the view beneath the modal view will be reflected in real time.
To learn how to add translucency effect to your apps, see Enable Translucency Visual Effect in Modal Navigation.
Section Customization in Table View
In addition to cell customization, Crosslight also adds support for section header and footer customization in a table view. All you have to do is providing a custom XIB and specify it in the table view, Crosslight takes care the rest – including calculating the height for you and doing the other low-level operations behind the scene.
For more information, see Customize Section Header in Table View.
This section aggregates the new features and enhancements included in the updates cycle of Crosslight 2 which spans from version 2.1 to 2.5.
iOS 8 Support 2.5
From this release onward, Crosslight iOS assemblies will be compiled upon Xamarin iOS 8 framework. This lets you build Crosslight apps that target both iOS 7 and iOS 8, although you can no longer use Crosslight iOS with older version of Xamarin due to breaking changes introduced in Xamarin iOS API. If you wish to continue developing with older version of Xamarin, please use Crosslight 2.4 assemblies.
In addition to the compatibility with iOS 8, this release also adds several improvements to the overall stability related to the changes in iOS 8. For instances, modal navigation in master-detail scenario now works in iOS 8, while the message input view component is now enhanced to support iOS 8's custom keyboards and auto-suggest bar. However, we have a lot more to cover for specific iOS 8 features which are planned to ship in the next major version of Crosslight.
Major Improvements to Crosslight iOS 2.4
This release marks a significant milestone for Crosslight iOS components, particularly in the scrolling performance for table view and its core services such as image loader and resource cache services.
Many of the process in table view have now been refactored — complex operations are optimized, unnecessary implementation is removed, and CPU intensive operations are moved to asynchronous threads — to achieve a single objective: ultra-smooth scrolling performance.
To make the table view really smooth, we have also improved numerous services that are frequently consumed such as image loader and cache services. The image loader has been significantly fine-tuned so that none of its process interrupt the main UI thread when requesting and downloading the image from server, thanks to the enhanced image loader which now leverages iOS’s Grand Central Dispatch. At the same time, the cache service has also been optimized, allowing it to fetch a cache from a large cache session in just a fraction of second.
The combination of these various performance tweaks across iOS components and services resulted in an exceptional, ultra-smooth scrolling performance. The following video shows a table view with complex cell and image loader in action. Note that the demo was performed on the iOS simulator. In the actual device, the performance is considerably faster and smoother.
To enjoy these improvements, simply update the Crosslight assemblies with the latest release. There are no additional efforts or code changes required in your apps.
New Time-saving Features in Crosslight iOS
In addition to performance improvement, this new release also makes iOS development much easier by automating frequent tasks that were previously difficult or tedious to achieve.
Automatic Dynamic Cell Height Support 2.4
Implementing dynamic cell height in table view such as those in Twitter and Facebook are considerably difficult and complex which typically require a lot of code. With Crosslight 2.4, you don’t have to write any single line of code, thanks to the built-in AutoLayout support. The performance is also blazing fast, since the improved table view automatically calculate the height off the screen and cache them smartly.
The following illustration shows the table cell design as well as the result.
Automatic Row Height Detection Based on XIB 2.4
In the earlier release, you are required to create a custom table data source in order to use a custom table cell with static height. In this release, you just need to plug-in the XIB as the cell template as you would normally do, Crosslight automatically resolves the height for you at runtime — according to the height you specified in the Interface Designer.
Automatic Aspect Ratio Calculation in Thumbnail 2.4
In the earlier release, you must explicitly specify the width and height of the thumbnail when capturing a photo or choosing a photo from media service. However, in real world apps, you might need to capture thumbnails with a desired width but keep the aspect ratio for the height. Crosslight 2.4 now lets you easily achieve this by simply specifying the thumbnail height to -1. You’re all set.
The following code shows how to capture a photo from the camera service and returns a thumbnail with proportionally-set height.
The result can be seen in the illustration below, which also compares the result if the thumbnail height were set to a fixed value.
Automatic Selection Persistence in Navigation Drawer 2.4
In this release, the navigation drawer component has been improved to support wider range of scenarios. You can now easily show the selected item of the current visible navigation. When users tapped on other navigation item, or if you navigate to a ViewModel through API, the selection in the drawer will be automatically synchronized.
To use this feature, simply add one line of code to the drawer settings in the constructor of your drawer view controller.
In the view controller associated to the left-side navigation, make sure the configuration is appropriately set to support the selection visibility.
The following illustration shows the result of the selection appearance in navigation drawer.
New View Template Definition for iOS 2.3
Creating custom header and footer template in iOS table view is now simpler and easier than ever. In the past, you have to deal with manual object registration in the view controller which require additional code. In this release, the table view introduces HeaderViewTemplate and FooterViewTemplate properties which you can simply override and return the desired template.
Here is the code example to define a header view template in a table view controller.
One of the noteworthy features built into the view template is the smart object and binding discovery. If the view template contains named objects and there are binding definitions for those named objects, the objects will be automatically bound to the data at runtime. As the result, a large number of repetitive code can be now eliminated.
The following illustration overviews how easy it is now to create a view template in iOS, from design to results.
The project item template for custom view is also available in this release, making it easy for you to add new custom views in Visual Studio. For more information about the new item templates, see Using Crosslight Item Templates.
To learn more about Crosslight architecture, MVVM design pattern, and data binding, see Understanding Crosslight Architecture and Fundamentals.
Content navigation support in iOS master detail component 2.2
Crosslight 2 ships with an advanced master detail component that lets you easily shows a list of items in the left panel and the details in the right panel.
Due to popular demand and feedback, the iOS master detail component has been further improved to support content navigation which enables you to display different detail content according to the navigation item. This feature allows you to easily build iPad-like settings interface, or virtually any content you wish to show in the detail.
To test out this feature, download the updated sample collection from our Git server here. The sample for this particular feature can be found in the MyInventory_MasterDetail folder.