.NET | Jonas Lindau's blog

Am I the only one why keeps rewriting the same code, over and over again, while learning new languages or plattforms?

For me, it’s mainly because i hate to run Hello world examples or create meaningless projects. Because of that, my hobby project NautiCalc (you can find i web version right here) has been rewritten in PHP, Objective-C, Java, Javascript on plattforms like iOS, Android, Web and OS X.

And now, it’s time again! Last week I attended to DevSum 2016, and I got totally hooked by Xamarin! Time to build a cross-plattform version, running on iOS and Android!

After 3-4 days of coding with Xamarin on my Mac, my first reactions are:

Xamarin studio is surprisingly complete, and supports pretty much everything you need!
Creating UI in XAML is really nice! I’ve missed it since i dropped Silverlight.
Xamarin.Forms is really nice and makes it easy to write cross-plattform apps. The best thing is that it maps to native components for each plattform.
The built-in dependency injection adds to that!

NautiCalc in Xamarin

So, my main screen is built up by a TabbedPage built with XAML. In this page all i do is adding my namespace, so i can reference separate pages for each tab, instead of have one huge XAML file.

<?xml version="1.0" encoding="UTF-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:me="clr-namespace:NautiCalc;assembly=NautiCalc" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="NautiCalc.TabbedMainPage">
	<TabbedPage.Children>
		<me:NavigatePage />
		<me:WeatherPage />
		<me:CalculatePage />
		<me:AboutPage />
	</TabbedPage.Children>
</TabbedPage>

The TabbedPage render native navigation menus for each plattform. IT works with Windows as well, but who cares about Windows phones?

Below you can see the about page on Android and iOS, where the navigation is created by the XAML in my TabbedPage. The Android version lacks graphics at this moment,

The XAML for the about page above is also the same on both plattforms. There’s only one thing thats different on each plattform, and that is the margins:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage Icon="Nauticalc_24.png" Title="AboutPage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="NautiCalc.AboutPage">
	<ContentPage.Padding>
		<OnPlatform x:TypeArguments="Thickness">
			<OnPlatform.iOS>
				15,120,5,0
			</OnPlatform.iOS>
			<OnPlatform.Android>
				15,100,5,0
			</OnPlatform.Android>
		</OnPlatform>
	</ContentPage.Padding>
	<StackLayout>
		<StackLayout Padding="15,0,15,0">
			<Image Source="Nauticalc_72.png" />
			<Label FontSize="24" Margin="0,25,0,25" FontAttributes="Bold" Text="NautiCalc" HorizontalOptions="Center" VerticalOptions="Center" />
			<Label Font="Small" Text="Helps you navigate at sea. Keeps track at your speed, course and position and helps you calculate how fast you need to go, how far you can reach in a certain time and what distance you cover at a certain speed and time" />
		</StackLayout>
		<StackLayout Padding="15,50,15,0" Orientation="Horizontal">
			<Label Text="Twitter:" VerticalOptions="Center" />
			<Label Text="@jonlin76" TextColor="Blue" x:Name="JonikaTwitter" VerticalOptions="Center" HorizontalOptions="EndAndExpand" />
		</StackLayout>
		<StackLayout Padding="15,0,15,0" Orientation="Horizontal">
			<Label Text="E-mail:" VerticalOptions="Center" />
			<Label Text="jonas@jonika.nu" TextColor="Blue" x:Name="JonikaMail" VerticalOptions="Center" HorizontalOptions="EndAndExpand" />
		</StackLayout>
		<StackLayout Padding="15,0,15,0" Orientation="Horizontal">
			<Label Text="Blogg:" VerticalOptions="Center" />
			<Label Text="http://jonika.nu/JonasBlogg/" x:Name="JonikaBlogg" TextColor="Blue" VerticalOptions="Center" HorizontalOptions="EndAndExpand" />
		</StackLayout>
	</StackLayout>
</ContentPage>

And, off course, there’s a small code behind as well. We need to add a GestureRecognizer to enable click on the hyperlinks:

		public AboutPage ()
		{
			InitializeComponent ();

			TapGestureRecognizer tapRec = new TapGestureRecognizer ();
			tapRec.Tapped += (object sender, EventArgs e) => {
				if (sender.Equals (JonikaTwitter))
					Device.OpenUri (new Uri ("https://twitter.com/jonlin76"));
				if (sender.Equals (JonikaMail))
					Device.OpenUri (new Uri ("mailto:jonas@jonika.nu"));
				if (sender.Equals (JonikaBlogg))
					Device.OpenUri (new Uri ("http://www.jonika.nu/JonasBlogg"));
			};

			JonikaBlogg.GestureRecognizers.Add (tapRec);
			JonikaMail.GestureRecognizers.Add (tapRec);
			JonikaTwitter.GestureRecognizers.Add (tapRec);
		}

My NavigationPage (the main screen in the app) uses Xamarin.Forms.Maps. This package has to be installed from NuGet, and it also requires some initiation and for Android som configuration like API key. When that is done, map component renders Apple Maps on iOS, Google Maps on Android and Bing Maps on Windows. All with the same code!