Introduction to Xamarin 2.0

Console.WriteLine("Hello, World");

The legendary computer scientist Brian Kernighan wrote a tutorial—distributed internally at Bell Labs in 1972—describing how to make a computer program that displays the words “hello, world” on a computer screen. The canonical “hello, world” application, which was later popularized by its inclusion in Kernighan’s widely-read book The C Programming Language, has gained a measure of immortality in technical literature. The phrase “hello, world” has since appeared in a multitude of other programming books and tutorials, where it is often used to demonstrate the most basic application that can be expressed in any given programming language.

    Table of Contents
  1. Xamarin Studio
  2. Visual Studio
  3. Components
  4. Starter & Indie Editions
  5. Building an App
  6. Conclusion

Kernighan probably didn’t anticipate the longevity or reach of his “hello, world” application, but time has shown that the words he chose were prescient. In our modern era of pervasive connectivity and ubiquitous mobile computing devices, software developers have an unprecedented opportunity to put compelling interactive experiences and productivity-enhancing tools into the hands of millions of people around the world. Although global software distribution is easier than ever before, fulfilling the dream of reaching every screen remains elusive. In an increasingly fragmented and heterogeneous mobile landscape, supporting every major mobile platform is still a costly and time-consuming pursuit for software developers.

Xamarin launched in 2011 with a bold idea: empowering developers to share code across mobile operating systems without sacrificing quality or performance. The company challenged traditional assumptions about application portability by introducing a new approach to cross-platform development—one that makes it possible to create beautiful user experiences that reach every platform. Xamarin enables developers to create applications for iOS and Android with C# and the .NET libraries. On each platform, the developer can use the full spectrum of native APIs and user interface controls that are made available by the underlying operating system and hardware.

For the last nine months, Xamarin has been singularly focused on building a new-generation of products that greatly advance the company’s vision of enabling cross-platform development without compromises. Xamarin 2.0, which was officially released to the world on February 2013, introduced a series of impressive new features that simplify and accelerate mobile application development: a powerful new IDE called Xamarin Studio, support for building iOS applications in Microsoft’s Visual Studio, and a Component Store that makes it easy for developers to incorporate third-party libraries and frameworks into their own applications. In this hands-on walkthrough, you will get a detailed overview of Xamarin 2.0.

Xamarin Studio

When building mobile applications, writing code is only one part of the process. A powerful IDE will always have great text editing features, but it must also simplify other facets of development—including project management, user interface design, debugging, testing, compilation, packaging, and deployment. As you would expect of a modern IDE, Xamarin Studio is designed to support projects throughout the entire development cycle—from creation to publication.

It combines a strong foundation of general-purpose C# programming capabilities, specialized mobile development features, and tightly-integrated support for Xamarin’s frameworks and build toolchain. The result is an IDE tailored for building apps with Xamarin, offering a great combination of power, extensibility, performance, and ease of use. It is lighter and faster than general purpose IDEs such as Eclipse and Visual Studio, but it still offers more power and flexibility than stack-specific IDEs such as Xcode.

Xamarin Studio is largely based on MonoDevelop—an IDE that was originally created to support .NET development with Mono on the Linux desktop. MonoDevelop was built with Gtk+, the popular user interface development toolkit that is used by the GNOME desktop environment. Due to its close alignment with GNOME, MonoDevelop’s look and feel have historically left much to be desired on other platforms.

Xamarin Studio abandons MonoDevelop’s legacy design language in favor of a more modern approach. Instead of MonoDevelop’s detachable toolbars  full of indecipherable icons, for example, Xamarin Studio has a sparser and more functional set of carefully-chosen controls that are relevant in day-to-day use. Similar changes are apparent throughout the user interface—the layout is tight and functional, with as little distraction and unnecessary cruft as possible.

Although Xamarin Studio still makes extensive use of Gtk+ for cross-platform compatibility, it offers a modern look and feel. The overall design is crafted for platform neutrality, so that it doesn’t look as gratuitously out of place on Windows and Mac OS X. It is also much smarter about conforming with underlying platform conventions—using native dialogs where practical and supporting features like elastic scrolling on Mac OS X.

Using Xamarin Studio

When a user launches Xamarin Studio, the first thing they see is the welcome page. It makes excellent use of the application’s empty state, exposing convenient access to a number of useful IDE features and Internet resources. The left-hand column displays recent solutions, allowing the user to easily activate one or create a new project. The middle column displays excerpts of the latest news stories from the official Xamarin blog. The right-hand column provides quick access to pre-built Xamarin applications. The latter are fully-functional sample projects that developers can use as a starting point for building their own software.

