Porting a Windows App Studio Universal App to Android Using Xamarin

By June 17, 2014Android

Microsoft’s App Studio is a fantastic tool to help you design and generate applications for Windows Phone as well as Universal Apps for both the phone and Windows. The online interface allows you to add content like RSS feeds, Facebook pages, Flicker photos and more with a few clicks, generating a complete Visual Studio solution that can immediately be launched on the phone or desktop.

Today we’ll look at how we can enhance the App Studio solution’s Portable Class Library so that we can use Xamarin to add an Android version of the app.

Creating the Solution with App Studio

I want to keep things as simple as possible, so for this example, I’m using the “Empty App” template, adding a single feed from our Falafel Blogs. Here’s a quick look at the project page on App Studio:

Windows-App-Studio-To-Xamarin-Project-Page

That’s pretty much all I need so I generated the project and opened it up in Visual Studio, launching in the Phone Emulator to preview. Here are some screenshots. Note that the details is read by launching the browser.

Windows-App-Studio-To-Xamarin-Windows-Phone  Windows-App-Studio-To-Xamarin-Windows-Phone-Details  Windows-App-Studio-To-Xamarin-Windows-Phone-Slide-Navigation  Windows-App-Studio-To-Xamarin-Windows-Phone-Browser

Retargeting the PCL for Xamarin

The Universal project includes a Data project which contains the classes for accessing data which we will want to share to the Xamarin Android project. Although this is a Portable Class Library, it’s only targeted to Windows and Windows Phone 8.1. A quick change to the project properties will take care of that.

Windows-App-Studio-To-Xamarin-Retarget-PCL

Next, we need to remove the Windows-specific classes that are incompatible with Xamarin, such as the TileServices used to update the app tiles. This was easily done by moving the AppStorage and TileServices folders out of the PCL and into the Shared project so they are still accessible by the Windows and Phone projects.

Windows-App-Studio-To-Xamarin-Move-Windows-Classes

Because these are no longer in the PCL, you also need to remove any references to them to be able to build. In this simple example that refers to the error logging provided by the AppLogs class. Simply comment out any lines that reference this, usually in the catch of an exception, and easily found by building the project and observing the errors.

Finally, there is an additional library being referenced by both the PCL and Windows Projects named AppStudio.Common.dll. Unfortunately, by targeting the PCL to include Xamarin and Android, this library is no longer compatible with the PCL and you’ll get the error:

The primary reference “AppStudio.Common” could not be resolved because it was built against the “.NETPortable,Version=v4.6,Profile=Profile32” framework. This is a higher version than the currently targeted framework “.NETPortable,Version=v4.5,Profile=Profile111”.

Fortunately, the only items being used from this library (at least for my simple example) are the BindableBase, BindableSchemaBase, and IDataSource. So I recreated these files in the PCL directly, removing the AppStudio.Common reference entirely from both the PCL and Windows projects.

Here’s the code for the BindableBase:

namespace AppStudio.Data
{
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices; 

public abstract class BindableBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged; 

protected BindableBase()
{
}
 

public virtual void Initialize(IDictionary<string, string> parameters)
{
}
 

protected void OnPropertyChanged(string propertyName = null)
{
PropertyChangedEventHandler propertyChanged = this.PropertyChanged;
if (propertyChanged != null)
{
try
{
propertyChanged(
this, new PropertyChangedEventArgs(propertyName));
}
catch
{
}
}
}
 

protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
{
if (object.Equals((T)storage, value))
{
return false;
}
storage = value;
this.OnPropertyChanged(propertyName);
return true;
}
}
}

Here is BindableSchemaBase:

namespace AppStudio.Data
{
using System;
using System.Runtime.CompilerServices;
using System.Text;

public abstract class BindableSchemaBase : BindableBase
{
public BindableSchemaBase()
{
this.Id = Guid.NewGuid().ToString();
}

public abstract string GetValue(string propertyName);
public virtual string GetValues(params string[] propertyNames)
{
StringBuilder builder = new StringBuilder();
foreach (string str in propertyNames)
{
builder.AppendLine((
this.GetValue(str) ?? string.Empty).ToString());
}
return builder.ToString();
}

public abstract string DefaultContent { get; }

public abstract string DefaultImageUrl { get; }

public abstract string DefaultSummary { get; }

public abstract string DefaultTitle { get; }

public string Id { get; set; }
}
}

And finally IDataSource:

namespace AppStudio.Data
{
using System.Collections.Generic;
using System.Threading.Tasks;

public interface IDataSource<T> where T : BindableSchemaBase
{
Task<IEnumerable<T>> LoadData();
Task<IEnumerable<T>> Refresh();
}
}

