Building Cross – Platform Mobile Native Apps on Android,iOS, Windows Phone & Windows Store using Single Codebase,PCL with VS 2012/2010 & XAMARIN Tools


Cross Platform App development is always better choice for enterprises where we can avail support for Code Sharing, PCL (Portable Class Libraries) which can shared across multiple platforms of Mobility (aka Android, IOS, Windows Phone 8 / 7.x , Windows Store Apps).

Xamarin introduces such facility where a single code base can be shared across all enterprise mobile platforms along with the benefits of coding on .NET Framework 4.5 / 4.0 & Visual Studio 2012 / 2010.

Lets switch to check to build an Android native app on Visual Studio 2012 with C# for latest SDKs 4.2 using Xamarin tools for Android .

Download Xamarin for iOS, Android , Windows Phone & Windows 8 platforms from here

VS2012

Lets check the structure of theAndroid App on VS 2012. All layout files can be found under Resources folder. 

Android

  • Next, we are using a single code base file which contains the Business logic & App models that can be shared as a Link with iOS, Windows Phone & Windows Store apps.
  • Lets check the Android 4.2 app built on Visual Studio 2012 & .NET Framework 4.5 platform using Xamarin Tools.

AppIcon

Phoneword_Android

Call

PhonewordCall

  • Lets check, how to build the same app for Windows Phone 8 or 7.x platform using the same code base along with business logic.
  • Windows Phone 8 project contains the Main.xaml along with the common code base.

string translatedNumber;

private void Translate_Click(object sender, RoutedEventArgs e)
{
if(!String.IsNullOrEmpty(PhoneNumberText.Text))
{

// *** SHARED CODE
translatedNumber = Core.PhonewordTranslator.ToNumber(PhoneNumberText.Text);

CallButton.Content = “Call ” + translatedNumber;
CallButton.IsEnabled = true;
}
else
{
CallButton.Content = “Call”;
CallButton.IsEnabled = false;
}
}

private void Call_Click (object sender, RoutedEventArgs e)
{
var call = new PhoneCallTask();
call.PhoneNumber = translatedNumber;
call.DisplayName = PhoneNumberText.Text;
call.Show();
}

AppPreview_WP8

WP8

Call_WP8CallAction_WP8CaptureWP8

  • The Windows Phone App is compatible along with the Windows Phone 8 as well as 7.x versions.
  • For implementing on Windows Store , without altering business logics & models only the views need to be shared.
  • Lets check the project structure of this app for Windows Store.

PhonewordWin8

PhonewordScreenWin8

  • Asynchronous programming is one of core features related to Windows store, windows phone app developments along with other .net app development. Using PCLs, code sharing approaches too we can take help of simple async methods.
  • Shared code for Windows Store App :

string translatedNumber;
public ObservableCollection<PhonewordTranslation> Translations;

private void Translate_Click(object sender, RoutedEventArgs e)
{
if (!String.IsNullOrEmpty(PhoneNumberText.Text))
{

// *** SHARED CODE
translatedNumber = Core.PhonewordTranslator.ToNumber(PhoneNumberText.Text);

CallText.Text = “Call ” + translatedNumber;
// Win8, add to history list
Translations.Add(new PhonewordTranslation() {Phoneword=PhoneNumberText.Text, Phonenumber=translatedNumber });
}
else
{
CallText.Text = “”;
}
}

private void ListItems_Click(object sender, ItemClickEventArgs e)
{
var ci = e.ClickedItem as PhonewordTranslation;
var dialog = new MessageDialog( String.Format (“{0} translates to {1}”, ci.Phoneword, ci.Phonenumber));
dialog.ShowAsync();
}

AppIcon

  • For IOS development too, the app uses the same shared code -base which targets to iPhone, iPAD & Universal Mac apps which can be built on C#, .NET 4.5 using Visual Studio editor by Xamarin tools for iOS.
  • You can download the entire app over here .

Developing Windows 8 Metro Style Apps Basics with XAML & C# Part-II


In previous articles, I have described how to develop Windows 8 Metro Style apps with GridViews with XAML & C#. Now, it’s also time to add proper ApplicationBars along with Windows 8 Settings Charm in your application to make more OS customized & slater view.

  1. Settings Charm in Windows 8 Metro Style Apps with Win RT Settings Components:
  •  Windows 8 Metro Style Apps has the capability to add Win RT settings & interoperability with Win RT (Windows RunTime Component) Shells.
  • With the help of this we can add customized Windows 8 RT Shell components with Metro app bars .

  • The integration works with the addition of Application Bars which on click produce the interoperability with Core Windows RunTime (Network, Volume, Power etc) components.

2. Snapping in Windows 8 Metro Style Apps:

Snapping in Windows 8 Metro Style apps really enable to get snapped view of your app. Just like Personalized settings panel in Windows 8 Developer Preview environment. Snapping can be also enabled in your Metro Style apps & associate with Win RT components.

  •  After implementing Snapping the app looks like this by pressing Windows + (.) key in preview mode.

  • Snapping can be implemented by adding the following pieces of code in your Windows 8 Metro Style apps in XAML based on C#  .
  • Import the following namespace :

using Windows.UI.ApplicationSettings;

  •  Write the event in MainPage Constructor:

ApplicationLayout.GetForCurrentView().LayoutChanged += new TypedEventHandler<ApplicationLayout,

 ApplicationLayoutChangedEventArgs> (MainPage_LayoutChanged);

  • Add the method body in MainPage.xaml.cs class body:

void MainPage_LayoutChanged(Windows.UI.ViewManagement.ApplicationLayout sender,

Windows.UI.ViewManagement. ApplicationLayoutChangedEventArgs args)

{

switch (args.Layout)

{

case Windows.UI.ViewManagement.ApplicationLayoutState.Filled:

this.Height = 1066;

this.Width = 768;

break;

case Windows.UI.ViewManagement.ApplicationLayoutState.FullScreen:

this.Height = 768;

this.Width = 1366;

break;

case Windows.UI.ViewManagement.ApplicationLayoutState.Snapped:

this.Height = 768;

this.Width = 320;

break;

default:

break;

}

}

Installation of IIS 8 in Windows 8 Developer Preview


Working with IIS 8 in Windows 8 Developer Preview is quite important as it ‘s a pre-requites to work with Windows Azure tools in Windows 8 Developer Preview. Simply switch to Metro preview & select Control Panel & set to More Settings for Desktop -> Select Turn  Windows features On or Off & set Internet Information Services.

  • Set it default & Click OK. Check localhost in IE 10 for IIS 8.