SDF – Development – design updated

I wanted to show you the work I did so far. I know, I still have a lot of work to make this app looking better :)

But it is still in development :D

It wasn’t hard to create an extended map control that exposes a CurrentLocation bindable property and also a Locations bindable property. This control has 2 commands : CommandMap and CommandPin. Right now, I just show a dialog. I had to create a custom renderer to raise the PinClicked event which isn’t available from Xamarin Forms. If you just need to display some pins on the map, you won’t need a custom renderer.

Don’t forget to specify a label for every pin you add. Without a label, the small white popup won’t display and thus, prevent any click event. Plus, it’s required on a platform (I think it was Android) if you don’t specify the Label, it will crash. You have to set string.Empty at least but even if it doesn’t crash anymore, it sill won’t display the popup. You have to pass a string not empty to enable the raising of the click event.

Here is how I use it in my Xaml :

The ExtMap control inside a page in Xaml.

Here is the result:

If you pay attention, once the map is displayed there are 3 pins displayed and then a 4th pin is added. It’s just to show that my ObservableCollection of Location works ;) It was the first time I create a Xamarin Forms control that use an observable collection and listen its CollectionChanged event. I will use this method to create my ItemsControl of T where T inherits from a ContentView. Xamarin Forms is missing a repeater view control. I know there is the XLab Repeater View. But don’t ask me why, I don’t want to add too many dependencies. Even more for my user interface controls. And I love so much to create my own controls that I don’t want to rely on someone else ;)

 

The GIF of the SDF app.

The SDF app presentation.


HomePage – A first shot

Animations

Warning, your eyes might bleed while watching to the result of my design skills… The color are very sad. I still have not made my decisions about the color. So I keep it in the mockup style design by default.

Before I write more about what I discover after playing with animations that are in the box. Here is a GIF that will show you my progress. I still can enhance it later. That’s not beautiful but hey :) it’s that ugly too!

I know how a GIF can be annoying while reading. I apologize for that too ^_^

 

The Animation HomePage GIF.

The Animation HomePage GIF.

Show me some code!

Bonus: some screen shot of my code: (it’s faster to post some screenshot because I don’t have a code editor inside my blog yet).
At the moment I tool those screenshots, I didn’t have anything more than a command in my view model. The animation can’t be started until we bind a command to the control. That’s why the MenuUserPanelView command is binded to the CmdOpenPage.

When I work on a project on my spare time, I like to name my command CmdXXX. Because I like to have all my command grouped in the Intellisense while I code. The same kind of argument of those who name their private field with an underscore like _myVar. I was this kind of developper until I started using StyleCop which doesn’t like that and force me to use the “this” keyboard anytime I can. this._myVar isn’t the sexiest code I’ve so far. My eyes feel more confortable with a this.myVar. Real developers can argue about coding conventions for hours :P

The XAML of the HomePage.

The XAML of the HomePage.

 

C# code of an animation with Xamarin Forms.

C# code of an animation with Xamarin Forms.

 

I tested those animations on real devices. I have a Galaxy Note I (still working very good) and an iPod Touch 5 (a second hand product). On the Galaxy Note, the animations are lagging a bit. It’s rendering much better on iOS. And it’s an iPod Touch 5 (based on hardware, it’s the equivalent of the iPhone 4S). I did notice that depends on the order of the animation. If you combine more than 2 different animation at the same time, it will impact the user experience in a very bad way on Android. This advice is for animation of panels of controls like a stack of button, textbox etc. If you only animate a icon or a single component, you can try 3 animations at the same time. I can only advise you to experiment.

I didn’t make a lot of research on how Xamarin renders those animations. The FPS make me think that for Android, it’s rendered with CPU while GPU is used for iOS.