At the top of the new start screen, there is a toolbar with links to useful resources on the Xamarin website, including the developer center, support site, and community forums. It also displays the identity of the active Xamarin user, providing convenient access to basic account management features. The user can log into the IDE with their Xamarin single sign-on account, which is used for a range of features—particularly the Component Store.

Xamarin Studio’s approach to project management is modeled after that of Microsoft’s Visual Studio—the user creates a top-level “solution” that can contain any number of nested projects. The IDE includes templates for creating various kinds of projects, including  Android, iOS, and Mac applications.

The contents and structure of the project will differ depending on the platform. Certain kinds of projects have standard folders with special behaviors. Android projects, for example, will have the standard Assets, Properties, and Resources folders. The contents of the Resources folder in an Android project are automatically made accessible in source code, just as you would expect.

When creating a cross-platform application, a user can choose to have a single solution that contains separate projects for each supported platform—or they could just as easily choose to maintain platform-specific variant in a separate solution. Xamarin Studio’s solution format is compatible with that of Visual Studio, enabling users who have Xamarin’s Visual Studio add-ins installed to switch seamlessly between the two development environments.

Xamarin Studio displays the contents of the current solution in the Solution Pad, the frame that is anchored to the left-hand side of the window. Pads behave somewhat like their equivalent panels in Visual Studio—they can be torn out of place and moved or collapsed into the bars on the left and right edges of the IDE.

All of the user’s open files are displayed in a tabbed pane at the center of the IDE. Xamarin Studio’s built-in code editor supports syntax highlighting, autocompletion, refactoring, and snippets. It also offers a number of advanced features, such as folding, that can be enabled through the preference dialog.

As the user types, Xamarin Studio displays an autocompletion popup that suggests text for potential inclusion. A color-coded icon to the left of every autocompletion entry shows whether it is a method, property, or event. A separate yellow callout that hovers next to the autocompletion popup displays type information and documentation pertaining to the highlighted completion suggestion.

The autocompletion system can perform fuzzy matching on capital letters, a behavior that is extremely useful when dealing with typical PascalCase C# APIs. For example, the autocompletion system will suggest the “WriteLine” method when the user types “WL” after “Console.” This behavior can save a great deal of time—a developer rarely has to type more than two or three letters to find a desired method name.

When the user is writing a method call, the IDE will display a tooltip with the method signature so that the user can see the number of parameters and the type of each one. In cases where an overloaded method has multiple possible signatures, the user can hit the up and down arrow keys to navigate between them.

In addition to useful editing features, Xamarin Studio also has a number of capabilities that simplify code navigation, making it easier to move around files and projects. The Document Outline pad on the right-hand side of the window contains a tree that displays all of the classes in the active document, along with all of their methods, properties, and events. You can click items in the outline to quickly navigate to a particular part of the file.

A breadcrumb bar above the document editing pane provides similar functionality—it displays the user’s current position in the file as a segmented path. The first element of the path is the class that the user is currently editing. The second element of the path is the method or property.

Clicking any path element in the breadcrumb bar will display a drop-down menu with sibling elements. It works a little bit like the file path bar in the Windows file manager—you can click one of the items in the drop-down menu to navigate to a different part of the code file. The Document Outline pad and breadcrumb bar are great for moving around inside of a very long file. As you will see later in this article, Xamarin Studio offers other mechanisms that similarly simplify moving between files within a solution.

User interface design

User interface design is an important part of mobile application development. Although some developers like to create their user interface layouts in code, many prefer to use visual design tools that allow them to build a user interface interactively. For users who favor visual design, Xamarin Studio offers a number of compelling tools.

The IDE has its own built-in design surface for building Android user interfaces. It is significantly better and more functional than the equivalent Eclipse-based tool that Google includes in the official Android SDK. Xamarin Studio displays its Android interface editor when the user opens an “axml” file from an Android project.

The layout of the Android activity is displayed in the center of the window. On the right-hand side, the Toolbox pad displays a selection of user interface controls that the user can add to the layout. Immediately beneath the toolbox is the Properties pane, which displays all of the adjustable properties of the selected user interface control. The Document Outline pad will display the form layout hierarchy as a tree, listing all of the controls.

To add a widget to the layout, simply drag and drop it from the toolbox. After you add a control, such as a button, you can select it by clicking it in the layout view or the document outline. After selecting a button, you can adjust its ID and text string in the Properties pad. You can use the blue circles and grey arrows that appear next to the control boundaries on the design surface to adjust its size and resizing behavior.

