And now, it’s time again! Last week I\u00a0attended to DevSum 2016, and I\u00a0got totally hooked by\u00a0Xamarin! Time to build a cross-plattform version, running on iOS and Android!<\/p>\n
After 3-4 days of coding with Xamarin on my Mac, my first reactions are:<\/p>\n
- \n
- Xamarin studio is surprisingly \u00a0complete, and supports pretty much everything you need!<\/li>\n
- Creating UI in XAML is really nice! I’ve missed it since i dropped Silverlight.<\/li>\n
- 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.<\/li>\n
- The built-in dependency injection adds to that!<\/li>\n<\/ul>\n
NautiCalc in Xamarin<\/h2>\n
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.<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<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\">\r\n\t<TabbedPage.Children>\r\n\t\t<me:NavigatePage \/>\r\n\t\t<me:WeatherPage \/>\r\n\t\t<me:CalculatePage \/>\r\n\t\t<me:AboutPage \/>\r\n\t<\/TabbedPage.Children>\r\n<\/TabbedPage><\/pre>\n
The TabbedPage render native navigation menus for each plattform. IT works with Windows as well, but who cares about Windows phones?<\/p>\n
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,<\/p>\n
![\"AndroidAboutScreen\"](\"http:\/\/jonika.nu\/JonasBlogg\/wp-content\/uploads\/2016\/06\/AndroidAboutScreen.png\")
<\/a><\/p>\n![\"iOSAboutScreen\"](\"http:\/\/jonika.nu\/JonasBlogg\/wp-content\/uploads\/2016\/06\/iOSAboutScreen.png\")
<\/a><\/p>\nThe 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:<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<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\">\r\n\t<ContentPage.Padding>\r\n\t\t<OnPlatform x:TypeArguments=\"Thickness\">\r\n\t\t\t<OnPlatform.iOS>\r\n\t\t\t\t15,120,5,0\r\n\t\t\t<\/OnPlatform.iOS>\r\n\t\t\t<OnPlatform.Android>\r\n\t\t\t\t15,100,5,0\r\n\t\t\t<\/OnPlatform.Android>\r\n\t\t<\/OnPlatform>\r\n\t<\/ContentPage.Padding>\r\n\t<StackLayout>\r\n\t\t<StackLayout Padding=\"15,0,15,0\">\r\n\t\t\t<Image Source=\"Nauticalc_72.png\" \/>\r\n\t\t\t<Label FontSize=\"24\" Margin=\"0,25,0,25\" FontAttributes=\"Bold\" Text=\"NautiCalc\" HorizontalOptions=\"Center\" VerticalOptions=\"Center\" \/>\r\n\t\t\t<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\" \/>\r\n\t\t<\/StackLayout>\r\n\t\t<StackLayout Padding=\"15,50,15,0\" Orientation=\"Horizontal\">\r\n\t\t\t<Label Text=\"Twitter:\" VerticalOptions=\"Center\" \/>\r\n\t\t\t<Label Text=\"@jonlin76\" TextColor=\"Blue\" x:Name=\"JonikaTwitter\" VerticalOptions=\"Center\" HorizontalOptions=\"EndAndExpand\" \/>\r\n\t\t<\/StackLayout>\r\n\t\t<StackLayout Padding=\"15,0,15,0\" Orientation=\"Horizontal\">\r\n\t\t\t<Label Text=\"E-mail:\" VerticalOptions=\"Center\" \/>\r\n\t\t\t<Label Text=\"jonas@jonika.nu\" TextColor=\"Blue\" x:Name=\"JonikaMail\" VerticalOptions=\"Center\" HorizontalOptions=\"EndAndExpand\" \/>\r\n\t\t<\/StackLayout>\r\n\t\t<StackLayout Padding=\"15,0,15,0\" Orientation=\"Horizontal\">\r\n\t\t\t<Label Text=\"Blogg:\" VerticalOptions=\"Center\" \/>\r\n\t\t\t<Label Text=\"http:\/\/jonika.nu\/JonasBlogg\/\" x:Name=\"JonikaBlogg\" TextColor=\"Blue\" VerticalOptions=\"Center\" HorizontalOptions=\"EndAndExpand\" \/>\r\n\t\t<\/StackLayout>\r\n\t<\/StackLayout>\r\n<\/ContentPage><\/pre>\n
And, off course, there’s a small code behind as well. We need to add a GestureRecognizer to enable click on the hyperlinks:<\/p>\n
\t\tpublic AboutPage ()\r\n\t\t{\r\n\t\t\tInitializeComponent ();\r\n\r\n\t\t\tTapGestureRecognizer tapRec = new TapGestureRecognizer ();\r\n\t\t\ttapRec.Tapped += (object sender, EventArgs e) => {\r\n\t\t\t\tif (sender.Equals (JonikaTwitter))\r\n\t\t\t\t\tDevice.OpenUri (new Uri (\"https:\/\/twitter.com\/jonlin76\"));\r\n\t\t\t\tif (sender.Equals (JonikaMail))\r\n\t\t\t\t\tDevice.OpenUri (new Uri (\"mailto:jonas@jonika.nu\"));\r\n\t\t\t\tif (sender.Equals (JonikaBlogg))\r\n\t\t\t\t\tDevice.OpenUri (new Uri (\"http:\/\/www.jonika.nu\/JonasBlogg\"));\r\n\t\t\t};\r\n\r\n\t\t\tJonikaBlogg.GestureRecognizers.Add (tapRec);\r\n\t\t\tJonikaMail.GestureRecognizers.Add (tapRec);\r\n\t\t\tJonikaTwitter.GestureRecognizers.Add (tapRec);\r\n\t\t}<\/pre>\nMy 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!<\/p>\n
![\"iOSNavigationScreen\"](\"http:\/\/jonika.nu\/JonasBlogg\/wp-content\/uploads\/2016\/06\/iOSNavigationScreen.png\")
<\/a><\/p>\n![\"AndroidNavigationPage\"](\"http:\/\/jonika.nu\/JonasBlogg\/wp-content\/uploads\/2016\/06\/AndroidNavigationPage.png\")
<\/a><\/p>\nCross-plattform have never been easier, and ism deeply impressed by both Xamarin Studio and the framework!<\/p>\n
Time will tell if the app finishes, or maybe i’ll change my mind and rewrites this project before it gets done. Who knows \ud83d\ude42<\/p>\nFollow jonlin76<\/a>\n