iOS app Pori Fashion Show becomes a Windows 10 app thanks to Windows Bridge for iOS

Pori Fashion Show is a dress up children’s game created for iOS. Kids can drag and drop the clothes and accessories that they want to wear on ‘paper doll’ cartoons, save the images for sharing later, or even walk them down an animated fashion runway like top models.

This game, like many apps, was once restricted solely to iOS. Dong Yoon Park, creator of the Pori Fashion Show, is also the Senior User Experience Designer at Microsoft. As the design leader for Windows Bridge for iOS, Park decided to bring his game over to the Windows platform while re-using the existing code.

About the Game

Pori Fashion Show uses a standard UIKit controls like UICollectionView, UIImageView, and UIButton. UILongPressGestureRecognizer and UIPanGestureRecognizer enable the drag and drop gestures in the game.

Importing the Project

For developers that use a Mac, the easiest way to get started is to set up Windows 10 and Virtual Studio on a virtual machine. This will make it simpler to switch between Xcode and Visual Studio. Developers can download an evaluation virtual machines with both Windows 10 and Visual Studio installed already on the bottom of the Windows Bridge for iOS page.

After configuring your developing environment:

1. Use the vsimporter tool to import your Xcode project to a new Visual Studio Universal Windows Platform project with Objective-C support.
2. Type ‘powershell“ in Cortana’s search box to open Windows PowerShell.
3. Run ‘C:\YOUR_WINOBJC_PATH\bin\vsimporter’. The .vsimporter and .sln will be generated automatically.

Using a virtual machine will provide a shared folder feature on a network drive which Visual Studio will not allow. The easiest means to share the source code folder to Windows is to override the project’s output directory. Right-click the project, click on Properties, and change the output directory under the General menu to $(Temp)\$(MSBuildProjectName)\bin\$(Configuration)\. Please note that Temp should be an environment variable pointing to your Temp directory.

Building A Solution

At this point, clicking the Build Solution button will come up with many errors. The most common errors are caused by developers forgetting to remove the iOS-specific frameworks and libraries. Other errors might crop up from libraries that are still in active development. The Pori Fashion Show app had both, creating the need to remove the StoreKit, MessageUI, and Social frameworks and find a workaround to replace Storyboard.

For some errors, you might have to rewrite the iOS layout in the code. For most common issues, Auto-Layout Constraints can fix the problem. However, if a developer has trouble adding them, there is a Programmatically Creating Constraints webpage to help. In Pori Fashion Show’s case, the Auto-Layout Constraints worked just fine.

Park’s app uses standard UIKit controls with custom images. Most of the UI elements are container types that don’t have OS-specific style or UI controls with custom images. For these types, Windows Bridge for iOS will not require any changes to run the app. For UIKit controls without customization, however, the program will try to translate them into UI controls for Windows.

When your app is accessing unimplemented APIs, the console will respond with an error message “[Stubbed function called!]” or “(E_NOTIMPL)” in the output console. Even though Pori Fashion Show uses two APIs for gestures, the console only came up with a recognizer error. UILongPressGestureRecognizer is the API that makes it possible to scroll through the collection of neat clothes collection on the app.

Finding alternatives and workarounds to unimplemented APIs might take a few creative tricks. For Pori Fashion Show, this meant using the app’s other recognizer’s velocity to detect the scrolling direction instead.

Another common problem for errors is failing to use cross-platform naming conventions such as using colons in iOS while Windows does not allow it. Pori Fashion Show updated their screen capture code but now there was another problem! Saving images of the dressed up dolls caused the colors to be altered. Since Windows Bridge for iOS is under constant development, Park went back to the source. After opening an issue with WinObjC on GitHub, the team responded and fixed the issue with an updated SDK release.

Bridging the Gap

It’s best to test the shared source code in both Xcode and Visual Studio. After confirming that the code ran on both Windows and iOS, Pori Fashion Show was successfully bridged!

Bridging current iOS apps to the Windows platform is an effective way to bring your project to a new level with a larger market. Universal Windows Platform apps are capable of running across many types of devices including smart phones, tablets, laptops, desktops, and even the upcoming XBox that is still in development.