Monday, June 23, 2014

Exploring Xamarin Forms

WARNING: This post is updated as I go along. All of the content is subject to change. Please comment if I'm doing something wrong. :)

Last update: 2014-08-31

I did a post a couple of weeks ago about learning Mvvm-Cross (still on-going). This post is the Xamarin Forms equivalent. It's going to be unstructured and updated as I go along.

I like the Xaml-approach so I'll try to do as much as possible using Xaml.

My app doesn't do anything special yet, more than testing out different scenarios and currently only for iOS.

1. Added SQLite [SOLVED]

I followed my own post from a couple of months ago. Had to alter it a bit and introduce a ISQLiteConnectionFactory with a single Create-method that creates a device specific SQLiteConnection on each platform. This could also easily be resolved using a simple Inversion of Control container. Some of the work in Xamarin Forms Labs (number 3) might be of interest here later on.

UPDATE: When I try to run this on an actual device I get the following exception: SQLite.Net.SQLiteException: Could not open database file (CannotOpen). Turns out I forgot to put the database in the Personal folder...

2. Scrolling editors into view [WORKAROUND]

I created a page with an image at the top that is going to represent an image captured by the camera. Below that I added a Editor-object. The problem is that the keyboard hides the text field. So my first mission is to figure out how to fix this.

My first try was to add ScrollView around the content. This kinda solved the problem half-way. The keyboard still covers the editor but you can manually scroll it up into view. If I could get it to bring the focused control into view, I'd be a happy camper.

Asked a question on stack overflow to hopefully resolve this issue. The answer was that the ScrollView should work but that there is an open bug as of June 2014 that prevents this. So I'll just have to wait for the time being.

3. Camera access [SOLVED]

So, how is this done in Xamarin Forms. Is there a special "forms" way or does the old way work? Quick reply from twitter pointing me towards https://github.com/XForms/Xamarin-Forms-Labs. Thanks @mitchmilam! This seems to be very early on in development though. I'll keep an eye on it to see how it evolves.

Update 2014-07-20: Did finally download and check out the code! Seems really nice! I'll try to dig deep into it in the future. This is the kind of project I really would like to contribute to. For now I'll just use it and I'll start with the camera access.

I used the pre-release nuget packages instead of building my own. Install using

    install-package Xamarin.Forms.Labs -pre

on each platform.

It also seems they got a little more stuff in the wiki at last. I followed the example and get a Null Reference Exception trying to resolve the IMediaPicker.

    var picker = DependencyService.Get();

It's not registered. Adding the following code to AppDelegate.cs (for ios that is) did the trick.

     var resolverContainer = new SimpleContainer();
     resolverContainer.Register(t => AppleDevice.CurrentDevice);
     Resolver.SetResolver(resolverContainer.GetResolver());

4. TabbedPage stopped working on simulator

I've been working on some camera stuff so I used a real device to try my code out. I then switched back to the simulator but the main tabbed page just renders completely white. No clue yet on what caused this, but I'm not going to get to the root of this problem just yet.

Updated 2014-08-05: I was missing a low res version of an icon (png image) located in the iOS Resources folder. It seems like the simulator (or something in Xamarin Forms) doesn't use the hires image but the device does.

5. Intellisense for xaml [WORKAROUND]

Ok, I'm starting to need this. Unfortunately it may take a while to fix. Looks like MS has to change some stuff regarding PCL projects.

http://forums.xamarin.com/discussion/17393/xaml-intellisense

Workaround: Use Xamarin Studio instead...

6. Toolbar Item [SOLVED]

Having real trouble to simply add a Save-button to the toolbar/titlebar. It simply does not show. I had to ask a question to StackOverflow for this. Hopefully someone smarter will solve it soon.

2014-08-05: The problem was that the page was in a tab. I guess I have to use the Xamarin Forms Labs extended tabbed page to be able to determine when tabs are focused. I also wonder how the title bar is supposed to behave when switching tabs? It seems to belong to the TabbedPage, but I would like it to belong to the child tab being displayed? 

7. Icons [STILL AN ISSUE]

All my icons are grey squares. I really have to start reading the Images documentation. I follow all the advice but all my icons are still grey and squary.

8. Grouped Lists [STILL WORKING ON IT]

This is going to be my next challenge. I'll spend the day in the sun and doing my research on how this is done in Xamarin Forms.

9. Nuget-reference explosion [SOLVED]

Updated the Xamarin.Forms nuget package to version 1.1.1.6206 and it wouldn't build anymore. Both Xamarin Studio and Visual Studio told me to enable package restore since a package was missing. Didn't help. It turned out to be crap left in the project file as described in this post. The short version, you need to remove lines that look like this " Condition="!Exists(... " and that checks for the existence of a now old version of Xamarin Forms.

10. Provisioning profile issues

Not an Xamarin.Forms related issue, but it still slows me down...











4 comments:

  1. Mr. Karlsson,

    Thank you for your informative post.

    I was wondering if you had an example of how to use the camera function from Xamarin.Forms.Labs because it is slightly confusing to me

    Thank You

    ReplyDelete
  2. Hi! I just ended up using pretty much the example provided from the Labs-gang.

    I have a ViewModel that has a property called Image (that is of type byte[]). Sorry for the messy code, but I can write a post about it if you need a more complete example? The most important stuff is to set up the IoC-container as explained in point #3.


    async Task TakePicture()
    {
    try
    {
    var picker = DependencyService.Get();

    await picker.TakePhotoAsync(new CameraMediaStorageOptions() { DefaultCamera = CameraDevice.Rear, MaxPixelDimension = 400 }).ContinueWith(t =>
    {
    if (t.IsFaulted)
    {
    var s = t.Exception.ToString();
    }
    else if (t.IsCanceled)
    {
    var canceled = true;
    }
    else
    {
    var vm = this.BindingContext as NewEntryPageViewModel;

    var mediaFile = t.Result;

    using(var memoryStream = new MemoryStream())
    {
    mediaFile.Source.CopyTo(memoryStream);
    vm.Image = memoryStream.ToArray();
    }
    }
    });
    }
    catch(Exception ex)
    {
    var message = ex.ToString();
    }

    ReplyDelete
  3. Your resolver code "resolved" my issue with the camera and forms.labs. Many thanks!!

    ReplyDelete