Get started with Xamarin.Forms for Windows

Xamarin has finally released support for Windows apps using WinRT. This make it possible to write apps for Windows Phone 8.1 (the stable release uses Windows Phone 8 Silverlight but can be upgraded to Windows Phone 8.1 Silverlight by changing target platform) and Windows 8.1. It’s still in preview and Xamarin not recommending that we uses it for production apps yet. This post will show you how to add Windows apps to your existing Xamarin.Forms project.

First thing to do is to make sure that you have the correct PCL profile for your shared Xamarin.Forms project. If you have created your project from Xamarin.Forms PCL template you have to check Windows Phone 8.1.

PCL Target type

Next step is to create a Blank Windows App.

Create black Windows app

When you have done that you have to add the nuget package for Xamarin.Forms to the Windows project.

Run Install-Package Xamarin.Forms.Windows -Pre in the “Package Manager Console”.

When the package is installed open up MainPage.xaml and add the Xamarin.Forms namespace and change Page to forms:WindowsPage.

<forms:WindowsPage
    x:Class="MyApp.WinStore.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp.WinStore"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:forms="using:Xamarin.Forms.Platform.WinRT"
    mc:Ignorable="d">
 
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
    </Grid>
</forms:WindowsPage>

You also have to remove that MainPage is inherits from Page in MainPage.xaml.cs. To start the forms application run LoadApplication with the App class from the shared project as an argument.

 public sealed partial class MainPage
    {
        public MainPage()
        {
            this.InitializeComponent();
 
            LoadApplication(new MyApp.App());
        }
    }

The last step is to call the Xamarin.Forms Init method (Xamarin.Forms.Forms.Init(e);) in App.xaml.cs. The call should be in the OnLaunched method after before if (e.PreviousExecutionState == ApplicationExecutionState.Terminated). It will be around line 65.

