NuGet Packages for Xamarin

Well, since I have been working on lots of Xamarin stuffs, I thought it’s sometimes best to list down the NuGet packages that are really amazing and helps you create the boiler plate of your App in a much easier and faster way.

The NuGet Packages

Let’s look at the worthy NuGet packages which are worth looking into.

NameDescriptionPlatforms
Acr.UserDialogsA cross platform library that allows you to call for standard user dialogs from a shared/portable libraryXamarin.Android Xamarin.iOS UWP Xamarin.Forms
SQLiteNetExtensionsSQLite-Net Extensions is a very simple ORM that provides cascade operations, one-to-one, one-to-many, many-to-one, many-to-many, inverse and text-blobbed relationships on top of the sqlite-net library.Xamarin.Forms
Rg.Plugins.PopupPlugin for Xamarin Forms. Allows you to open any page as a popup. Xamarin.Forms
Xamarin.Forms.DebugRainbows Adds a very colorful debug mode to each of your ContentPages that lets you immediately see where all of your elements are located. Xamarin.Forms
AkavacheAn asynchronous, persistent key-value store for desktop and mobile applications on .NETXamarin.Forms

I will keep updating this list as I keep encountering on these stuffs. Feel free to let me know if there are some I have missed.

Happy Coding!

Fix WKWebView Content Cut Issue

A lot of Devs who have tried integrating UIWebView in the past had the option to fix things like Content getting cut when scrolling to the end.

Generally, when this happens the easiest way is to add padding to the Bottom of the ScrollView. The same can be done by making use of ContentInset. ContentInset is the custom distance that the content view is inset from the safe area or scroll view edges.

Let’s see how to add the same for a CustomRenderer in Xamarin.iOS for Xamarin.Forms:

 webView.ScrollView.ContentInset = new UIEdgeInsets(0, 0, 100f, 0); 

Here in the above line, we add the ContentInset to the ScrollView asking it to accept padding of 100f to the bottom of the ScrollView. You can customize it as per your needs.

Happy Coding!

ContentResolver for Xamarin.Forms

We often face some challenges when working with Xamarin.Forms.
In a similar instance, I faced one when trying to read Contacts. I found myself in a fix because the data that I had received for an Image was basically a URI with type content://

The data retrieved from the Contact for a Thumbnail was something like this:
content://com.android.contacts/contacts/29059/photo

Obviously, Xamarin.Forms is fully equipped to deal with any sort of ImageSource that comes in its ways, except something that is directly a platform specific.

In order to render this, I went ahead with DependencyServices.
Here’s my implementation for this:

IContentImageService.cs
public interface IContentImageService
{
    Stream GetImageUri(string contentUri);
}
ContentResolverMethods.cs
[assembly: Xamarin.Forms.Dependency(typeof(ContentResolverMethods))]
namespace YourNamespace.Droid.Dependencies
{
    public class ContentResolverMethods : IContentImageService
    {
        public Stream GetImageUri(string contentUri)
        {
            var uri = Android.Net.Uri.Parse(contentUri);
            return Android.App.Application.Context.ContentResolver.OpenInputStream(uri);
        }
    }
}

Now in order to use this, you can always invoke the method implemented in Android using DependencyServices from within the Xamarin.Forms Project which is either a .NetStandard, Shared or a PCL based project

var stream = DependencyService.Get<IContentImageService>().GetImageUri(imageUri);
return ImageSource.FromStream(() => stream);

Happy Coding!

Reverse Proxy to Multiple Endpoints using NGINX

If you are a NodeJS developer, you know that you can easily create multiple Nodes and each of them can have their own ports to connect to.

For example, you might want to display the FrontEnd of the app via http://localhost:8080 and the API via http://localhost:3000

Now, in order to use a single domain to access this, I can use the location block within NGINX configuration and let NGINX forward the request to multiple endpoints depending on the conditions.

Here are the sample server blocks:

server {
location / {
proxy_pass <a href="http://localhost:8080">http://localhost:8080</a>;
}

location /api {
rewrite ^/api(.*) /$1 break;
proxy_pass <a href="http://localhost:3000">http://localhost:3000</a>;
    }
}

Here the first location block directly forwards the request to http://localhost:8080.

However, for us, the requirement was to make use of API calls as well.

