No need custom renderers

Xamarin Forms power

I’ve heard so many people saying you can’t do a lot of things with Xamarin Forms. To all of them, I say bullshit :D

You can do almost everything you want with Xamarin Forms. You may have some hard times but no pain no gain ;)
If you combine animations and images and the build in controls, you won’t required a lot of custom renderers.

As an example: let’s say you need a custom renderer because the watermark of the Entry control doesn’t work on a specific platform. If you want to get rid off the custom renderer, you can create your own control! A view composed of a Label which is over an Entry. When the Label or the Entry is focused, you hide the Label. You don’t show it unless it lost the focus and that the Entry text isn’t empty or not equal to the watermark text. End of the story :)

Image power

My best friend is a developer too. We met each other at school. But he took the Javascript path while I chose C#. He went on Titanium while I went on Xamarin. When we compared the mobile app we’ve developed, I was, most of the time, a bit jealous of how beautiful his apps were. I thought he might be a CSS expert! But most of the time, he was just using amazing images, cool icons and cool fonts. He had a designer in his development team while I didn’t (I used to work on business app). The fast you can trade with your designs, the better the integration will be. I think that designers and developers worked better together if they are in the same team.

Sometimes, what takes you a minute to do in Inkscape or Illustrator may take tons of times with code. It’s very easy to create a very cool button background with an image. How will you get an amazing look with the common stuff like a border, a background color and a padding ? ^_^
With an image, it’s very easy. If you have a good designer, he can even realize amazing buttons, amazing icons. My friends just add to perform some little animation on the image and boom! His UI looks very great with few work!

Check out this code:

<Grid>
    <Image Source=PictoBackgroundCircle.png />
    <Image VerticalOptions=Center
        HorizontalOptions=Center
        Source={Binding Source, Mode=OneWay} />
</Grid>

And yea, you get a new button ready to use and easy to customize. You can even bind a background image source too.

A last word, image a cross platform and cross everything :D they can be added in a Website, a mobile app, a desktop app, an email. Everything! While a Xamarin Forms equivalent code works…only with Xamarin Forms. Even if the Xaml can be easily port on a Microsoft Xaml based project, it’s still not the most portable.

Now, I don’t think too much when I have to do something that can be easily drawn in Inkscape. This incredible software allows you to export your file into XAML!!! You might give this software a shot! I use it to perform my icons, shapes that would be hard or boring to do in code.

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