Since the first release of the .NET Framework in 2002, developers have been building large-scale apps with client-server architectures. These apps frequently adopt a layered approach, with business logic to solve diverse and complex problems, accessed via desktop or web front-ends.
Today, C# and .NET are available across a diverse set of platforms in addition to Windows, including Android and iOS with Xamarin, but also wearables like Apple Watch and Android Wear, consumer electronics via Samsung Tizen, and even HoloLens.
In this blog post, I’ll show how to port business logic from WPF and build a phone- and tablet-friendly mobile app for Android, iOS, and UWP. Existing C# code can often be re-used with minimal changes, and the user interfaces can be built using Xamarin.Forms XAML to run across platforms.
Porting a Desktop app with a Mobile Mindset
Mobile apps, unlike desktop or server apps, run on limited resources and have the least user attention span. Although this post focuses mainly on porting the existing code, you should also consider changes to the app architecture or user interface to work better on phones and tablets. A good place to start is our mobile development principles.
WPF-to-mobile Example
Almost any .NET codebase, including Windows Forms, WPF, ASP.NET, and Silverlight, has sharable code that can be ported to Xamarin.iOS, Xamarin.Android and UWP projects. By moving the shared code that is platform agnostic to a .NET Standard Library (or a Shared Project) you can easily reference them in mobile projects.
For this example, I am mobilizing an Expenses sample written a few years ago for a cloud-enabled WPF app demo. The functionality works great on mobile, as you can see here:
The original Expenses app is a thick client written for desktop in WPF. The app helps users manage their charges, create expense reports, and allows submitting for manager approvals. It connects to a WCF backend and SQL Server for data storage, and looks like this:
The following sections detail how the legacy app code was analyzed, re-used, and adapted for mobile deployment. You can download the original code and new mobile solution from my GitHub repo.
Analyze code for Mobilization
In general, any non-platform dependent code i.e. your Business Layer, Data Layer, Data Access Layer, Service Access Layer, etc. can be shared across all platforms. To help you identify what code is sharable, use the .NET Portability Analyzer tool. The .NET Portability Analyzer provides you with a detailed report on how portable your program is across .NET platforms by analyzing assemblies. The Portability Analyzer is offered as a Visual Studio Extension and as a console app. Once you install this extension, be sure to check the platforms that you want to analyze in the settings and then right click on the project you want to analyze and click “Analyze Project Portability”
It will generate a report like the one below from the Expenses WPF app.
The above shown consolidated report has the analysis of two libraries – Expenses.WPF and Expenses.Data. From the report, apparently, Expenses.Data (data layer) is 100% shareable across all platforms and as expected Expenses.WPF is about 80% shareable. These reports are available on my GitHub repo – please refer the detailed sheet within the workbook to understand the libraries that aren’t shareable.
Porting WCF backend to Azure Mobile Apps
I could retain the WCF backend as-is and host it in the cloud for mobile apps to access. However, I decided to port this to Azure Mobile Apps to take advantage of offline sync support that is an essential feature in creating excellent mobile user experiences. In a mobile world, devices are always moving, connectivity varies, and network outages happen. Apps need to be intelligent by falling back on locally stored data and transferring the data on demand when a better network connection is established with the server. Luckily, Azure Mobile Apps provides a simple API for developers through its SDK to support both online and offline scenarios for data storage, including automatically syncing data between a device and server.
The project MyExpenses.MobileAppService has controllers that inherit from TableController that provides a RESTful endpoint and nicely abstracts away the code that supports offline data sync.
If you’re new to Azure Mobile Apps, these docs will help you get started quickly. However, if you wish to retain the WCF service as-is on Azure, watch this video on Channel 9.
Porting the WPF client app to Xamarin.Forms
Xamarin.Forms is a cross-platform UI toolkit that helps you create native user interfaces that can be shared across iOS, Android, and Universal Windows Platform apps. Since the UI is rendered using the native controls of the target platform, Xamarin.Forms retains the appropriate look and feel on every platform. Just like in WPF, UI in Xamarin.Forms are created either in XAML or in C# code entirely. However, it is best to take advantage of its DataBinding support and embrace MVVM (Model-View-ViewModel) pattern. An important point to be noted here is that the controls used in WPF are different from the ones in Xamarin.Forms. Although similar controls are available, often they are named differently to suit the mobile user interface guidelines, and hence the WPF XAML cannot be reused in Xamarin.Forms projects. Read our documentation on WPF vs. Xamarin.Forms: Similarities & Differences.
The interesting thing about porting this WPF app is that 100% of the ViewModels, Helpers, Converters, Models, Services, and any code that does not have platform-specific reference can be reused in the Xamarin.Forms app. Hence even the entire UI logic (ViewModels) is retained, and only the UI (XAML) is freshly created to suit the multi-device mobile form factors. In this sample project, I have created folders called “Legacy” to help you understand what code was reused.
For details on how I built the UI for this sample, refer to the Views folder within the shared project. All the ViewModels from the WPF project have been reused without much modification. Although comparing to the WPF thick client apps, mobile implementations can be much simpler. However, I have retained the logic as-is to exhibit the reuse of maximum code share.
Getting started with Xamarin.Forms
To get started quickly using Xamarin.Forms with Azure Mobile Apps, there is a template in Visual Studio 2017 and Visual Studio for Mac that automatically sets up everything for you. All that you need to do is add your code in the right places.
Create solution in Visual Studio
Open Visual Studio 2017, click on File> New Project>Visual C#> Cross-Platform > Mobile App (Xamarin.Forms). In the next dialog, be sure to check select Master-Detail template, Xamarin.Forms as the UI Technology and choose “Include Azure Mobile Apps backend project” option. Complete the process by selecting an appropriate Azure Subscription and hosting on a preferred Resource Group.
For detailed guidance on building Cross Platform apps using Xamarin.Forms, checkout our Getting-Started guide.
Consuming Azure Mobile Apps backend
The backend code that was ported from WCF to Azure Mobile Apps can be found in the MobileAppService. Explanation of the Mobile Apps backend code is beyond the scope of this article. You can download the source code from my GitHub repo and publish them directly to your Azure Portal.
By default, the template creates a helper class called AzureDataStore that abstracts away the code for offline sync support. I further modified it to fit Expenses project. In this project, we have three scenarios –
- Manage Charges (Add/Edit/Delete Charges)
- Manage Expense Report (Attach charges, Create Expense reports and Submit for approval)
- Manage Employees
To support offline sync for each of the tables, a corresponding Data Store is created that implements IDataStore<T> interface – T being the Model object.
Source Code and Wrap up
You can download the entire source code from my GitHub repo. Refer, the _before folder for the original WPF source and Port-Report folder for Portability analyzer reports. For detailed documentation on porting existing Windows Forms or WPF apps to Android, iOS, macOS, or UWP, refer our Porting Guidance.
Your existing .NET code is more mobile than you think!
 |
Nish Anil Senior Program Manager, Visual Studio @nishanil Nish is a Senior Program Manager on the Xamarin team. He is a C# fanatic and enjoys writing Mobile Apps in Xamarin and Visual Studio. Working out of Bangalore, India, he’s passionate about spreading C# and Xamarin love among .NET developers across the world. |