When designing an Android user interface, the ability to manually tweak the generated XML code is often helpful. To do that in Xamarin Studio, you can simply click the “Source” tab that appears at the bottom of the design surface. On the source tab, you will get access to the generated XML and will be able to modify it in place. Any changes that you make will be reflected when you switch back to the interactive Content view.

The toolbar above the design surface provides access to a number of useful features. The user can, for example, use the toolbar drop-down menus see what the layout will look like at various screen sizes and in different orientations. It also supports displaying the layout with different languages, different versions of the Android operating system, and different Android visual themes.

Instead of providing its own built-in designer for iOS user interfaces, Xamarin Studio integrates with Apple’s Xcode IDE. When the user opens a XIB or Storyboard file from a Xamarin.iOS project in Xamarin Studio, it will automatically launch in Xcode. Xamarin Studio generates an Xcode stub project with the relevant Objective-C header files so that the user can take advantage of Xcode’s split view to create outlets and actions.

When the user saves changes to the stub project in Xcode, Xamarin Studio will synchronize the updates back into the associated Xamarin.iOS project. Outlets and actions created in Xcode are exposed through special “.designer.cs” files that are generated by Xamarin Studio. The generated files make it possible for the application developer to use controls that are defined in a XIB or Storyboard in their application code.

Debugging

Xamarin Studio includes a built-in debugger with advanced capabilities. The developer can set a breakpoint on a line of code by clicking within the code editor margin. When the program runs in debug mode, it will pause at the breakpoints—allowing the developer to step through execution. Pads that appear at the bottom of the window during debugging provide a way to set watch expressions, view the hierarchy of local values, see the call stack, and track the status of threads.

When the user starts debugging an application, the step control buttons—continue, step over, step into, and step out—will appear in the IDE’s main toolbar. The step buttons are hidden during development and only show during debugging—one of the many ways in which Xamarin Studio uses context-based feature exposure to minimize clutter.

One of the most impressive things about Xamarin Studio’s built-in debugging tools is that they work across the full spectrum of supported platforms and environments. You can, for example, perform interactive debugging on an application that is running in the Android emulator, the iOS simulator, or even on hardware. The ability to debug an application that is running on a device is extremely useful in many scenarios, particularly when you are working with hardware features such as a GPS or gyroscope.

A special pad called the Immediate window provides a prompt where the developer can interactively input statements that will be evaluated in the current context of execution during debugging. It’s a little bit like the top-level “read, eval, print, loop” (REPL) shells that are offered by popular scripting languages, offering more flexibility than simple watch expressions.

The Locals pad, which shows all of the variables in the local execution context, makes it really easy for users to change particular primitive values during execution. You can simply double-click the value column for the desired variable and type the new value that you want to assign. Objects in the Locals pad are displayed as tree items—they can be expanded to provide access to the underlying properties.

Property values are also accessible in the code view itself. If the user hovers over any variable or property during execution, Xamarin Studio will display a floating callout that contains the value. Clicking a pin icon in the callout will anchor it into the code view, displaying it alongside the line of code.

Several advanced breakpoint features are available in the Breakpoint Properties dialog, which can be accessed by right-clicking a breakpoint and selecting the relevant item from the context menu. A developer can, for example, configure a breakpoint so that it will only be active when the value of an arbitrary conditional expression evaluates to true. It’s also possible to set a hit counter, configuring a breakpoint so that it will only break execution after it has been reached a specified number of times during execution.

Search and other Improvements

There are a number of specific areas where Xamarin Studio’s user interface has been greatly refined, offering some particularly compelling improvements. Xamarin Studio tracks the user’s navigation through a project—when the user switches between tabs or jumps between parts of their code by using features like Go to Declaration and the document outline tree, each step is added to the navigation history stack. On the left-hand side of the Xamarin Studio tab bar, there are back and forward arrows that can be used to step through navigation history. This feature makes it fast and easy to move around the various parts of a project.

Another great addition to the tab bar is the tab drop-down menu, the button on the right-hand side that is adorned with a down-facing arrow. The tabs in the tab bar will shrink as you open more files, eventually resulting in tabs that are difficult to read (due to truncated titles) when many files are open at once. The drop-down menu solves that problem: when pressed, it will show you a full list of every open tab. When an item is selected from the list, the associated tab is made active.

Xamarin Studio includes an extremely powerful search system, which is easily accessible through a simple text box in the main toolbar. When the user performs a search, the IDE will display a list of code symbols, files, and commands that match the query. The inclusion of code symbols makes the built-in search an especially powerful navigation tool—the user can jump to a specific class or method simply by typing part of its name in the search box and selecting it from the result list.

