XAML Standard

Both Xamarin.Forms and UWP can utilize declarative UI pages with the EXtensible Application Markup Language (XAML). It was initially introduced as part of Windows Presentation Foundation and has been extensively used in .NET applications, starting with .NET 3.0.

While both development platforms offer similar UI elements, they use a slightly different set of controls and layouts, which might cause UI inconsistencies while you are creating cross-platform applications that target iOS/Android (with Xamarin.Forms) and UWP.

Let's take a look at the layout structures:

Similar to layouts are controls. By looking at the controls that are used on these platforms, you can easily spot the subtle differences:

If we were to recreate the MainPage XAML on UWP, the difference between the two platforms would be apparent.

On Xamarin.Forms, we have the following XAML structure:

<StackLayout>
 <Label Text="{Binding Platform, StringFormat='Welcome to {0}!'}"
  HorizontalOptions="Center"
  VerticalOptions="CenterAndExpand" />
</StackLayout>

This would have to be translated to the following (using a new page that we created in the UWP application – MainPageAlternative.xaml):

<StackPanel VerticalAlignment="Center">
 <TextBlock
  HorizontalAlignment="Center"
  VerticalAlignment="Center"
  Text="{Binding Platform,
                 Converter={StaticResource FormatConverter},
                 ConverterParameter='Welcome to {0}!'}" />
</StackPanel>

Notice that StackLayout was translated into StackPanel, while TextBlock was translated into TextBlock. Additionally, the HorizontalOptions and VerticalOptions attributes were changed to the HorizontalAlignment and VerticalAlignment attributes. Another big difference is the fact that the StringFormat property of the Binding markup extension is not supported on UWP. In order to support the string formatting, we would need to create our own value converter.

Now, if we set the DataContext of MainPageAlternative to MainPageViewModel and assign this page as the first navigation page instead of the MainPage that was used to harness Xamarin.Forms, the resulting view would be the same:

rootFrame.Navigate(typeof(MainPageAlternative), e.Arguments);

In order to diminish the subtle differences between the two platforms, a new standardization initiative was introduced that aims to create a XAML standard, which can then be used on multiple development platforms (Xamarin.Forms and UWP). 

Our current control mappings are as follows:

At the moment, in order to use the XAML standard, you can introduce the Xamarin.Forms.Alias preview module for Xamarin.Forms and use the XAML Standard references while creating your views. After this introduction, our MainPage (we created a copy called MainPageAlternative) in the Xamarin.Forms project would look like this:

 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage
  x:Class="FirstXamarinFormsApplication.MainPageAlternative"
  xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:alias="clr-namespace:Xamarin.Forms.Alias;assembly=Xamarin.Forms.Alias"
  xmlns:local="clr-namespace:FirstXamarinFormsApplication">
  <alias:StackPanel>
  <!-- Place new controls here -->
  <alias:TextBlock
  HorizontalOptions="Center"
  Text="{Binding Platform, StringFormat='Welcome to {0}!'}"
  VerticalOptions="CenterAndExpand" />
  </alias:StackPanel>
 </ContentPage> 

Following this initial phase of implementation and alignment, UWP and Xamarin.Forms are expected to continue to converge on both control and attribute levels.