Xamarin.Forms is cross platform solution to create native apps. Whilst Xamarin allows us to build native apps for each platform (Android, iOS and Windows) with maximum code sharing, Xamarin.Forms goes one step ahead and allows UI code sharing as well. That means, I can create a TabbedPage and it will be rendered natively on each platform as ActionBar, UITabView and Pivot.
Xamarin.Forms allows creating UI in both C# as well as XAML. To keep things simple and less confusing across different platforms, there are new properties, new elements. XAML as a language is still the same. So we get to create objects from XAML, initialize them using InitializeComponent(). Everything is still the same. You just need to know the small differences. For example there is no Margin property, but there is Spacing property <grin>
While you can add a XAML page from XAML project template category, you should add one from Code -> Forms Xaml Page
The first thing to notice here is namespace
And this actually makes the difference. The two lines define the XAML page. First two are for Xamarin.Forms whereas last two are for normal XAML page in Windows app.
When creating User Interface, Xamarin.Forms provides Views (controls in our language) which abstract away the different controls in different platform. So, to create a TextBox on Windows Phone and a button which will be right aligned within StackPanel, following code will do the magic:
As you can see here, rather than StackPanel, StackLayout is used to represent controls positioned in stack (horizontal or vertical) and to avoid confusion with any stack in these platforms. This StackLayout will internally render native Stack of controls on each platform.
Also, in above code, Entry element is used, which is new to us. However, this entry represents a single line text-input control. That is, on Windows Phone it will become a TextBox.
Along with control names, some properties are named differently. For example Margin is now Spacing. We have left 25px space from each side in our code. Padding is still the same. HorizontalAlignment is changed to HorizontalOptions. And possible values for that will be: Start [Left], Center and End [Right], with option to mention Expand which will take-up the space available. It also has FillAndExpand option, which is similar to Stretch mode.
While working with Font, usually we’ve different properties for FontFamily, FontSize, FontWeight etc. In Xamarin.Forms, we get one Font property which accepts multiple values (comma separated), which is parsed at runtime (Type Converters). So, below code can render TextBlock (label) with specified font details:
One thing to notice here is OnPlatform element. This element helps to override certain values (in above code, label renders with different font setting on different platform) for specific platform. There is a Device class with methods to work on platform specific code in XAML or C#.
The data binding concept is still the same as it was in traditional XAML.
The code above mentioned, with details is available at ‘An Introduction to Xamarin.Forms’ i.e.: http://bit.ly/1l1zg06 on Xamarin.com site.
Having said that XAML syntax is still the same. The features like code behind in partial class (with InitializeComponent), Type Converters, Property Element syntax, Attached Property syntax, Content properties, external library declarations (xmlns : somedifferentype=”uri”), adding event handlers, ResourceDictionary, StaticResources, etc… are still the same.
With this, I’m sure Xamarin.Forms will help C# and XAML developers to do Rapid Application Development on multiple platforms.
You can read more here at:
- An Introduction to Xamarin.Forms
- Getting Started with Xamarin.Forms: Basics
- Xamarin.Forms Samples
- XForms Labs (Open Source Project)
Happy Coding & Namaste