The search box is such a swift and effective way to move around projects that some users might find they no longer need to rely on clicking files in the Solution pad. While using Xamarin Studio, I often collapse the Solution Pad and navigate between files and classes solely from the keyboard. In addition to supporting navigation, the search box also exposes a large number of commands, allowing the user to perform virtually any operation that can be performed from the Xamarin Studio menus.

Visual Studio

For many software developers on the Windows platform, Visual Studio is practically synonymous with C# programming. Developers who have spent much of their professional lives in Microsoft’s popular IDE are loathe to leave—they are at their happiest and most productive when they can use the tools they know and love. Xamarin enables developers to build iOS and Android applications in Visual Studio, with full support for all of the standard features of the environment. Developers who are accustomed to Visual Studio can use Xamarin without having to sacrifice years of accumulated shortcut muscle memory and favorite features.

Xamarin has offered support for developing Android applications in Visual Studio since the original launch of Mono for Android in 2011. A built-in design surface, providing drag-and-drop Android user interface design capabilities, was later added in 2012. Long-awaited  support for Xamarin.iOS development in Visual Studio was introduced in the new Xamarin 2.0 release, enabling Xamarin users to build iOS applications from the comfort of the Windows desktop.  It’s finally possible to build an app for  iOS, Android, and Windows—all from one solution, one programming language, and one IDE.

Enabling iOS development from Windows and Visual Studio poses a number of technical challenges. Unlike Google, which provides a fully-featured SDK for building Android applications on Windows, Apple will only allow developers to build iOS applications on Mac OS X. The SDK is tied to the Mac operating system and the terms of use under which the SDK is distributed explicitly forbid users from taking a Mac out of the equation.

In order to support iOS development in Visual Studio in a manner that is practical, reliable, and in full conformance with the SDK terms of use, Xamarin developed software that allows Visual Studio to offload the build process for compiling iOS applications to a Mac on the local network. When properly configured, the user can write and build iOS apps, deploy them to hardware, and perform on-device debugging entirely from Visual Studio.

Xamarin’s network build system is very easy to configure and enable. The build service, which runs in the background on a Mac, comes bundled with the Xamarin.iOS installer for OS X. It uses the Bonjour network discovery protocol to make its presence known to the local network. Xamarin’s Visual Studio extension on Windows will use Bonjour to find all of the available Mac build servers on the network. It displays them in a list, allowing the user to select the one that they want to use.

A simple diagnostic tool that is accessible from the network build server configuration dialog shows the process that Xamarin’s Visual Studio extension uses to connect to a build server and determine if that build server is suitable for use. As you can see in the screenshot below, the process is relatively straightforward.

When the user builds their iOS application in Visual Studio, Xamarin.iOS will automatically send the project’s code over to the Mac for compilation. When the user runs or debugs their application in Visual Studio, the application will actually execute on the Mac. The user can still take full advantage of Visual Studio’s powerful step debugging tools—although execution takes place on the Mac, Xamarin.iOS facilitates all of the necessary communication between the Visual Studio debugger and the Xamarin.iOS headless debugging system on the local network.

Some iOS development workflows are more effective when the developer can use Windows and Mac OS X at the same time. Developers who want to build their iOS user interfaces with a graphical design tool, for example, will want to use Xcode on Mac OS X to interactively manipulate a XIB or Storyboard file. Similarly, the iOS simulator—which is commonly used to run and test iOS applications on a desktop computer—doesn’t run natively on Windows. The simulator can be launched from Visual Studio, but it will run on the connected Mac OS X environment.

Xamarin.iOS for Visual Studio comes with several simplified iOS application templates that eschew XIB and Storyboard files, giving developers the option of building their entire user interface in code.  That approach could be desirable for some developers on Windows who want to avoid Xcode and minimize their reliance on a Mac. Xamarin’s MonoTouch.Dialog library— which provides a simple, declarative API for building iOS user interface layouts in code—might prove especially useful for that particular audience.

Developers who still want to use XIB or Storyboard files can still use Xcode on Mac OS X in order to modify the layout. Fortunately, the high degree of interoperability between Xamarin Studio and Visual Studio makes that a relatively straightforward process. A developer can do most of their development with Visual Studio on Windows and jump over to Xamarin Studio on a Mac while working on user interface design. The same exact project and solution files can be used in both environments.