So here the requests like https://www.mydomain.com/apifind/x would simply get forwarded to

http://localhost/find/x. This means, now if I can use the same domain and route the requests to different servers depending on the needs.

 

Happy Coding!

Disable Screenshot in App

Many a times we have seen App which detect and won’t allow us to take screenshots. So as an App developer on Xamarin, it’s quiet intriguing to know how to achieve that. Turns out, it’s just a line of code that would allow us to achieve that.

this.Window.SetFlags(WindowManagerFlags.Secure, WindowManagerFlags.Secure);

Setting up the Flags for Window Manager does the job. Now just add this in a Blank Android App and test it out. You will see that it works just like that.

Happy Coding!

I am now a Microsoftie!

Well after a journey of around 2 years at Xamarin, I am now an FTE at Microsoft with Blue Badge.
I will be joining Microsoft as a Software Engineer II in the Xamarin Team.

My journey started from Aditi Technologies > Sapient > Xamarin and now Microsoft.

Now I am no more a Microsoft MVP. As per the policy, Microsoft FTEs cannot be a Microsoft MVP. But I am definitely available everywhere for the Community.
Still, I am part of the XHackers Community which we had started before.

Xamarin.Forms Label Renderer for Displaying many lines

I am back again with a post on Xamarin.Forms Custom Renderer. My earlier post was on the creation of a Custom Renderer for Entry.

Well, this time, we are going to solve something different which might not have been faced by many users. Sometimes, it happens that you want to display some lines of Text to the user like Read Me or just some Random text. For instance, consider the following code snippet:

<Label Text="{Binding SomeText}" HorizontalOptions="Fill">

Here, when the App is run, the text will be filled in the Label. However, if the number of lines crosses 100, the text will get clipped. In case, you want some more lines, you can always create a Custom Renderer for Label.

You can try to create something like this:

In Android

public class CustomLabelRenderer: LabelRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);
        Control.SetMaxLines(500);
    }
}

In iOS

public class CustomLabelRenderer : LabelRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            UILabel label = Control;
            label.Lines = 500;
        }
    }
}

Hope this helps someone.

Happy Coding!
 

Trying Xamarin.Forms Entry Renderer for Corner Radius

I am always amazed by the capability of Xamarin.Forms Custom Renderer. I wanted to try something and thought of extending the Entry Custom Renderer for Windows Phone App initially to try and provide Corner Radius for Textbox.

If you are a Windows Phone developer, then you already know the complexities. Generally, the TextBox element in Windows Phone, doesn’t have the property of CornerRadius. Corner Radius, generally provides the Curved borders, which in this case would provide for the Textbox control. Anyways, in order to provide a separate border, we generally have to nest the TextBox inside a Border element to provide the Corner Radius.

<Border Margin="5" Padding="5" BorderThickness="1" BorderBrush="Red" Background="AntiqueWhite" CornerRadius="10">
    <TextBlock Text="Lorem ipsum"/>
</Border>

Now I have tried to achieve somewhat same in Xamarin.Forms using Custom Renderers for Windows Phone.
The code is currently checked-in here.

Happy Coding!

Windows 10 UWP App templates for Adobe Photoshop

Microsoft has now released the UWP App Design Templates for Adobe Photoshop.

What does this mean?

Say you are a designer or a developer who wants to get their dirty on the design side [Pun Intended], can now make use of this design template and create stunning designs. It is said that, in order to build something good, you need to first have a rough design as it gives the idea of what exactly needs to be done. Even helps in order to work out the flow required between the pages. This was generally done either using Pen & Paper or on a Drawing Board. Nowadays, we have the designers who try and create these designs or rather Wireframes. But the problem was that for every  segment they have to go and create a duplicate of all the controls like Buttons, Textbox etc. As a practise, every developer tries and creates some control templates from where they can be taken and used.

Earlier, these templates were only available for Microsoft Powerpoint and Adobe Illustrator. Now Microsoft has released the template for Adobe Photoshop as well. It seems to have happened because of the feedback provided during the Build 2015 Event. For more information, please visit this link.

Download the UWP App Design Templates for Adobe Photoshop

Controls - 1

Controls – 1

Controls - 2

Controls – 2

Fonts

Fonts

Colors

Colors

Screens

Screens