It would be great if App Studio could address this, and I found this thread on opening up to other platforms which I’ll be voting for along with links to this article. Feel free to chime in your support as well!

Adding the Android Project

At this point your solution should be able to build, and we can proceed to add the Android Xamarin project. Obviously you need to have Xamarin installed, and for more information on getting started be sure to take a look at their Getting Started With Android Guide.

Add a new Android project to the solution. One important thing I discovered is that if the name of your app ends with “.Android” you will have problems resolving references from the Android component libraries in Xamarin.

I initially named the project AppStudio.Android and had this problem, and some more info is available in this Xamarin Forums thread. However, it was easily resolved by instead naming the project AppStudio.Droid.

Windows-App-Studio-To-Xamarin-Android-Project

Next, I created the Android Activities and Layouts needed to make a simple UI to complement the other versions. If there is interest I’ll happily review this in a deep dive post, but the source code of the project is available below if you want to see the Android project for yourself.

If you’d like a more detailed followup post on the Android project itself, please feel free to sound off in the comments!

Windows-App-Studio-To-Xamarin-Android-Project-Files

Note that in addition to adding the PCL project reference, I needed to add the Android Support Library Components so I can use the ActivityFragments to navigate the master/detail relationship between the blog list and posts.

It should also be mentioned that in the interest of simplicity I am loading the blog posts twice, once for the list and again for the details (to swipe back and forth). Obviously in a real-world scenario you’d want to optimize this so that you can reuse the list across the different views. Error handling and other code was also excluded, but for simplicity this was a quick and dirty way to get started.

Finally I also should mention that I specifically targeted the Android version to API 15 (4.0.3) as this is the version running on my test device (T-Mobile G2X!).

But with all the files in place the project is ready to build and run. Below are the corresponding screenshots to the Windows Phone images above. Note that here we are also launching the platform-specific browser to read the full post just like before, only this time by tapping the title.

Windows-App-Studio-To-Xamarin-Android Windows-App-Studio-To-Xamarin-Android-Details Windows-App-Studio-To-Xamarin-Android-Slide-Navigation  Windows-App-Studio-To-Xamarin-Android-Browser

And just like that, we now have an Android version of the App Studio app, thanks to Xamarin!

Conclusions and Considerations

I kept things simple here, using the minimal amount of code from the AppStudio.Data project to make it easy to port to Android. Obviously the more components and datasources your App Studio project uses, the more complex it might be to port everything over.

However, we have seen that Xamarin can be a true cross-platform solution, reusing C# code developed exclusively for use by Windows and with only some minor changes and a new UI, expand its reach to an entirely new platform!

Download the source code and try it for yourself: AppStudioUniversalToXamarin.zip.

There are many avenues to explore, including converting this project to use the new Xamarin.Forms now available with Xamarin 3, as well as porting a Windows Phone 8.0 Silverlight App Studio project, both of which we’ll visit in a future post.

In the meantime I hope this was helpful!

The following two tabs change content below.
  • I have one question in my mind, Could android apps save windows phone?

  • Nicolas Ramirez

    Hi Josh, very good post. I’m trying to port an app studio windows app but changed from the post, there will upgrade any post that suits the new version?

    • funny you should mention this I just happen to be looking at that this very week! if all goes well i hope to update with a new post some time this month. stay tuned, will reply again here if I make enough progress for a post, thanks for reading! -JM

  • Hello, how do I change the targets? I’m new to Visual Studio and can’t find the menu anywhere. Please help! 🙁

    • the targets can be found by right-clicking your project and selecting “Properties”. you’ll see a section in the “Library” tab called “Targeting” with a button labeled “Change” that will allow you to specify which platforms you want your library to target. I hope this is helpful! -JM

      • Stefan Rech

        Sorry.. obviously I am to stupid to follow up.. Just downloaded the solution from appstudio, and opened it in visual studio 2015 community edition and now can’t find the target settings for Xamarin.. There is also no library section where I can select it.. Just followed your steps and there is simply nothing.

    • I’ve got it now 🙂

  • Leopold Butters Stoch

    This is a great write up. I just made a Windows 10 universal app and posted it to the store. I would like to port it to Android. How does this process change with a Windows 10 app made from Windows App Studio Beta. Or do you know of another tool that will recompile it? I am new to Visual Studio 2015 myself. Thank for your time and effort and keep up the great blog. I am glad I found it!

  • Flavio Rausa

    Is there any news for this project? Is there any better solution?