There are several different strategies that users can adopt to minimize the friction of switching between the two platforms. One of the most effective ways to do iOS development in Visual Studio is to run Windows in virtualized environment on a Mac. Using virtualization gives the user the best of both worlds, allowing them to use the full functionality of the iOS SDK and the full power of Visual Studio on the same computer. A developer could similarly use a Mac and a PC side by side—either using a screen sharing technology like VNC or by having a separate monitor on each one and using something like Synergy to share the keyboard and mouse.

It’s worth noting that the Xamarin’s support for building Android applications in Visual Studio is presently more comprehensive than the equivalent iOS functionality. Xamarin enables full, end-to-end Android application development in Visual Studio—including interactive user interface design, using the same Android layout design surface that can be found in Xamarin Studio. As Xamarin continues to improve its support for iOS development in Visual Studio, it will eventually reach the same degree of refinement as the existing Android support.

Xamarin Studio is an increasingly competitive choice, offering a compelling set of features and a consistent development experience across platforms—it’s tailored to be the best environment for building Xamarin applications. But committed Visual Studio devotees, and developers who work in enterprise environments where Visual Studio is the standard, will benefit greatly from Xamarin’s commitment to supporting cross-platform mobile development in Microsoft’s IDE.  For a developer who is new to Xamarin and has minimal prior experience with Visual Studio, Xamarin Studio is likely the better choice.

Components

Software development is greatly accelerated by the broad availability of third-party libraries, frameworks, and controls. Programmers can focus on writing application-specific logic while relying on third-party code to supply significant amounts of general-purpose functionality and architectural plumbing. Popular libraries are typically well-tested and robust, allowing developers to benefit from the high degree of refinement that goes into such code.

Between portable .NET libraries and platform-specific libraries with C# bindings, Xamarin application developers have access to an extraordinarily rich ecosystem of third-party code. The libraries available for use in Xamarin applications give developers access to features like social network integration, custom user interface controls, charting and graphing, analytics, data storage, and drawing. There are also commercial development tool and framework vendors, such as Pixate, that offer their own C# bindings so that their products can be used in Xamarin applications.

And there are a growing number of libraries that provide universal C# abstraction layers over platform-specific capabilities. Some examples include PushSharp—a cross-platform library for push notification—and Xamarin’s own Xamarin.Mobile library—which provides cross-platform support for features like geolocation and the system address book.

These libraries offer a lot of value, but they aren’t always easy to discover and use. You can find many open source libraries on GitHub and other similar code hosting services. Individual commercial vendors make their bindings and frameworks available from their own websites. Even though there are many libraries that work well with Xamarin right out of the box, it can be frustrating to try to find the right one and then figure out how to integrate it properly with your Xamarin project.

In order to address the inherent challenges of third-party library discovery and adoption, Xamarin 2.0 introduces Components. As the name suggests, a component is a reusable piece of third-party code that is packaged for easy inclusion in Xamarin projects. Xamarin’s new Component Store provides a searchable catalog of free and paid components that are all designed for drop-in use in Xamarin apps. The store is built right into Xamarin Studio and Xamarin’s Visual Studio extensions, making it possible for developers to find, use, and manage components for their project without even having to leave their IDE.

As the number of available components grows, the Component Store has the potential to be a real game-changer for many kinds of application development. Consider the breadth of functionality that is supplied by Perl’s CPAN archive, for example, and imagine how a similar repository of application frameworks and libraries could enrich the Xamarin ecosystem.

By making it significantly easier to find and adopt useful libraries, the Component Store opens the door for developers to piece together fully-functional applications from preexisting building blocks. If an application requires complex features like bar-code scanning or a sophisticated user interface control like a signature pad, developers can simply install the desired components and then focus on wiring them together with their own application-specific glue code.

The Component Store is modeled after app stores and popular digital content distribution services. Components are submitted by third-party developers, but Xamarin hosts the service and curates the contents—ensuring that every component made available through the store will work properly in a Xamarin application.

Developers can search the store and look at the profile pages of various components to see what features they offer, what platforms they support, and how much they cost. The component profile pages in the store also provide other useful information, including code examples, video demos, and links to reference documentation. A built-in rating and review system makes it easy for developers to see feedback shared by other developers.

In cases where there are three or four different libraries that support the same functionality, the store ensures that developers have enough information to make an informed choice and pick the right one for their project.

Introducing the Component Store

The Xamarin iOS and Android project templates include a special Components folder that hosts the components that the user has added to their project. The user can add new components to their project through the Component Store interface integrated into the IDE. It’s also possible to visit the Component Store website in a web browser and download components for manual inclusion in a project.