if (rootFrame == null)
            {
                // Create a Frame to act as the navigation context and navigate to the first page
                rootFrame = new Frame();
                // Set the default language
                rootFrame.Language = Windows.Globalization.ApplicationLanguages.Languages[0];
 
                rootFrame.NavigationFailed += OnNavigationFailed;
 
                Xamarin.Forms.Forms.Init(e);
 
                if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
                {
                    //TODO: Load state from previously suspended application
                }
 
                // Place the frame in the current Window
                Window.Current.Content = rootFrame;

Xamarin Forms for WinRT

If you want to use Xamarin.Forms for a Windows Phone 8.1 (with WinRT) app follow the same steps, for a Windows Phone 8.1 project.

Crossplatform and storage strategies

Many applications need to store data related to the application. If you’re building applications for multiple platforms the APIs for storage is different.

Following five storage types is the most common ones:

Local storage
Storage to store application data locally on the device.

Remote storage
Storage to store application data in the cloud, for example OneDrive or iCloud. Data that is saved in the cloud could be accessible from different devices.

Cache storage
Storage to use when caching data. Platforms that have a separate storage for cache data will not contain cache storage in the backup, WinRT for an example. Cached data is not necessary to have in a backup, it will be cached again after restore of the backup.

Settings storage
Storage to store application settings locally on the device.

Remote settings storage
Storage to store application settings in the cloud, for example OneDrive or iCloud. Settings will be synced for all devices you have installed the application on.

You can handle storage in different ways, one strategy is to create one interface for each of the storage types above, for example ILocalStorage and IRemoteStorage. Every interface will have an implementation for each platform. With help of an IoC-container (Inversion of Control) we can use the interface to call platform specific code from shared code.

public interface ILocalStorage
{
     Task AddAsync(string key, object value);
     Task<T> GetAsync(string key, object value);
     Task<bool> ContainsAsync(string key);
     Task RemoveAsync(string key);
}

One other strategy is to create one storage interface, IStorage and have a method with storage type as an argument. As with the first strategy each platform will have a platform specific implementation that can be used from shared code with help of IoC.

public enum StorageTypes
{
    Local,
    Remote,
    Cache,
    Settings,
    RemoteSettings
}
 
public interface IStorage
{
     Task AddAsync(string key, object value, StorageTypes storageType);
     Task<T> GetAsync(string key, object value, StorageTypes storageType);
     Task<bool> ContainsAsync(string key, StorageTypes storageType);
     Task RemoveAsync(string key, StorageTypes storageType);
}
 
public class Storage : IStorage
{
     public async Task AddAsync(string key, object value, StorageTypes storageType)
     {
          switch(storageType)
          {
                 case StorageTypes.Local:
                      //code for local storage
                      break;  
                 case StorageTypes.Remote:
                      //code for remote storage
                      break;  
                 case StorageTypes.Cache:
                      //code for cache storage
                      break;  
                 case StorageTypes.Settings:
                      //code for settings storage
                      break;  
                 case StorageTypes.RemoteSettings:
                      //code for remote settings storage
                      break;  
          }     
     }

I prefer the first strategy beacause I like small classes with one role, the maintainability will be much higher and you can make changes to one implementation without the risk of breaking other functionality than that one you want to change.

As an example, one platform maybe don’t have CacheStorage, then the LocalStorage and CacheStorage will be pretty much the same. But if that platform will get CacheStorage in the future you can change the implementation of ICacheStorage without touching the working code for LocalStorage.

Build 2014

Now we are in San Francisco for the BUILD Conference that starts on Wednesday. It was a long flight from Sweden yesterday, but I used the time for coding. Have to say that Surface Pro is an excellent device for coding on an airplane.

What I expect from the BUILD conference is a big amount of inspiration from great lectures and people, new knowledge about developing for the Microsoft platform and some product news specifically for Windows Phone.

The most discussions before has been about Windows Phone 8.1 but I have also read some that speculating about a preview of Windows 9.

I saw the schedule for the first time earlier this morning and it will not be easy to select what to listen on.

If you want to follow us on Build you can do it here on my blog and on Twitter, my username is @hindrikes and Johan’s is @johankson.

Solution: Cursor disappears on Surface Pro 2 when connecting monitor

If you having problem that your cursor disappears on your Surface Pro 2 when you connecting an external monitorthere is a simple solution, disconnect the external monitor and connect it again and it will work again.

For me this problem showed up when I changed size for text and objects on the desktop after that I connecting an external monitor.

 

Windows Azure Mobile Services in Portable Class Library

In my current project, a multiplayer game for mobile devices I only using Windows Azure Mobile Services as backend. The game will be available for multiple platforms and I will use Xamarin for iOS and android.

When using Xamarin I can reuse a lot of code if I using PCL (Portal Class Library) that i shipped with Visual Studio. When creating a new PCL-project you can choose which taget platforms the project will build for, in my case Windows Phone, Windows Store, Xamarin iOS and Xamarin Android.

In order to reuse so much code as possible I want to have the communication with my backend in PCL. When using Windows Azure Mobile Services I can have all communication there except for the code for authentication. But then I put an interface i PCL and each platform will have a specific implementation of the interface.

But where to find the Mobile Services assemblies for PCL? I installed Mobile Services via NUGET to my Windows Phone project (Windows Phone is my first platform). But Mobile Services was not just installed to my Windows Phone project, I also got the assemblies for PCL (and other platforms) i my packages folder. It enabled me to add the assemblies manually to the PCL-project.

Modern UI icons

If you searching for icons for your app or website, check out http://modernuiicons.com/. There are over 1000 icons designed for your app or website. It is a very good library when building modern UI apps for Windows Phone, Windows 8 or iOS7. But I have also used them for different websites. When I searching for icons I almost always finds an icon in Modern UI icons library.

When you download the library you will get a dark and a white version of the icon. But you also got them in the vector format, .design and .svg.

Improved developer tools in Internet Explorer 11

I have run Windows 8.1 for a couple of weeks now. One of the news in Windows 8.1 is Internet Explorer 11. I have not used Internet Explorer as my main browser, but of course I wanted to try it out.

One of the reason I don’t have used Internet Explorer so much is that I think that Firebug had been much better than developer tools in Internet Explorer. But for Internet Explorer 11, they have done big improvements. You can for example debug with the windows pinned in the browser window, you do not need to press start for starting the debugger, it is just to add a breakpoint. An another thing I like in the new developer tools is that you do not need to refresh page, when a javascript has changed the DOM, it is updating in real time.

You also get help to see if elements are in line when you selecting an element (see image below). I think that could be a very helpful tool.

Internet Explorer 11 Developer Tools

The only thing that I miss is that I can nott set Internet Explorer in compability view. When working for a customer that use older versions of Internet Explorer is has been a very good feature to change document mode. When using Internet Explorer 11 I need to use a virtual machine to test websites on other browser versions than 11. Microsoft links to a tool that is called Browser Stack. I signed up for a evaluation account, but it dosen’t work well, it was lagging so it was very hard to do the testing.

IE 11 Developer Tools

Windows 8.1 and the new fish

The preview of Windows 8.1 is now available for download at, http://windows.microsoft.com/en-us/windows-8/preview.
I installed it earlier today and I got a start button that I never will use. But is good that they added it when it seems to be an important thing for a lot of people.

I like that I can use a photo as background at the startscreen and that it is easier to adminstrate the tiles on the start screen. For users with touch screen it’s good that you can do all settings from the PC-settings app and don’t need to use the control panel.

One fun thing is that the ugly fish in the preview versions of Windows 8 is also updated, the Windows 8.1 fish looks much better!
Windows 8.1 fish

Enable WebSocket Protocol in IIS

If you want to use WebSockets with IIS8 you need to enabled it. This step by step guide will show you how to enable WebSocket Protocol on Windows 8 and Windows Server 2012.

Enable WebSocket Protocol in Windows 8

  1. Open “Control Panel
  2. Open “Turn Windows features on or off
  3. Expand “Internet Information Services”
  4. Expand “World Wide Web Services”
  5. Expand “Application Development Features
  6. Check WebSocket Protocol and click “OK”

Enable WebSocket Protocol

Enable WebSocket Protocol in Windows 2012 server

  1. Open “Server Manager”
  2. Click on “Manage” in the right corner”
  3. Click “Add Roles and Feature”
  4. Go to “Installation Type in the Wizard”
  5. Select “Role-based or feature installation and click “Next”
  6. Go to “Server Roles”
  7. Expand “Web Server(IIS)”
  8. Expand “Web Server”
  9. Expand “Application Development”
  10. Check WebSocket Protocol and click “Next”
  11. Click on “Install”

Enable WebSocket Protocol Windows Server2012

If you running a web role in Windows Azure you don’t need to activate it, it’s already done!

Beyond the Tiles

Monday was me, Johan (@johankson) and David(@d_andersson) visiting Microsoft for a seminar about design, primary for Windows 8 and Windows Phone. Arturo Toledo (@arturot), Alex Toledo (@toledoal) and Vincent Garcia (@vincentgarcia) was the speakers at the seminar. Arturo is a former member of Microsofts Windows Phone team but now he has his own company, Toledo2, together with his brother Alex. The third speaker Vincent Garcia are working with design for Windows 8 and Windows Phone at Avanade Digital.

The Toledo brothers start the day by giving us a lesson in design history and talked about the Swiss design school and the international style. It’s there the Metro design or Microsoft design language as it’s called today, has its roots.

One of the message of the day that Microsoft design language is much more than tiles, thereof “Beyond the Tiles”. They say the developers of Windows apps follow the guidelines to much and that make all Windows apps look the same, many developers use the Visual Studio templates and thinks the design has to be in that way.

Vincet Garcia showed us a couple of designs he had done for Windows 8 and Windows Phone and how the design has evolve with their increased understanding of the design language.

We also get som tip how we could improve the design of the Windows 8 version of WordRoom, thanks for that!

It was a good day and I became inspired and get much new knowledge to use in coming designs.

 

Browser mode in Internet Explorer

We building a web version of WordRoom, today when I tested the game on Surface RT it doesn’t look like expected. I tested in desktop and I had same issue there as I had in the Windows store app of Internet Explorer. But in desktop mode I could use Internet Explorer developer tools. It shows that Internet Explorer was in IE7-mode. Because we use a lot of HTML5 features, we want to run it in IE10-mode from start.

I searched the web for solution and I found a meta tag that fixed my issue.

<meta http-equiv="x-ua-compatible" content="IE=10" />

If you want to read more about this, read this page, http://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx

Authentication with Azure Mobile Services

When developed the multiplayer part of WordRoom we discussed to use different authentication providers. But it was a lot of code to integrate each provider. And we wanted more than one. Instead we developed our own solution.

But just ask yourself, do you want to create an account everywhere with different username and passwords. I don’t. When we discovered Azure Mobile Services it was an obvious choice. Mobile Service gives you authentication with Microsoft-, Google-, Facebook and Twitter account and it’s for free. You only need to connect it to a database server. But we already had a database server in Azure. So i next version of WordRoom, you can authenticate with your Microsoft-, Google-, Facebook- or Twitter account.

With just a few rows of code you can authenticate the user with one of the authentication providers.
That Mobile Service is for five different platforms is a huge strength. You can use it for Windows Store applications, Windows Phone, Android, iOS and HTML5/JavaScript. If you use Xamarin Studio for developing your Android and iOS apps, there is a third part library.

In a Windows Store application you just add the SDK, some rows in App.xaml.cs and one row where you want to authenticate the user.

user = await App.MobileService
                .LoginAsync(MobileServiceAuthenticationProvider.Facebook);

Read more about Mobile Services

 

WordRoom in spotlight at Windows store

Our game WordRoom has been choosen to be in spotlight at Windows Store in Sweden for the fourth time! No when more people using Windows 8 than last we was in spotlight we hopefully can get more players. It’s fun that Microsoft like our game. We are also on of ten apps that Microsoft Sweden have choosen for their website, http://windows.microsoft.com/sv-SE/windows-8/apps?ocid=GA8_O_WOL_Hero_Home_Apps_Null

WordRoom in spotlight at Windows 8 store

WordRoom in spotlight at Windows 8 store

 

 

 

 

If Apple had done Windows 8 nobody have missed the start menu

I tired of all talk about the start menu in windows 8, or the lack of the start menu. Instead of a start menu with sub menus to get lost in we have got a start screen that we can customized in the way we want. How many used the start menu in Windows 7? I did it very rare. I press Windows button and then I started to type the name of the application I wanted to start. Microsoft have done research that shows that many people start their applications that way. Because of that they improved the search.
If Apple had done Windows 8, it have been a cool new start screen. Now it was Microsoft and a the same people that says Microsoft need innovation are not giving Windows 8 a real chance to show how good it really is.
But I could understand that things could be confused with Windows 8 in the beginning, for me it wasn’t the start menu, it was the charm bar. But after a few days with Windows 8 I have now problem with the charm bar and I miss it when I using Windows 7.

I think Windows 8 is the best operating system I have used so far.

Developing apps with mono

WordRoom started as a Windows Phone project, the third client we started to develop and the first one we released was for Windows 8. We developed the windows 8 relative fast because we could reuse a lot of the code from the Windows Phone project in that we used portal library for the core logic.

As I mentioned above, Windows 8 was the third client we started to develop. The second was for android devices. I started to build the android client with java and eclipse. Step one was to translate all core logic from C# to java, a lot of work but I developed an almost finished client for WordRoom. But in the end of 2012 when we should start to develop the client for iOS we decided to use and mono touch and mono for android from Xamarin so that we could use the same assemblies for the core logic that we did when developing for the Windows platforms. We also share data contract assemblies between the backend and the clients. So now we running the same code in at backend in Windows Azure, on Windows 8, Windows Phone, Android and iOS.

The decision to start using mono is one of the best decision we have taken. We saving a lot of time and we get an app that is much easier to maintain.

Next app I will develop I will think about that that the code will be shared between different platforms earlier in the process. Because if you have a structure in your project with GUI and business/game logic split up and using interfaces for platform specific features, for example local storage you can reuse much more code and save a lot of time.