SDF – Map – Pin & Map clicked

If you saw my older post, you have seen that nothing were display when a click is made on a pin or the map.

It was very easy to implement a menu popup when a pin is displayed. Again, thanks to the amazing Xamarin Forms API, it was very easy to animate the popup. It works very well in iOS and Android. This animation was far easier than animating the user panel on the home page. If you don’t change the layout position of a control, its animation render fast enough to increase the user experience. Yea, sometimes an animation can affect the user experience.

Here is a screenshot of the animation. Notice that I use a Grid as the root element. The main reason is that I use the Z-Index style :D it means that the second child of the Grid will be displayed over the first child. Thus, I don’t need to bother anything. Playing with the visibility of the ContentView named PanelActions is enough.

Xaml of the AroundMePage.

Xaml of the AroundMePage.

In the code behind, I launch the animation whenever the property IsMapActionsVisible has changed. It’s not recommended to use Messenger for this purpose. Avoid using Messenger as it’ not the most efficient way to do things. It may be productive and easier to use Messenger sometimes. But if you use the Messenger pattern in a view to register somethings that came from the view model which it’s binded to, you may go in the wrong way.

C# of the AroundMePage.

C# of the AroundMePage

The result in a GIF: if you pay attention, I’ve handled the tapp out of the popup to cancel and close it. It is very boring when a popup doesn’t behave like that. If my popup would have been bigger, I would have add a close button because on low resolution screen, the map may be unclickable.

SDF Map clicked, pin clicked

SDF Map clicked, pin clicked

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.