Xamarin Studio includes a component manager that is activated when the user selects a project’s Components folder in the Solution pad. The component manager displays components that are used in the project and provides access to the Component Store. It also shows a list of additional components that have been used in other projects on the same computer, allowing the user to add them to the current project with a single click.

When launched from the IDE, the Component Store appears in a floating dialog window. The main view is a list of components, shown with details like the name, author, rating, description supported platforms, category, and cost. To the left of the list, there is a pane with a search box and filtering tools. The filters allow the user to search and browse available components by category and platform.

When the user clicks an item in the list, the store will display the profile page of the selected component. When a user clicks the “Add to Project” button that appears on a component’s profile page, the IDE will automatically download the component and install it into the Components folder of the associated project.

The individual components that are used in a project will appear as nested items under the Components folder in the Solution pad. Each Component is displayed in the Solution pad as a single row in the project tree. Double-clicking an item in the Components folder will open a new tab that displays information about the component—a simple code snippet that demonstrates usage, sample projects that include the component, and a list of the assemblies provided by the component.

On the filesystem, the contents of the components are stored inside the project’s Components folder. Each individual component has its own subfolder containing documentation, code samples, DLLs, metadata, and licensing information. The contents of a component folder are organized in a standard layout understood by Xamarin Studio. The IDE exposes the content of the component through the component manager and component property tabs, providing a very simple and intuitive user interface for interacting with components.

The user can typically treat a component as a black box, a discrete unit of functionality that they simply drop into their project. Any included assemblies are added automatically to the project’s list of references. The process of adding a component to a project is extremely simple and totally painless, reducing the overall complexity of integrating third-party libraries into a project.

The user’s Component purchases, ratings, and reviews are associated with their Xamarin account—the same single sign-on identity that they use on the Xamarin website. Xamarin Studio has a built-in authentication system that allows the user to sign in with their Xamarin account. The user can sign in either from the IDE start page or the component manager.

Some of the components are cross-platform libraries that will work in any kind of C# project. Others, however, are platform-specific libraries or user interface controls that are only supported on a particular operating system. When searching for a component, it’s helpful to pay close attention to the icons that indicate which platforms are supported by a component. You can use the iOS, Android, and Windows tags to filter the contents of the store, telling it to show you only the components that are compatible with the platforms you have specified.

The built-in review system makes it easy to see other members of the Xamarin community think about a given component. When viewing a component’s profile page, the reviews can be found at the very bottom. Each review can include comments from the user and a star rating on a scale between one and five. The real name and gravatar image of the reviewer are displayed alongside their review. Each component’s average star rating is displayed in the component list when the user is browsing or searching the available components.

Using a component

While writing this article, I used the Component Store to add third-party libraries and user interface controls to several projects. Later in the article, I will show how I used a particular third-party control to improve the user interface of a simple Xamarin.iOS application. Components are typically very easy to adopt—they all come with a Getting Started guide that includes a code snippet demonstrating basic usage.

In some cases, the Getting Started guide  will also have links to more comprehensive documentation that is available on the web. Some components even come with a complete set of offline API reference documentation. When such documentation is available, an Open API Documentation button appears in the top right corner of the component details view. Clicking the button will display the component’s API reference documentation in the Mono Documentation Browser.

Many of the components in the Component Store are available for free, meaning that developers can use them at no cost. Free components are marked as such, but the user can click the License button on a component’s profile page to see the specific terms that govern redistribution. For example, the Flyout Navigation component that I will discuss later in the article is distributed under the highly permissive Apache license.

As the name implies, the Component Store is also a storefront for selling commercial components. The store sells several excellent third-party frameworks and controls that are compatible with Xamarin. Some commercial frameworks that are already available for purchase from the Component Store include SQLCipher, Pixate, and TeeChart.

Xamarin is working with partners to increase the lineup of available components, but there are already some really compelling items in the Component Store that can be used today. There are user interface controls like a graphing view and Path-inspired satellite menu, cross-platform libraries for handling authentication and social network sharing, and C# bindings for popular third-party SDKs from companies like Facebook and Parse.

Developers who want to submit their own components simply need to package their code and associated resources in accordance with Xamarin’s published guidelines, using the xpkg tool. A proper component package should include a description and introductory guide written in Markdown and icons in two different sizes. Including documentation and samples is also advisable. When the package is built, it can be submitted by visiting the Xamarin Component Store website and filling out the relevant form.

Starter & Indie Edition

Xamarin’s popularity has seen significant growth over the past year, with many new developers discovering the value of Xamarin’s sophisticated approach to cross-platform enablement. Xamarin is being adopted across the entire spectrum of the mobile development landscape—from lone hobbyists selling their software in app stores to entire teams of corporate software engineers building internal applications for enterprise deployment.

