Porting a Windows App Studio Universal App to Android Using Xamarin

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: 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.

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. 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. 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. 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! 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.    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!