Alongside this growth in popularity, Xamarin has witnessed a tremendous increase in demand for additional pricing options—particularly at the entry level. In response to overwhelming demand, Xamarin has introduced a free “Starter Edition” that allows developers to build Xamarin applications that can be deployed to devices and distributed in app stores. Applications built with the Starter Edition are subject to a few limitations–most notably, they can’t call to third party native libraries (i.e., P/Invoke) and they are capped in size at a max of 32k of IL code. The starter edition is ideal for new developers who want to get started with their first application. It’s also a great choice for hobbyists and independent developers who want to use Xamarin without making a major financial commitment.

Xamarin wants to make its products accessible to the widest possible audience. The chief goal of the new Starter Edition to greatly expand the Xamarin community by lowering the barrier to entry for new adopters. Growing the Xamarin ecosystem in this fashion benefits all stakeholders, including paying customers. A larger audience means more Xamarin users participating in forums, creating components, contributing to open source libraries, and becoming available for hire.

The Starter Edition will also be extremely useful for prospective customers who want to use it as a tool for evaluating Xamarin. It fills in some of the gaps in Xamarin’s previous free trial, which allowed users to build fully functional apps, but restricted them from running those apps on hardware or distributing them in app stores. With the Starter Edition, potential Xamarin customers can now test their applications on real hardware before they buy a Xamarin license.

For hobbyist and individual developers, Xamarin has introduced Indie Edition—the lowest-cost product Xamarin has ever offered, at $299. This product is licensed for use by developers who want to build app store apps or games, and includes Xamarin Studio and the ability to create apps of any size. Commercial or free apps can be built with the Indie license.

Creating an app with Xamarin

In the weeks leading up to the Xamarin 2.0 release, I used Xamarin to build several mobile applications. In this article, I’m going to show you a very simple reddit client that I built with Xamarin.iOS. Much of the application’s user interface was created with Xamarin’s MonoTouch.Dialog framework, which provides a simple, declarative set of C# APIs for building native forms and lists. Using MonoTouch.Dialog helped reduce the complexity of the application and spared me from having to visually create the layouts in Xcode.

using System;
using System.Linq;
using System.Net;
using System.Collections.Generic;

using MonoTouch.Foundation;
using MonoTouch.UIKit;
using MonoTouch.Dialog;

using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using FlyoutNavigation;


namespace RedditTest2
{
    public class RedditController : FlyoutNavigationController
    {
        DialogViewController controller;

        string[] Subs = {
            "funny", "aww", "wtf", "gaming", "politics",
            "programming", "technology", "worldnews"
        };

        string SelectedSub {
            get { return Subs[SelectedIndex]; }
        }

        public RedditController() : base()
        {
            RootElement contentRoot = new RootElement ("Reddit");
            controller = new DialogViewController (contentRoot) {
                Style = UITableViewStyle.Plain
            };

            var navController = new UINavigationController ();
            navController.PushViewController (controller, false);


            ViewControllers = Enumerable.Repeat (navController, Subs.Length).ToArray ();
            NavigationRoot = new RootElement ("Navigation") {
                new Section ("Subreddits") {
                    from sub in Subs select new StyledStringElement (sub) {
                        TextColor = UIColor.White,
                        BackgroundColor = UIColor.FromRGB (40, 40, 40),
                    } as Element
                }
            };

            NavigationTableView.BackgroundColor = UIColor.FromRGB (40, 40, 40);
            NavigationTableView.SeparatorColor = UIColor.FromRGB (30, 30, 30);

            controller.RefreshRequested += (sender, e) => Load ();
            controller.NavigationItem.LeftBarButtonItem = new UIBarButtonItem (
                UIImage.FromBundle("Images/menu.png"),
                UIBarButtonItemStyle.Bordered, (sender, e) => ToggleMenu());

            SelectedIndexChanged = Load;
            ToggleMenu ();
        }

        void Load () {
            Load (SelectedSub);
        }

        void Load (string subname)
        {
            var client = new WebClient ();
            client.DownloadStringCompleted += (sender, ev) => {
                try {
                    var content = ParseJson(ev.Result);
                    InvokeOnMainThread(() => Update (content));
                }
                catch (Exception e) {
                    Console.WriteLine("Failed to load: {0}", e);
                }
            };

            var uri = String.Format ("http://reddit.com/r/{0}.json", subname);
            client.DownloadStringAsync (new Uri (uri));
        }

        void Update (RootElement content)
        {
            controller.Root = content;
            controller.ReloadComplete();
        }

        RootElement ParseJson(string data)
        {
            return new RootElement(SelectedSub) {
                new Section() {
                    from p in JObject.Parse(data)["data"]["children"]
                    select new HtmlElement((string)p["data"]["title"],
                                           (string)p["data"]["url"]) as Element
                }
            };
        }
    }

    [Register ("AppDelegate")]
    public partial class AppDelegate : UIApplicationDelegate
    {
        UIWindow window;

        public override bool FinishedLaunching (UIApplication app, NSDictionary options)
        {
            window = new UIWindow (UIScreen.MainScreen.Bounds);
            window.RootViewController = new RedditController();
            window.MakeKeyAndVisible ();

            return true;
        }
    }
}

The application, which was built with less than 150 lines of code, displays the latest hot posts from the selected subreddit. When the user taps a post, the destination URL is loaded in an embedded Web view. The post data, which is downloaded from reddit’s API, is obtained in the JSON format and parsed with the popular Json.NET library. The data is downloaded asynchronously so that the operation doesn’t block interaction. The Xamarin Component store made it very easy to add Json.NET to my project.

The application uses a LINQ expression to iterate over the JSON content of the subreddit, generating a MonoTouch.Dialog HtmlElement for each post. The HtmlElement provides a UITableView row that loads a specified URL in a UIWebView when tapped. A UINavigationController ensures that a navigation button for returning to the post list is displayed in the titlebar above the UIWebView.

An earlier version of the application displayed the list of subreddits as a dedicated page. While tweaking the client, I  decided that I wanted to add a left-hand subreddit navigation panel that slides out from under the main view—much like the navigation sidebar in Facebook’s official mobile app. In the Xamarin Component Store, I found the perfect user interface control: a component called Flyout Navigation that provides all of the necessary functionality.

All I had to do to get a Facebook-style navigation slider was add the component to my project, copy some code from the supplied sample, and then adapt the copied code to suit the needs of my application. To learn how to integrate the component into my own application, I referred to the Getting Started tab in the component’s details view. The Getting Started documentation, which is displayed right in Xamarin Studio, includes a simple code snippet and a brief description of how to use the component.

The code snippet in the Getting Started guide for the Flyout Navigation component offers a fairly straightforward example of how to set up the navigation list and define its contents with MonoTouch.Dialog. As instructed by the guide, I copied the relevant code into my project. When I ran the application in the iOS simulator, the sliding navigation was present and worked as expected. I was able to drag the top view to the right to expose the navigation menu.

To get the full effect of the Facebook-style navigation user interface, I wanted to add a menu button to the application titlebar that forces the top view to slide to the right when pressed. To achieve that, all I had to do was add an extra UIBarButtonItem that calls the ToggleMenu method on the navigation control. I made my own icon for the button—a PNG image with three white lines.

In cases where it’s helpful to see how a component is used in an actual project, the user can simply refer to the Samples tab in the component details view. The Flyout Navigation component comes with a single iOS sample that helpfully demonstrates real-world usage. It had the code that I needed to create the menu button in the titlebar and wire it up to the navigation component—I was able to copy and paste that code from the sample, saving me the trouble of having to write it myself.

My reddit client is a very simple example that demonstrates some basic elements of iOS application development with Xamarin. It loads data from a remote API and presents it to the user in a reasonably intuitive interface that has a number of advanced features, including the navigation sidebar and pull-to-refresh. There are obviously many areas where it could be further enhanced, but it’s a surprisingly capable application considering the small amount of code that was required to get it up and running.

Conclusion

Since launching in 2011, Xamarin has attracted a community of over 230,000 developers and has been used to build a wide range of applications. Some major adopters include Microsoft, VMware, Rdio, Cisco, Accenture, and Intuit. From best-selling app store titles to internal enterprise software, Xamarin is helping programmers across the entire spectrum build better apps, reach more platforms, and work more productively.

Xamarin offers a compelling blend of powerful and expressive programming, a rich third-party library ecosystem, convenient cross-platform portability, native performance and user interface controls, and full access to the underlying platform APIs. Those characteristics makes Xamarin a great choice for modern mobile developers who want to build competitive applications that reach every platform. Building on that solid foundation, the improvements in Xamarin 2.0 make app development even faster, easier, and more enjoyable.

Developers can download Xamarin 2.0 today and discover for themselves how Xamarin’s cross-platform mobile development tools can help them to achieve their mobile ambitions. For more details, visit the Xamarin website.

Written by Ryan Paul, Xamarin Evangelist