Category Archives: Awesome

Yaay! I became a Xamarin Certified Mobile Developer! :D

So finally on 9th of June 2017, I became a Xamarin Certified Mobile Developer. So here’s my experience of the whole Xamarin University, Certification Exam, and some tips and tricks that might help you! 🙂

Well I’ve been using Xamarin Platform for over 2 and half years now, but I never really thought of getting the official Xamarin Certification until recently my boss encouraged me to and financially supported it.

Down the memory lane of my Mobile Development enthusiasm…

So here’s a little sharing of memories down the memory lane and some tips for getting the Xamarin Certification.

I first started off developing mobile apps on Android platform, given my love for Java programming back in the early days. So I self learned Android App Development back in the middle of 1st year of my college using online tutorials and documentation.

Then at the end of 1st year, I was introduced to Windows Phone App development, which I got completely hooked on it, and then Windows Store App Development and so on, where I ended up publishing over 20+ apps to the Microsoft App Store during the next few years.

Next lucky enough I got a mobile developer opportunity at a medium size local company where it was for Xamarin Mobile Development back in 2014 December. 😀

Learning the whole Xamarin Platform by myself, I ended up completing a full fledged mobile app for that project in that company using Xamarin Forms.

Finally in 2015 December, got an overseas opportunity in Singapore for a Xamarin Mobile Developer position, which is where I ended up mastering the Xamarin Platform, Xamarin Android/iOS native development, hacking to push boundaries of the platform and so on and finally living my dream of being a Mobile App Developer. 😀

And that is where I’m currently working at June 2017, enjoying everyday of it while diving in the goodness of Xamarin Mobile Development. 😉


Xamarin University Training and Certification Preparation…

I was lucky enough my company sponsored me for Xamarin University Subscription. Otherwise its about 1000 USD for 1 year subscription or there a new monthly subscription plan with a very reasonable pricing.

Once you have the subscription you get full access for all the incredible learning materials and live lecture sessions in Xamarin University.

Is it worth it?

Now although at this point I already had like 2 years of Xamarin Mobile developement experience, I must admit that I learned way more and strengthened my knowledge on Xamarin top to bottom thanks to Xamarin University. So if you ask me if it’s worth it? at least for the Knowledge? DEFINITELY YES!

Mandatory Sessions

There’s a mandatory list of sessions that you have to complete before taking the exam, you could completely them either by attending the live lecture sessions or taking self-learn sessions (if available). Yes, some of those mandatory sessions doesn’t have the ‘self-learn’ option yet, so you have to attend to a live lecture session and get your attendance marked for it. 🙂

Instructors?

Mark my words, the instructors in Xamarin University are top-notch, and industry experts with a lot of knowledge and experience, there’s no doubt about them. You can ask anything from them regarding the session, even while the session is going on, they are very helpful and friendly, not to mention their great teaching skills. 🙂

Memorizing vs Understanding!

Do not MEMORIZE! just UNDERSTAND the content! The sessions are structured in a way that it helps you to actually understand the content with step by step exercises. I’ve never taken a single note on any of the sessions, nor tried to memorize stuff(although I’m not very good at it either), just followed through sessions and focused well during them. That’s all it takes!

Anything else?

You can take any live lecture session as many times as you wish, until you feel comfortable with the topic. There’s also many extra sessions you could attend to improve your knowledge in Azure, UI Test, Xamarin Android, Xamarin iOS. It’s good to keep in mind that the exam mandatory sessions are mainly about Xamarin Forms cross platform related topics, so you don’t have to worry if you don’t have much in-depth knowledge about native mobile development. 🙂

They also provide you a Study-Guide check-list to go through to make sure you’re prepared for what’s actually required: https://university.xamarin.com/content/certification#study-guide

Once you’ve completed the mandatory sessions, then you become eligible to sit for the certification exam!


Certification Examination!

So the Certificate Exam is a 3 hours, MCQ exam (Multiple Choice Question) which has 150 questions, and you should score over 80% in order to pass the exam.

The questions scope…

The questions are going to be completely based on the mandatory sessions in Xamarin University. Heavily focused on the Xamarin.Forms cross platform related topics. Personally I did not get any questions that are out of the scope.

So how were the questions…

If you’ve got a solid knowledge on the mandatory sessions, then you have nothing to worry about. Not keep this in mind, about 40% of the questions are straight and easy, but the rest are not going to be hard, but tricky, meaning it’s going to be little bit twisted, so you need to pay good attention to the details in each question before you pick the answer. 😉

Understand the content in the sessions, not memorize!

Basically you won’t be able to make it through the exam if you’re just trying to ‘memorize’ everything in your head, you need to have a ‘good understanding’ of the session content, in order to answer the tricky 60% of the questions.

After the exam?

Once you finish the exam, you get the results immediately. 😉 Then its time to PARRTTAAYYY!!! 😀

Xamarin University and Certification benefits!

First of all the incredible amount of knowledge and experience you gain in the whole process of Xamairn University and the Certification is priceless.

Not to mention the global recognition as Xamarin Certified Mobile Developer, having the official certificate directly validates you as someone who actually knows your way around Xamarin-stuff. Although it does not prove you as an ‘expert’, which is totally dependent on your personal industry experience.

Access to Xamarin DevConnect portal, to showcase your portfolio and connect with fellow developers.

There are few other awesome benefits you get according to Xamarin official site as follows. Certification is valid for 1 year from the date you have passed the exam. Certifications can be verified on our public Xamarin Certified Developers page.

Receive a badge, fun Xamarin swag, and an invitation to join the official Xamarin Certified Developers community on LinkedIn.

Cool, so what do I get to show off?

Except for the massive amount of knowledge and experience I gained from the Xamarin University Sessions and Training, here are some other show-off stuff I got after being certified.

So brace yourselves for some self promotional bragging! 😛

Xamarin Certified Developer Verification Online:

https://university.xamarin.com/certification?q=Udara@xamariners.com#verify

You get a link that can be shared online for the verification of your Certification status. This is the source you could include in your LinkedIn or personal portfolio for the verification.

Xamarin University Profile Badge: 

Once you get the certification, your Xamarin University profile gets updated as such.

Xamarin Certified Developer Certification (soft copy): 

You actually get a PDF version of your certification (here is a screenshot of it).

Bunch of Xamarin Certified Developer badge Images (HD):

Then you get a whole bunch of Certified Mobile Developer badges in low, mid and high resolution for you to share on any of your websites or portfolios. 🙂

Xamarin DevConnect Profile:

You get access to Xamarin DevConnect, the official Xamarin Certified Developer portal from Xamarin, where you can publish your portfolio, connect with fellow certified developers from all over the world, and open up yourself for new opportunities.

https://devconnect.xamarin.com/profile/389


Well that’s it all I got for now… 😀

Although some claim that you get kind of a Xamarin souvenir trophy and a goodie bag by mail, but I’m yet to get any of that. lol. *fingers cross* 😛

So If anyone needs any help or clarifications regarding Xamarin Certification, I’m more than happy to help, drop me a mail or comment down in the post. 🙂

To get started:  https://www.xamarin.com/university

Good luck everyone with your Xamarin Certification! 🙂

Cheers!

The three awesome tools by Xamarin! Workbooks|Profiler|Inspector

Last Friday (20th January, 2017) I did a tech talk at Singapore Mobile .Net Developers  meetup, under the topic “The three Awesome tools by Xamarin – Workbooks/Inspector/Profiler”!

So this blog post is a recap of the stuff I talked about! 😉

First of all here are the slides.

Here we go, the recap…

The three awesome tools by Xamarin

slide1

Last few months Xamarin has been busy releasing a lot of new updates and tools for us Developers, specially since the acquisition by Microsoft, they have been exponentially improving their platform and eco-system. 😀

So today I thought of picking up three awesome tool that has been released by Xamarin last few months, which are going to be extremely useful for Xamarin Mobile Development.

slide3

So to start off with…

Xamarin Workbooks!

slide4

Why do we need Xamarin Workbooks you asked? 😮

slide5

Now Imagine you’re someone who’s trying to learn Xamarin Mobile development or may be even C# dot net development? 😀

Could be someone trying to teach someone Xamarin or dot net or may be you’re trying to demo some awesome piece of code you implemented at a presentation, along with some documentation? 😉

Or simply you’re just trying out an experimenting some piece of code before you do some actual implementation in your actual project code?

Now in all of these stations, you have to open up your IDE, open up the documentations or presentations may be and most annoyingly you have to continuously switch in between them at all times. Not to mention having to recompile and run your code at the same time you switch back and forth. 😮

Oh well what a hassle is that?

To get rid of all that hassle, we have Xamarin Workbooks now! 😉

slide6

A perfect blend of documentation and code and immediate live preview results.

Xamarin Workbooks, is a prefect solution for experimenting with Xamarin and dot net code implementations and even as a learning tool for exploring code snippets and various kinds of implementations in Xamarin and dot net.

Perfect for creating teaching guides with a sweet side by side integration of code and documentation. Whenever you create or open up a Workbook, it creates a Sandbox environment for you to do your stuff, so you could accomplish your documentation aspect and coding aspect in one single place. 😉

slide7

So workbooks packs a bunch of awesome features, such as full fledged code editor with Roslyn IntelliSense, which has similar syntax coloring just like in Visual Studio. It has in-line compiler diagnostics support as well.

Attached with a rich text editor for you to add side by side code and documentation on the go. You could also easily search and add nuget packages as you go, just like you would do in Visual Studio, and instantly preview the results in console, or any mobile emulators as you have chosen.

You can easily save an share your workbooks with anyone and they could open it up and try out as they wish.

slide12

So Xamarin Workbooks supports dot net console/WPF implementations, Xamarin Android/iOS mobile development and even Xamarin Mac development scenarios. How cool is that eh! 😉

Xamarin Profiler!

slide14

Why do we need Xamarin Profiler you asked? 😮

slide15

Now as mobile developers we need to make sure we are giving a smooth intuitive user experience for our beloved users. So in order to do that, we need to make sure our app is fully optimized for the memory usage, process usage and various resource usage without causing any excessive lags or crashes.

And even some times during the development we come across these mysterious crashes without even hitting any debug points where we need more than just the debug logs to figure out what’s causing those mysterious crashes. 😮

Another aspect is that as mobile developers we need to always focus on the over flow of the resource usage in our application at run time so that we could do the necessary improvements in our code to reduce any excessive resource usage.

Something very important to keep in mind is that when we are dealing with Xamarin Mobile Development, we have to deal with both the Xamarin dot net environment and the Native environment at run time. In that case the available native profilers we have for android and ios can not help to analyze our xamarin dot net environment. So we need something better than just native profilers for our Xamarin Mobile applications.

As a solution for all those scenarios, we have Xamarin Profiler now! 😉

slide16

Xamarin Profiler is a tool that seamlessly integrated with your Xamarin Application, collects and displays information to analyze your application at run time.

This can easily be used for finding memory leaks, resolving performance issues, monitoring resource usage at the run time, and more over to polish up your mobile app before delivering to your users.

Fun fact, is that this tool is actually based on the Mono log profiler which is a command line profiler that they previously used to analyze Mono run time applications. So what they have done is, they’ve added a bunch of improvements to it and added this intuitive UI on top of it deliver this analytical information for us developers! 😀

slide17

So there are three key features or as they call them “instruments” that’s packed along with Xamarin Profiler. 😀

Allocations instrument is used for analyzing  the memory usage of your application at any given point of time at the run time.

Time Profiler instrument is used for tracking app performance, whereas it allows you to see which function took the longest to finish its execution.

Then we have the Cycles instrument, which provides you details with memory cycles occurred at the run time. May be I should explain it a bit further…

Memory Cycles: When you’re dealing with Xamarin Mobile applications, we have this environment of managed dot net environment and the un-managed native environment, sometimes due to our bad code a bunch of objects in the memory creates references to them selves in a circular manner, which could happen inside the dot net environment or most of the time in between the dot net and the un-managed environment. So in situations like that, the Garbage collector finds it hard to break through those circular references and release those objects, which results in those objects presisting in memory and the memory usage is only going to get increased. 🙂

So thanks to Xamarin Inspector we could easily identify those memory cycles and do the necessary changes in our code to eliminate them 😉

slide18

It also packs up these additional features allowing us to further drill down into details to analyze our application run time.

Xamarin Inspector!

slide20

Why do we need Xamarin Profiler you asked? 😮

slide21

As Mobile Developers we need to make sure we deliver a beautiful pixel perfect design for our end users, and specially according to my UX lead he’s going to haunt me in my nightmares if I don’t deliver a pixel perfect UI implementation. 😀

So we always have to do the tiny changes in padding or the height or the width or may be a tiny hex value in the color and so on, whereas every time we do a change we need to recompile the project and run.

And then even if you get the app to run, you still have to go navigate to the page that you just made the changes to, which takes a lot of time.

Now I’m aware of the existence of Xamarin Forms Previewer, but if you had already tried it out, we are well aware there’s a whole bunch of bugs and issues with it when it comes to complex UI designs, which has a whole bunch of custom renderers.

So for a solution to all the above scenarios, Xamarin has given us this awesome tool, Xamarin Inspector! 😀

slide22

An awesome tool that allows you to debug and analyze or modify your application UI at run time without having to recompile your code. 😉

Something really cool about this tool is that it gives this awesome exploded 3D layers view of your application UI. Which makes it very easy to analyze the rendered layers and get rid of any extra layers to improve performance.

slide23

Xamarin Inspector has two main features, first is the REPL access. REPL stands for Read, Evaluate, Print and Loop, which allows you to inject code to your application in real time.

Then the Visual Inspector allows you to interact with your UI hierarchy in real time in an intuitive 3D view.

So that you could make necessary changes to your UI in real time and see it instantly rendered on your emulator. 😉

Something very important to keep in mind is that, with the latest update for this tool, they are providing you direct Xamarin Forms support, so no longer you have to deal with the native-rendered properties, you could easily make changes to your Xamarin Forms properties on the fly.

Conclusion

slide25

Yep that’s it fellas! now get out there and build something awesome with Xamarin! 😀

Cheers!

-Udara Alwis, out! 😛

An improved ScrollView control for Xamarin Forms by me, myself and I…

Alright now when it comes to the default Xamarin Forms ScrollView, its pretty much generic and limited with the simple common attributes and behaviours, and it does not deliver any specific “cool” features with it.

What’s so cool about it?

So I thought of creating my own Custom ScrollView for Xamarin Forms using Custom Renderers, which would include the following awesome features,

Bouncy Effect – Yeah you gotta admit, the bounce effect of a native scrollview is pretty fun to play with, in a User’s perspective. So I thought of enabling this feature in my custom ScrollView even when the Child Element doesn’t exceeds the ScrollView boundaries… 😉
(PS: this effect is interpreted in native Android and iOS differently)

Disabling and Enabling Horizontal and Vertical Scroll Indicators – Now sometimes these scroll bar indicators are useful but there are times which we want to hide them, as it might look ugly on the UI in certain cases. So yeah let’s have some control over it shall we? 😀

Background Image – Of course who wouldn’t like a background Image on a Scroll view eh! 😉 Well to be specific we are going to add a Fixed Background Image for the ScrollView. And note that this background Image would be fixed, and will not be scrolling with the Content of the ScrollView. (I will do another post to enable that feature).

Yes behold, me, myself and I presenting the “BloopyScrollView” why the name “BloopyScrollView”? I don’t even know. lol 😛

Implementation

Alright let’s go ahead and create our Custom ScrollView Control in the PCL project. Along with the following properties, so that we could have direct control over the above said behaviours.

Alright now expect this to be longer, since I have added the properties as Bindable Properties, so you could use them in any MVVM scenario with ease. 😀

namespace WhateverYourNamespace
{
    public class BloopyScrollView : ScrollView
    {
        public static readonly BindableProperty IsHorizontalScrollbarEnabledProperty =
        BindableProperty.Create(
            nameof(IsHorizontalScrollbarEnabled),
            typeof(bool),
            typeof(BloopyScrollView),
            false,
            BindingMode.Default,
            null);
        /// <summary>
        /// Gets or sets the Horizontal scrollbar visibility
        /// </summary>
        public bool IsHorizontalScrollbarEnabled
        {
            get { return (bool)GetValue(IsHorizontalScrollbarEnabledProperty); }
            set { SetValue(IsHorizontalScrollbarEnabledProperty, value); }
        }


        public static readonly BindableProperty IsVerticalScrollbarEnabledProperty =
        BindableProperty.Create(
            nameof(IsVerticalScrollbarEnabled),
            typeof(bool),
            typeof(BloopyScrollView),
            false,
            BindingMode.Default,
            null);
        /// <summary>
        /// Gets or sets the Vertical scrollbar visibility
        /// </summary>
        public bool IsVerticalScrollbarEnabled
        {
            get { return (bool)GetValue(IsVerticalScrollbarEnabledProperty); }
            set { SetValue(IsVerticalScrollbarEnabledProperty, value); }
        }


        public static readonly BindableProperty IsNativeBouncyEffectEnabledProperty =
        BindableProperty.Create(
            nameof(IsNativeBouncyEffectEnabled),
            typeof(bool),
            typeof(BloopyScrollView),
            true,
            BindingMode.Default,
            null);
        /// <summary>
        /// Gets or sets the Native Bouncy effect status
        /// </summary>
        public bool IsNativeBouncyEffectEnabled
        {
            get { return (bool)GetValue(IsNativeBouncyEffectEnabledProperty); }
            set { SetValue(IsNativeBouncyEffectEnabledProperty, value); }
        }


        public static readonly BindableProperty BackgroundImageProperty =
        BindableProperty.Create(
            nameof(BackgroundImage),
            typeof(ImageSource),
            typeof(BloopyScrollView),
            null,
            BindingMode.Default,
            null);
        /// <summary>
        /// Gets or sets the Background Image of the ScrollView
        /// </summary>
        public ImageSource BackgroundImage
        {
            get { return (ImageSource)GetValue(BackgroundImageProperty); }
            set { SetValue(BackgroundImageProperty, value); }
        }
    }
}

 

There we go IsHorizontalScrollbarEnabled, IsVerticalScrollbarEnabled to disable/enable Horizonal and Vertical Scrollbars.

IsNativeBouncyEffectEnabled to control the Native Bouncy effect.

BackgroundImage to set the ImageSource for the ScrollView’s background Image. And make sure to provide a proper image for this hence we will be resizing the given image in our native renderer level to fit to the background of the ScrollView.(You will see in the next steps below)

Alright let’s head over to creating the Custom Renderers associated with our BloopyScrollView.

Something to keep in mind…

So if you’re a frequent reader of my blog, you may remember sometime ago I created an Extention class for handling Xamarin Forms Images in Native code level: https://theconfuzedsourcecode.wordpress.com/2016/12/12/an-awesome-image-helper-to-convert-xamarin-forms-imagesource-to-ios-uiimage-or-android-bitmap/

Why I’m bringing this up, is because we are going to be needing it for this project. You ask why? Because we need to convert the above BackgroundImage, which is of type Xamarin Forms ImageSource.

So we need to convert that ImageSource to native UIImage or Bitmap image respectively in our Custom renderer levels. 😉

So go ahead and grab that code real quick and add it to your Native Projects. 😀

iOS Implementation

Now let’s create the Custom Renderer for the Control in Xamarin.iOS project.

[assembly: ExportRenderer(typeof(BloopyScrollView), typeof(BloopyScrollViewRenderer))]
namespace WhateverYourNamespace.iOS
{
    public class BloopyScrollViewRenderer : ScrollViewRenderer
    {
        private UIImage _uiImageImageBackground;

        protected override async void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            this.ShowsVerticalScrollIndicator = ((BloopyScrollView)e.NewElement).IsVerticalScrollbarEnabled;
            this.ShowsHorizontalScrollIndicator = ((BloopyScrollView)e.NewElement).IsHorizontalScrollbarEnabled;

            if (e.NewElement != null)
            {
                if (((BloopyScrollView)e.NewElement).IsNativeBouncyEffectEnabled)
                {
                    this.Bounces = true;
                    this.AlwaysBounceVertical = true;
                }

                if (((BloopyScrollView)e.NewElement).BackgroundImage != null)
                {
                    // retrieving the UIImage Image from the ImageSource by converting
                    _uiImageImageBackground = await IosImageHelper.GetUIImageFromImageSourceAsync(((BloopyScrollView)e.NewElement).BackgroundImage);
                }

                ((BloopyScrollView)e.NewElement).PropertyChanged += OnPropertyChanged;
            }
        }

        private void OnPropertyChanged(object sender, PropertyChangedEventArgs propertyChangedEventArgs)
        {
            if (propertyChangedEventArgs.PropertyName == BloopyScrollView.HeightProperty.PropertyName)
            {
                // check if the Width and Height are assigned
                if (((BloopyScrollView)sender).Width > 0 & ((BloopyScrollView)sender).Height > 0)
                {
                    // resize the UIImage to fit the current UIScrollView's width and height
                    _uiImageImageBackground = ResizeUIImage(_uiImageImageBackground, (float)((BloopyScrollView)sender).Width, (float)((BloopyScrollView)sender).Height);

                    // Set the background Image
                    this.BackgroundColor = UIColor.FromPatternImage(_uiImageImageBackground);
                }
            }
        }

        // We need to override this to have the background image to be fixed
        public override void Draw(CGRect rect)
        {
            base.Draw(rect);
        }

        // Resize the UIImage
        public UIImage ResizeUIImage(UIImage sourceImage, float widthToScale, float heightToScale)
        {
            var sourceSize = sourceImage.Size;
            var maxResizeFactor = Math.Max(widthToScale / sourceSize.Width, heightToScale / sourceSize.Height);
            if (maxResizeFactor > 1) return sourceImage;
            var width = maxResizeFactor * sourceSize.Width;
            var height = maxResizeFactor * sourceSize.Height;
            UIGraphics.BeginImageContext(new CGSize(width, height));
            sourceImage.Draw(new CGRect(0, 0, width, height));
            var resultImage = UIGraphics.GetImageFromCurrentImageContext();
            UIGraphics.EndImageContext();
            return resultImage;
        }
    }
}

 

Inside the method we are assigning the relevant properties of our BloopyScrollView to the native control properties.

The UIScrollView which is associated with the Xamarin Forms ScrollView has the following native properties:

  • ShowsVerticalScrollIndicator: Make the vertical scrollbar visible or hidden
  • ShowsHorizontalScrollIndicator: Make the horizontal scrollbar visible or hidden
  • Bounces: Always enable the native bounce effect on iOS UIScrollView
  • BackgroundColor: Allows to set the background color for the UIScrollView or set an Image as a pattern

Also you may have noted that we are converting our Image Source BackgroundImage to a UIImage using our extension.

And then when the Height and Width are set to the Control, we are resizing the Image to fit those properties and setting that as the Background of the UIScrollView through the UIColor.FromPatternImage() which allows us to set the image as a pattern throughout the canvas of the UIScrollView.

the strange tale of getting the UIScrollView’s Fixed background in Xamarin… :O

Notice that we are overriding the Draw(CGRect rect) method, this is to have the UIScroll Background Image to be fixed within the boundaries, and not to be spanned across the Content area.

Because usually if we set the BackgroundColor property, it will span across the Content area, but strangely if we override the Draw() method, BackgroundColor would only be contained within UIScrollView’s boundaries, without spanning across the Content area. This is something I figured out while playing around with the above implementation. 😀

Alright let’s jump into Android… 😀

Android Implementation

Now let’s create the Custom Renderer for the Control in Xamarin.Android project.

[assembly: ExportRenderer(typeof(BloopyScrollView), typeof(BloopyScrollViewRenderer))]
namespace WhateverYourNamespace.Droid
{
    public class BloopyScrollViewRenderer : ScrollViewRenderer
    {
        private Bitmap _bitmapImageBackground;

        protected override async void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            this.VerticalScrollBarEnabled = ((BloopyScrollView)e.NewElement).IsVerticalScrollbarEnabled;
            this.HorizontalScrollBarEnabled = ((BloopyScrollView)e.NewElement).IsHorizontalScrollbarEnabled;

            if (((BloopyScrollView)e.NewElement).IsNativeBouncyEffectEnabled)
            {
                this.OverScrollMode = OverScrollMode.Always;
            }

            if (((BloopyScrollView) e.NewElement).BackgroundImage != null)
            {
                // retrieving the Bitmap Image from the ImageSource by converting
                _bitmapImageBackground = await AndroidImageHelper.GetBitmapFromImageSourceAsync(((BloopyScrollView)e.NewElement).BackgroundImage, this.Context);

                // resize the Bitmap to fit the current ScrollView's width and height
                var _resizedBitmapImageBackground = new BitmapDrawable(ResizeBitmap(_bitmapImageBackground, this.Width, this.Height));

                // Set the background Image
                this.Background = _resizedBitmapImageBackground;
            }
        }

        // Resize the Bitmap
        private Bitmap ResizeBitmap(Bitmap originalImage, int widthToScae, int heightToScale)
        {
            Bitmap resizedBitmap = Bitmap.CreateBitmap(widthToScae, heightToScale, Bitmap.Config.Argb8888);

            float originalWidth = originalImage.Width;
            float originalHeight = originalImage.Height;

            Canvas canvas = new Canvas(resizedBitmap);

            float scale = this.Width / originalWidth;

            float xTranslation = 0.0f;
            float yTranslation = (this.Height - originalHeight * scale) / 2.0f;

            Matrix transformation = new Matrix();
            transformation.PostTranslate(xTranslation, yTranslation);
            transformation.PreScale(scale, scale);

            Paint paint = new Paint();
            paint.FilterBitmap = true;

            canvas.DrawBitmap(originalImage, transformation, paint);

            return resizedBitmap;
        }
    }
}

 

The Android ScrollView which is associated with the Xamarin Forms ScrollView has the following native properties:

  • VerticalScrollBarEnabled: Make the vertical scrollbar visible or hidden
  • HorizontalScrollBarEnabled: Make the horizontal scrollbar visible or hidden
  • OverScrollMode: Always enable the native bounce effect on Android ScrollView
  • Background: Allows to set the background drawable for the ScrollView

As you may have noticed we are converting our Xamarin Forms Image Source BackgroundImage to a Bitmap image using our extension.

Then we are resizing out Bitmap image according to the Width and Height of the ScrollView to fit to the full background to be wrapped around a BitmapDrawable and set to the Background of ScrollView.

There you go! 😀

Let’s use it… 😉

Alright now that’s done, let’s consume this in our PCL project.

<StackLayout Padding="10,0,10,0">

	<Label Text="Welcome to Xamarin Forms!"
		   VerticalOptions="Center"
		   HorizontalOptions="Center" />

	<local:BloopyScrollView 
	IsNativeBouncyEffectEnabled="True"
	IsVerticalScrollbarEnabled="False"
	IsHorizontalScrollbarEnabled="False">
	<local:BloopyScrollView.BackgroundImage>
	  <FileImageSource File="xamarinBackgroundImage.png"/>
	</local:BloopyScrollView.BackgroundImage>
	
			<Label
			  FontSize="22"
			  HeightRequest="400"
			  Text=
			  "Whatever your text content to be displayed." />
			  
	</local:BloopyScrollView>

</StackLayout>

 

As you can see I have inserted my BloopyScrollView in a StackLayout and as the content of the ScrollView I have added Label. Well you can add any content you want or set any Height or Width as you wish.

Notice that I have set IsNativeBouncyEffectEnabled to be True as I want to see the native Bouncy effect. Then I have disabled the Vertical and Horizontal Scrollbars from the properties we added earlier. Then finally I have added the BackgroundImage and set the FileImageSource to the ImageSource type, where as I have placed the image in the native Resource folder, as you would do with any defualt Xamarin Forms Image. 😉

Now let’s see the results… 😀

bloopscrollview-on-ios-lowq  bloopscrollview-on-android-lowq

Yaay! 😀

As we expected the Vertical and Horizontal Scrollbars are disabled and our ScrollView has full native bouncy effect accordingly.

Also you can see the Background Image nicely resized itself and fit to the background of the BloopyScrollView. 😀

Happy dance! lol

Recap Stuff…

Now there’s some stuff I wanted to recap, that is you may have noticed that when I was resizing the Image, I needed the Control’s Height and Width, and where I have acquired those properties are in two different places on each Android and iOS renderers.

To be specific I have accessed the Control’s Width and Height on Android right from the OnElementChanged method, but on iOS renderer I have accessed those values from the  OnPropertyChanged method’s Height property event. 

This is because of the differences of the Rendering cycling of Android and iOS, whereas on Android right at the firing of the Custom Renderer it assigns itself Width and Height. But on iOS we have to access them indirectly by waiting till those properties are set, by listening to the OnPropertyChanged event.

Get it on Github! 😀 XFImprovedScrollView

Cheers everyone!

Pass this on to another developer to make them smile! 😀
– Udara Alwis

Why MVVM is Awesome!

I used to be a code behind event driven loving developer! but since I found MVVM, I never looked back, MVVM all the way!

From Code-behind Event-driven addict to MVVM fanatic…

So for a developer who’s coming from a code behind event based implementation loving developer, I understand, adopting MVVM to your application could be pretty confusing and hectic at the beginning!

Because I know it very well by my own experience, whereas I used to be a stubborn noob developer in the good old days thinking Event Driven WinForms approach is the best way to developer software. Which led me to suffocate massively when the code base got bigger and bigger, having massive hard time debugging, maintaining and even upgrading programs I was coding. Honestly I couldn’t understand the cause for this at the beginning due to my stubborn mindset of praising code-behind even driven programming style.

Step 1:

Then when I got into my career I had to force myself to start using MVVM based implementation. And yes it was super confusing and troublesome to understand.

Step 2:

But trust me after a while, step by step,  you start to see how fun it is, makes you feel like wiring up some electronic circuit to get it to work, how all those components gets wired up each other while still having the modules separately.

Step 3:

And you will notice how easy it is to maintain and extend your code base… 😉

Short and sweet,

MVVM stands for Model View View-Model

and it’s AWESOME!

Here is why?

  • MVVM enable true separation between your User Interface(Views) and Logical Code(ViewModel/ Model)! Yes decoupling is ghuuud!
  • Easily handle events with Commands – ICommand
  • Never underestimate the power of INotifyPropertyChanged
  • Take the best use of Binding (View to ViewModel properties)
  • With ViewModel you can easily manipulate Model’s data as you wish and set them to be bound to any Views as you wish and vice versa. Yes it’s that flexible!
  • Yes, the ultimate portability of your project’s components
  • Testing made super easy as the separation between UI and Code behind logic
  • Extremely ease of maintenance and adding changes to your code base

So there you go, a short and sweet post I made during my free time! 😀

hope it helped anyone or may be inspired someone to make the switch! 😉

I am a Developer and I Code with ‪#‎VisualStudio‬ ! ;)

I code with Visual Studio 2

I am a Developer and I Code with #VisualStudio. 😀 Build your own Visual Studio profile today at aka.ms/myVisualStudio!
Yep that’s me, that hyper-active kid in the photo lol 😛
Kudos to whoever created this simply awesome tool. 😀
– Udara Alwis
[ÇøŋfuzëРSøurcëÇødë]

Few words about the ÇøŋfuzëÐ SøurcëÇødë Blogging Style ! ;)

Yes I am a Developer! A Software Engineer by career!

But truth be told, I’m not the typical type of software-engineer-developer-geek ! 😛

I’m a hyper-active, overjoyed, crazy enthusiastic, energized, optimistic human being! 😉

I often go on Adventures, Hiking, Running, Cycling and Basketball, also includes Socializing and talking to People in Public…

I run a lot ! literally like a mad man, and I’m addicted to it. It makes me feel free, refreshed, de-stressed, energized, hyped up, and allows me to push myself beyond the physical limitations. Hence it keeps reminding me that nothing is impossible as long as I keep on pushing myself without giving up.

I enjoy every single moment of my life, seeing the positive perspective of everything that happens around me. And I never regret any decisions I have ever made. I like making others happy and cheering up people around me is something I enjoy a lot. 😀

Yes! obviously I’m always cheered up! 😛 that’s probably the easiest way to recognize me from any crowd lol! 😉

I do a lot of crazy random stuff! 😀

I truly enjoy helping others, teaching others new stuff, I’m not very good at teaching though, but I enjoy engaging in such activities to the fullest.
So basically whenever I’m blogging the same chemical reactions fires up in my brain which is responsible for the above, thereby almost all the time my blog articles ends up being a hyper active conversation lol! 😛

So you may find my blog articles UNPROFESSIONAL most of the time! but I DO NOT CARE! Hence blogging programming articles is something I do for fun and I enjoy it insanely. 😉 And yes this is probably going to be one of the weirdest tech-blogs you have ever seen given my unprofessional-blogging-style! lol 😉
Well I couldn’t care less as long as I share the knowledge across the articles, in a very friendly, easy to understand manner for even a high school kid could understand.

So you got any complains about the ÇøŋfuzëÐ SøurcëÇødë Blogging Style? Don’t bother complaining! 😀 As ÇøŋfuzëÐ SøurcëÇødë wouldn’t ever care! 😛

Cheers!

Stay Awesome fellas! 😀

Oki Dokie… Let’s try out our Xamarin Forms AwesomeListView…

Hope you guy’s recall my previous post on Xamarin Forms Custom Listview with some added awesomeness… 😉 Where I unveiled a listview that is actually awesome ? 😀 Well as promised here is the article about the sample application I will be developing using my AwesomeListView.

Now for this article we will create a small Xamarin Forms app, which is going to load a bunch of dummy contacts to a listview… 😀

Let’s begin…

So this is how it’s all gonna stack up,

capture

As you can see above you need to create a Xamarin Forms project solution. And within that I have separated the code based on MVVM pattern, whereas we will be using the ObservableObject class as the base for handling properychanged and command events. Contacts Page shall be our View which we are gonna fit in our awesome-listview 😉 !

And yes hereby I’m gonna call it AwesomeListView ! 😀

Setting up the Data Source…

First create a Modal class called Contacts. This shall be the modal class for our Contacts items for the listview.

namespace WhateverYourNamespace.Models
{
    public class Contact
    {
        public String Name{ get; set; }
        public String Phone { get; set; }
    }
}

 

Now we need to create a tiny repository class, which will return a bunch of dummy data to be populated in out listview. Well don’t worry ! obviously I wasn’t going to hardcode that by myself, I’m a engineer for my degree certificate’s sake 😛 lol

So we are going to be using this tiny awesome library to generate our dummy data, Faker.Net.Portable ! Surprisingly enough its a pretty cool library which can populate real-like dummy data with ease. You can read all about it on my blog post about it, https://theconfuzedsourcecode.wordpress.com/2015/11/07/wanna-create-an-awesome-dummy-data-set/

Anyways go ahead and add that library to your project from Nuget Package Manager, to your PCL, Xam.Android, Xam.iOS and Xam.WinPhone…

With that now we can set up our data source repository as follows.

namespace WhateverYourNamespace.DataAccess
{
    public class ContactsRepository
	{
        public static List<Contact> FakeContactsList = new List<Contact>();

        public ContactsRepository() 
        {
            for (int i = 0; i < 100; i++)
            {
                try
                {
                    // Generating dummy data and adding to the list 

                    var name = Faker.Name.FullName();
                    var phone = Faker.Phone.CellNumber();

                    FakeContactsList.Add(new Contact { Name = name, Phone = phone });
                }
                catch (Exception)
                {

                }
            }
        }
    }
}

 

In our ContactsRepository class we are going to be having a List items source with a static reference, and in the runtime we will populate our fake data in the constructor and add them to the static list.. Pretty straight forward ! 😀

Setting up the ViewModel…

Now we need to set up our ViewModel classes for the Listview to be used, therefore we shall begin by creating the base ObservableObject class which is going to be an abstract with the INotifyPropertyChanged handlers.

namespace WhateverYourNamespace.Core
{
    public abstract class ObservableObject : INotifyPropertyChanged
    {
        public virtual event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            var handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

 

Now let’s dive into our ViewModel, whereas we shall be creating the ContactsPageViewModel which is to be used with the Awesome-Listview of ours. 😉 Now just for the case of article, I will provide you with section by section of the whole ViewModel as shown below… So if you are already writing the code while reading this article, I suggest you keep including the code snippets which will be given in this article, step by step just as it is.. 😉

Constructor and Private Values for the ViewModel

Below is the constructor and the private values to  be used in our ViewModel…

namespace WhateverYourNamespace.ViewModels
{
    class ContactsPageViewModel : ObservableObject
    {
        private readonly INavigation _navigation;
        private List<Contact> _repository;
        private ObservableCollection<Contact> _contactsList;
        private bool _isBusy;
        private bool _isFree;
        private bool _isLoadMoreEnabled;
        private bool _isDataListEmpty;
        private string _filterBy;
        private int _loadedCount;
        private Contact _selectedContact;

        public ContactsPageViewModel(List<Contact> repository, INavigation navigation)
        {
            LoadMoreContactsCommand = new Command(LoadMoreContacts);

            _repository = repository;
            _navigation = navigation;
            _loadedCount = 0;
            _filterBy = "FILTER1";
            IsBusy = false;
            _isDataListEmpty = false;
            _isLoadMoreEnabled = true;

            LoadMoreContacts();
        }
		
	// Properties Section //
		
	// Commands Section //
		
	// Methods Section //
     }
}

 

As you can see, we shall be passing in a List of Contacts as the Item Repository, which is to be used for providing data for each loading cycle of the list view. I have also instantiated a Command property there in the constructor, which shall be explained in the coming paragraphs of this article. And as for the rest of Private variables and their default values, you will get the idea in the next section…

// Properties // for the ViewModel

Below are the Properties which should be included in the above ViewModel class (right underneath the Constructor would be idea 😉 )

#region Properties

/// <summary>
/// Gets or Sets the ContactsList value
/// </summary>
public ObservableCollection<Contact> ContactsList
{
	get { return _contactsList ?? (_contactsList = new ObservableCollection<Contact>()); }
}

/// <summary>
/// Gets or Sets the Filter String value, used for filtering the loaded results...
/// </summary>
public string FilterBy
{
	get { return _filterBy; }
	set
	{
		_filterBy = value;
		FilterAndReLoadContacts();
		OnPropertyChanged();
	}
}

/// <summary>
/// Gets or Sets the currently loaded items count
/// </summary>
public int LoadedCount
{
	get { return _loadedCount; }
	set
	{
		_loadedCount = value;
		OnPropertyChanged();
	}
}

/// <summary>
/// Gets or Sets the Selected Contact Item in the list
/// </summary>
public Contact SelectedContact
{
	get { return _selectedContact; }
	set
	{
		_selectedContact = value;
		GoToContactDisplayPage();
		OnPropertyChanged();
	}
}

/// <summary>
/// Gets or Sets the IsBusy value, used for disabling any UI Control while loading data...
/// </summary>
public bool IsBusy
{
	get { return _isBusy; }
	set
	{
		_isBusy = value;
		OnPropertyChanged();
	}
}

/// <summary>
/// Gets or Sets the IsFree value, used for re-enabling any UI Control after loading data (opposite of IsBusy) ...
/// </summary>
public bool IsFree
{
	get { return _isFree; }
	set
	{
		_isFree = value;
		OnPropertyChanged();
	}
}

/// <summary>
/// Gets or Sets IsLoadMoreEnabled value, used for disabling Load More button when no results available
/// </summary>
public bool IsLoadMoreEnabled
{
	get { return _isLoadMoreEnabled; }
	set
	{
		_isLoadMoreEnabled = value;
		OnPropertyChanged();
	}
}

/// <summary>
/// Gets or Sets the IsDataListEmpty value, used For displaying empty result set.
/// </summary>
public bool IsDataListEmpty
{
	get { return _isDataListEmpty; }
	set
	{
		_isDataListEmpty = value;
		OnPropertyChanged();
	}
}

#endregion

 

Those are the properties as said, and I have given a small description for each property and its use, so I hope I wouldn’t have to give much of an explanation here… 🙂 I hope those above properties may solve the mystery regarding the private methods used in the Constructor.

// Commands // for the ViewModel

Below is the command that we will be implementing in the ViewModel.

#region Commands

public ICommand LoadMoreContactsCommand { get; set; }

#endregion

 

Hope you remember we instantiated a command in the Constructor of our ViewModel, yes this is the command we are using there.

If you are done including the Commands let’s move into the Methods implementation.

// Methods // for the ViewModel

Below are the set of methods which should be included in the ViewModel.

#region Methods

private async void LoadMoreContacts()
{
	if (IsBusy)
	{
		return;
	}

	IsBusy = true;
	IsFree = false;

	try
	{
		await Task.Delay(2000);

		// Check if the data source is empty 
		if (_repository.Count == 0)
		{
			IsDataListEmpty = true;
			IsLoadMoreEnabled = false;

			IsBusy = false;
			IsFree = true;

			return;
		}

		// Check if all the items in the source are loaded to UI
		if (ContactsList.Count == _repository.Count)
		{
			IsLoadMoreEnabled = false;

			IsBusy = false;
			IsFree = true;

			return;
		}


		int LoadBeginIndex = 0;
		int LoadEndIndex = 10;

		// Setting the Begin Index for 2nd hit and forward
		if (ContactsList.Count != 0)
		{
			LoadBeginIndex = ContactsList.Count;
		}

		// Check if the Current Loading Rage is with in the data set size
		if (LoadEndIndex > (_repository.Count - ContactsList.Count))
		{
			LoadEndIndex = (_repository.Count - ContactsList.Count);
		}

		// Loading the selected data set to the UI
		var characters = _repository.GetRange(LoadBeginIndex, LoadEndIndex);
		foreach (var character in characters)
		{
			ContactsList.Add(character);
		}

		LoadedCount = ContactsList.Count;
	}
	catch (Exception ex)
	{

	}

	IsBusy = false;
	IsFree = true;
}

private async void FilterAndReLoadContacts()
{
	if (IsBusy)
	{
		return;
	}

	IsBusy = true;
	IsFree = false;

	try
	{
		// Include your Filtering algorithm ...

		// You could filter the ContactsList in 
		// any order you wish and reset it back to it
	}
	catch (Exception ex)
	{

	}

	IsBusy = false;
	IsFree = true;
}

private async void GoToContactDisplayPage()
{
	if (SelectedContact == null)
		return;

	//Code to navigate the user to any other new Page to view details of the selected item
}

#endregion 

 

Now as you can see above, LoadMoreContacts() is used for loading the next set of results from the Repository object and setting to the ListView. There you can see we are using IsBusy and IsFree properties which is to notify the interface that the background processing is happening, which you could use to wire up to some UI controllers and use them as you wish. 🙂 Also you may have noticed the Await Timers inside the method, well that was just to simulate the waiting of the data loading, just for this sample app.

Then I have included the FilterAndReLoadContacts() method just as a skeleton method for you to implement your  own Filtering mechanism.

GoToContactDisplayPage() method will be used to pop up the detailed view of the selected item, which will be called through the SelectedContact property value change.

That’s all for the ViewModel for our Awesome-ListView, next make sure you have set up my AwesomeList in your project…

Setting up the AwesomeListView …

Well if you haven’t yet set up my AwesomeListView, then you better head into my previous article and do that right now and come back to this article to continue. https://theconfuzedsourcecode.wordpress.com/2015/11/10/xamarin-forms-custom-listview-with-some-added-awesomeness/

Alright ! if that’s set up then let’s dive into the MVVM’s “View” code…

Setting up the View …

So we need to set up the View for our MVVM implementation right ? I suggest we create a small ContentPage and include our AwesomeListView in it and do the necessary bindings with the above ViewModel…

Go ahead and create ContactsPage view in your Views folder as follows.

namespace WhateverYourNamespace.Views
{
    class ContactsPage : ContentPage
    {
        ContactsPageViewModel _viewModel;

        AwesomeListView ListView_Contacts = new AwesomeListView(true);

        public ContactsPage()
        {
	    // Defining UI Controls and setting up Bindings
            
            this.Appearing += ContactsPage_Appearing;
        }

        private void ContactsPage_Appearing(object sender, EventArgs e)
        {
            if (ListView_Contacts.ItemsSource == null)
            {
                // Populating the data in Repository
                ContactsRepository repo = new ContactsRepository();

                // Creating the ViewModel with necessary parameters
                _viewModel = new ContactsPageViewModel(ContactsRepository.FakeContactsList, this.Navigation);

                // Setting the created ViewModel to this View
                this.BindingContext = _viewModel;
            }
        }
    }
}

 

Yes we need to create an instance of the ContactsPageViewModel and also an instance of our AwesomeListView. There you can see I’m passing in ‘true’ value to the contructor, which means I’m going to be using the ListView with a ‘Load More’ footer button. 😀

I recommend that inside the Page.Appearing method only we should be setting up our BindingContext as we can make sure that all the UI Controls are loaded, whereas you can see there in the ContactsPage_Appearing() method I’m creating the Datasource – ContactsRepository and passing it into the ViewModel’s constructor. Thereby ending the execution with setting the BindingContext to it.

Nope we are not done yet, we need to Initialization the UI controls inside the Constructor right ? including our AwesomeListView as follow… So replace the above Constructor with the following code snippet.

public ContactsPage()
{
	var ListItemTemplate = new DataTemplate(typeof(TextCell));
	ListItemTemplate.SetBinding(TextCell.TextProperty, "Name");
	ListItemTemplate.SetBinding(TextCell.DetailProperty, "Phone");

	ListView_Contacts.SetBinding(AwesomeListView.ItemsSourceProperty, "ContactsList");
	ListView_Contacts.SetBinding(AwesomeListView.SelectedItemProperty, "SelectedContact");
	ListView_Contacts.SetBinding(AwesomeListView.IsEnabledProperty, "IsFree");
	ListView_Contacts.SetBinding(AwesomeListView.IsBusyProperty, "IsBusy");
	ListView_Contacts.SetBinding(AwesomeListView.IsLoadMoreItemsPossibleProperty, "IsLoadMoreEnabled");
	ListView_Contacts.ItemTemplate = ListItemTemplate;

	ListView_Contacts.SetBinding(AwesomeListView.LoadMoreItemsFooterCommandProperty, "LoadMoreContactsCommand");

	Label lbl_ContactsEmptyAlert = new Label()
	{
		Text = "Sorry ! Contacts list is currently empty... Please check back later...",
		HorizontalOptions = LayoutOptions.CenterAndExpand,
		VerticalOptions = LayoutOptions.CenterAndExpand,
		FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
		XAlign = TextAlignment.Center
	};
	lbl_ContactsEmptyAlert.SetBinding(Label.IsVisibleProperty, "IsDataListEmpty");
	StackLayout StackLayout_ContactsEmptyAlert = new StackLayout
	{
		Children = { lbl_ContactsEmptyAlert },
		Padding = new Thickness(10, 0, 10, 5),
	};
	StackLayout_ContactsEmptyAlert.SetBinding(StackLayout.IsVisibleProperty, "IsDataListEmpty");
	
	Label lbl_LoadedCount = new Label()
	{
		FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)),
	};
	lbl_LoadedCount.SetBinding(Label.TextProperty, "LoadedCount", BindingMode.TwoWay, null, "Loaded {0} items ...");

	if (Device.OS != TargetPlatform.WinPhone)
	{
		this.Padding = new Thickness(5, Device.OnPlatform(5, 0, 0), 5, 5);
	}

	this.Content = new StackLayout
	{
		Children = 
		{
			StackLayout_ContactsEmptyAlert,
			new StackLayout
			{
				Children = 
				{ 
					lbl_LoadedCount
				},
				Padding = new Thickness(10, 0, 0, 0),
			},
			ListView_Contacts
		}
	};

	this.Appearing += ContactsPage_Appearing;
}

 

First we will be creating a small DataTemplate of TextCell, then we shall be initializing our AwesomeListView with the necessary bindings. As you can see above I have set up all the Bindable Properties of our AwesomeListView to the ViewModel’s properties and commands. ItemsSourceProperty, SelectedItemProperty, IsEnabledProperty are quite ordinary properties of a generic ListView, then you can see our custom properties being binded such as, IsBusyProperty, IsLoadMoreItemsPossibleProperty, LoadMoreItemsFooterCommandProperty which are the extra features provided by our AwesomeListView.

The lbl_ContactsEmptyAlert is a label that will show up when the Datasource is empty, based on the IsDataListEmpty property of the ViewModel. I have created a small Label lbl_LoadedCount to show how many items have been loaded to the ListView which also binded to the ViewModel’s LoadedCount property.

Now that should set up everything perfectly, let’s fire it up then…

Finally let’s FIRE IT UP… ! 😉

If you had implemented everything properly, there should be no compilation errors, therefore just hit 5 and watch the magic… 😀

// Here we go…

2

// While loading the data to ListView…

1

// After it reaches the end of the Data source…

3

// When the Data source is empty…

4

Some Wisdom…

Now after everything worked out beautifully, it’s all up to your how you are going to use this and improve it to display in your own App’s… 😉 Just a matter of your Imagination !

As I have mentioned I left the Filtering code blank for you to write your own algorithm, but if you find it hard, here is just a tip, set up a couple of buttons in the View and have them set the value of FilterBy in the ViewModel, where as in the Set event, we are calling the filtering method right ? there catch the certain string value and do the filtering based on that for the ContactsList in the ViewModel.

Inside the LoadMoreContacts() method you could even call a webservice of your choice and have a tiny pagination algorithm set up so you could load the data set by set…

Like I said it’s all just a matter of your Imagination ! 😉

Well there it goes folks, hope this post was helpful for you and prolly saved you some time… 🙂 Please share this among other developers as this may become handy for another developer as well, and you may save their precious time as well…

Cheers folks ! Stay Awesome ! 😀

 

Xamarin Forms Custom Listview with some added awesomeness… ;)

Let me make it obvious, are you looking for a Xamarin Forms Listview that could have awesome features such as Infinite Scrolling, Load More footer button, Activity Indicator, Data Source awareness, and so on ? Alrighto ! then keep on reading my friend… 😉

It’s about to go down! 😛

So there was this one day, I came across implementing a simple Listview with an infinite data loading, whereas when the user reaches the end of the listview scroll, it should automatically load more items to the listview and so on. And easy enough I recalled some article I read through Xamarin Weekly Newsletter sometime back, so my lazy self wanted to look it up and check out the implementation. http://www.codenutz.com/lac09-xamarin-forms-infinite-scrolling-listview/ and yes it was a great tutorial indeed, I ended up finishing the implementation in few hours.
But my boss man wanted me to add a “Load More items” button at the bottom of the listview, instead of having to load items automatically while scrolling.

Well well, it seemed like no more lazing around, and just to make it fun, I took this as an opportunity to create an awesome-Listview with both those capabilities included and few more added sweetness… 😉 So here I am sharing my code as usual… 😀

And yes I must admit that I got inspired by the www.codenutz.com infinite scroll listview and I used his implementation of infinite loading method code in my own improved listview, so a big shout out for the developer of that listview. 🙂 You can check his github from here. Codenutz.XF.InfiniteListView

behold the AwesomeListView …

Now I shall reveal the Awesome-ListView of mine… 😀 and yes of course I literally named it the AwesomeListView ! lol

Instead of chunks of the code, I shall post the entire code at once, so anyone could easily use it upon their wish.. 😉

namespace WhateverYourNamespace.Controls
{
    /// <summary>
    /// A simple listview that exposes a bindable command to allow infinite loading behaviour.
    /// Along with Footer 'Load more' items button functionality and Auto Disable functionality
    /// </summary>
    public class AwesomeListView : ListView
    {
        Button btn_LoadMoreItems;

        ActivityIndicator ActivityIndicator_LoadingContacts;

        /// <summary>
        /// Constructor - Pass in true/false to visible/hide Listview Footer 'Load more' items button
        /// </summary>
        /// <param name="IsLoadMoreFooterVisible"></param>
        public AwesomeListView(bool IsLoadMoreItemsFooterVisible = false)
        {
            ActivityIndicator_LoadingContacts = new ActivityIndicator
            {
                Color = Color.FromHex("#FF3300"),
                IsRunning = true,
                HorizontalOptions = LayoutOptions.FillAndExpand,
            };
            
            if (IsLoadMoreItemsFooterVisible)
            {
                // Setting up 'Load More' items footer

                btn_LoadMoreItems = new Button
                {
                    Text = "Load More... ",
                    TextColor = Color.White,
                    BackgroundColor = Color.FromHex("#0066FF"),
                    BorderRadius = 0,
                    BorderWidth = 0,
                    BorderColor = Color.FromHex("#0066FF"),
                    VerticalOptions = LayoutOptions.EndAndExpand,
                    HorizontalOptions = LayoutOptions.FillAndExpand,
                };
                btn_LoadMoreItems.Clicked += btn_LoadMoreItems_Clicked;

                this.IsLoadMoreItemsPossible = true;

                this.Footer = new StackLayout
                {
                    Orientation = StackOrientation.Vertical,
                    Children = { ActivityIndicator_LoadingContacts, btn_LoadMoreItems },
                    Padding = new Thickness(0,5,0,5)
                };
            }
            else
            {
                // Setting up 'Infinite Scrolling' items

                ItemAppearing += AwesomeListView_ItemAppearing;

                this.Footer = new StackLayout
                {
                    Orientation = StackOrientation.Vertical,
                    Children = { ActivityIndicator_LoadingContacts },
                    Padding = new Thickness(0, 5, 0, 5)
                };
            }
        }

        #region UI Control Events

        /// <summary>
        /// Click event of Listview Footer 'Load More' items button
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btn_LoadMoreItems_Clicked(object sender, EventArgs e)
        {
            if (LoadItemsMoreFooterCommand != null && LoadItemsMoreFooterCommand.CanExecute(null))
                LoadItemsMoreFooterCommand.Execute(null);
        }

        /// <summary>
        /// List View ItemAppearing event for infinite scrolling
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void AwesomeListView_ItemAppearing(object sender, ItemVisibilityEventArgs e)
        {
            // Checking whether its possible to load more items
            if (!IsLoadMoreItemsPossible)
            {
                return;
            }

            var items = ItemsSource as IList;

            if (items != null && e.Item == items[items.Count - 1])
            {
                if (LoadMoreInfiniteScrollCommand != null && LoadMoreInfiniteScrollCommand.CanExecute(null))
                    LoadMoreInfiniteScrollCommand.Execute(null);
            }
        }

        #endregion

        #region Bindable Properties

        /// <summary>
        /// Gets or sets the property binding that defines whether the list has reached the 
        /// end of the items source thereby declaring its not possible to load more itmes... 
        /// </summary>
        public static BindableProperty IsLoadMoreItemsPossibleProperty = BindableProperty.Create<AwesomeListView, bool>(ctrl => ctrl.IsLoadMoreItemsPossible,
        defaultValue: false,
        defaultBindingMode: BindingMode.TwoWay,
        propertyChanging: (bindable, oldValue, newValue) =>
        {
            var ctrl = (AwesomeListView)bindable;
            ctrl.IsLoadMoreItemsPossible = newValue;
        });

        /// <summary>
        /// Gets or sets the property binding that defines whether the listview is busy 
        /// loading items in the background to the UI
        /// </summary>
        public static BindableProperty IsBusyProperty = BindableProperty.Create<AwesomeListView, bool>(ctrl => ctrl.IsBusy,
        defaultValue: false,
        defaultBindingMode: BindingMode.TwoWay,
        propertyChanging: (bindable, oldValue, newValue) =>
        {
            var ctrl = (AwesomeListView)bindable;
            ctrl.IsBusy = newValue;
        });

        /// <summary>
        /// Respresents the command that is fired to ask the view model to load additional data bound collection.
        /// </summary>
        public static readonly BindableProperty LoadMoreInfiniteScrollCommandProperty = BindableProperty.Create<AwesomeListView, ICommand>(bp => bp.LoadMoreInfiniteScrollCommand, default(ICommand));

        /// <summary>
        /// Respresents the command that is fired to ask the view model to load additional data bound collection.
        /// </summary>
        public static readonly BindableProperty LoadMoreItemsFooterCommandProperty = BindableProperty.Create<AwesomeListView, ICommand>(bp => bp.LoadItemsMoreFooterCommand, default(ICommand));

        #endregion

        #region Propertries

        /// <summary>
        /// Gets or sets the property value that defines whether the list has reached the 
        /// end of the items source thereby declaring its not possible to load more itmes...
        /// </summary>
        public bool IsLoadMoreItemsPossible
        {
            get { return (bool)GetValue(IsLoadMoreItemsPossibleProperty); }
            set
            {
                SetValue(IsLoadMoreItemsPossibleProperty, value);

                // Setting the value to button if it is available
                if (btn_LoadMoreItems != null)
                {
                    btn_LoadMoreItems.IsEnabled = value;

                    // Setting grey color for the button background in disabled state
                    if (!btn_LoadMoreItems.IsEnabled)
                    {
                        if (Device.OS == TargetPlatform.Android || Device.OS == TargetPlatform.iOS)
                        {
                            btn_LoadMoreItems.BackgroundColor = Color.FromHex("#C0C0C0");
                            btn_LoadMoreItems.BackgroundColor = Color.FromHex("#C0C0C0");
                        }
                    }
                    else
                    {
                        if (Device.OS == TargetPlatform.Android || Device.OS == TargetPlatform.iOS)
                        {
                            btn_LoadMoreItems.BackgroundColor = Color.FromHex("#0066FF");
                        }
                    }
                }
            }
        }

        /// <summary>
        /// Gets or sets the property value that defines whether listview is busy loading
        /// items in the background or not
        /// </summary>
        public bool IsBusy 
        {
            get { return (bool)GetValue(IsBusyProperty); }
            set
            {
                SetValue(IsBusyProperty, value);

                // Setting the value to ActivityIndicator
                if (ActivityIndicator_LoadingContacts != null)
                {
                    ActivityIndicator_LoadingContacts.IsVisible = value;
                }
            }
        }

        #endregion

        #region Commands

        /// <summary>
        /// <summary>
        /// Gets or sets the command binding that is called whenever the listview is reaching the bottom items area
        /// </summary>
        public ICommand LoadMoreInfiniteScrollCommand
        {
            get { return (ICommand)GetValue(LoadMoreInfiniteScrollCommandProperty); }
            set { SetValue(LoadMoreInfiniteScrollCommandProperty, value); }
        }

        /// <summary>
        /// <summary>
        /// Gets or sets the command binding that is called whenever user clicks on the 'Load More' footer button in the ListView
        /// </summary>
        public ICommand LoadItemsMoreFooterCommand
        {
            get { return (ICommand)GetValue(LoadMoreItemsFooterCommandProperty); }
            set { SetValue(LoadMoreItemsFooterCommandProperty, value); }
        }

        #endregion
    }
}

 

Alright, I shall discuss some of it’s added awesomeness from one after the other…

Constructor – As you can see above in our  AwesomeListView’s constructor I have defined a boolean parameter, which defines whether you need to use the ListView with the infinite scrolling enabled ? or whether you want to use the ListView with the Load More footer button enabled. This is very easy to use based up on your choice… 😉 When you pass in true it will enable the button and add it to the footer of the listview, along with its button clicks and commands. If not it will use the infinite scrolling feature.

UI Control Events – There are two event handlers, btn_LoadMoreItems_Clicked is for handling the click event of the footer button and the next one AwesomeListView_ItemAppearing is for handling the infinite scrolling. Inside that we have the logic for checking the appearance of the last item in the listview, and based on that the Load more command is fired. Also you may have noticed that it’s checking for a boolean value inside the event, which is to check whether the datasource has the capability to provide more items for the ListView to display. This can also be externally wired up by the ViewModel, and it’s very useful because the ListView won’t be wasting anytime firing up unnecessary data loading calls to the viewmodel when the datasource has no more data to provide.

Bindable Properties – We will be using those Bindable Propoerties to wire up the necessary functionality of this ListView to the outside code. IsLoadMoreItemsPossibleProperty defines whether it’s possible to load more data to the listview or not, based on the values provided by the ViewModel and IsBusyProperty is for defining whether the ListView is busy loading data in the background. And then comes the LoadMoreInfiniteScrollCommandProperty and LoadMoreItemsFooterCommandProperty, which are the Command Properties you could use for binding the ListView commands whether you need to call them based on infinite scroll or from the footer button command. You need to use the command property upon your  choice whether you need the infinite scroll listview or the footer button enabled listview. 😉

Propertries – I have defined a IsLoadMoreItemsPossible property which defines whether its possible to load more items from the data source in the viewmodel. This could be wired up through the above explained bindable property. There you may have noticed that in the setter method I’m setting the value directly to the footer button’s enable property, so that when the ViewModel informs the listview there are no more items to load in the data source, then the Footer load more items button will be disabled automatically. 😀 Then we have the IsBusy property which denotes whether the ListView is busy (actually the ViewModel) loading data from the background service or from the datasource to the UI. This is also used to make visible or hide the ActivityIndicator based on the passed in value of the ViewModel.

CommandsLoadMoreInfiniteScrollCommand and LoadItemsMoreFooterCommand, These are the Commands that will be used for loading data based on whether you have chosen the infinite scroll listview or the footer button enabled listview. These commands will be communicating through the bindable properties I have described above.

How to ?

Here is how you could use this in your own application if you ever find it confusing to implement this AwesomeListView… 😉

// Pass in the parameter defining whether you need the Infinite scroll or load more footer enabled
AwesomeListView ListView_Contacts = new AwesomeListView(true);

// Whatever your item template
var ListItemTemplate = new DataTemplate(typeof(TextCell));
ListItemTemplate.SetBinding(TextCell.TextProperty, "Name");
ListItemTemplate.SetBinding(TextCell.DetailProperty, "Phone");

// Setting the bindings for the AwesomeListView from your ViewModel as you please..
ListView_Contacts.SetBinding(AwesomeListView.ItemsSourceProperty, "ContactsList");
ListView_Contacts.SetBinding(AwesomeListView.SelectedItemProperty, "SelectedContact");
ListView_Contacts.SetBinding(AwesomeListView.IsEnabledProperty, "IsFree");
ListView_Contacts.SetBinding(AwesomeListView.IsBusyProperty, "IsBusy");
ListView_Contacts.SetBinding(AwesomeListView.IsLoadMoreItemsPossibleProperty, "IsLoadMoreEnabled");
ListView_Contacts.ItemTemplate = ListItemTemplate;

ListView_Contacts.SetBinding(AwesomeListView.LoadMoreItemsFooterCommandProperty, "LoadMoreContactsCommand");

 

Now how about you wanted to use the infinite scrolling functionality in our AwesomeListView ? It’s quite simple enough…

// Pass in the parameter defining whether you need the Infinite scroll or load more footer enabled
AwesomeListView ListView_Contacts = new AwesomeListView(false);

// Setting the bindings for the AwesomeListView from your ViewModel as you please..
ListView_Contacts.SetBinding(AwesomeListView.LoadMoreInfiniteScrollCommandProperty, "LoadMoreContactsCommand");

 

Change the constructor parameter to false and wire up the LoadMoreInfiniteScrollCommandProperty to your ViewModel. 😀

Here’s some screenshots of our AwesomeListView in action…

Untitled design

Anyhow I shall write another complete article along with a full example implementation of my AwesomeListView according to the MVVM pattern. Stay tuned fellas ! 😀

Well there it goes folks, hope this post was helpful for you and prolly saved you a lot of time if you were ever intrigued by the same situation I went through… 🙂 Please share this among other developers and you may save another developer’s time as well… 😉

Cheers ! Stay Awesome ^_^ !

How it Feels like to be truly Satisfied and fallen in Love with your Job …

Before I begin, I am currently working as a Software Engineer at an Europe based IT company here in Sri Lanka. And YES ! surprisingly I am truly satisfied with my Job ! 😀

But some of you might be wondering what qualifies me to define the fine line between true job satisfaction and dissatisfaction. To keep it short, I have been to the both ends, and to elaborate let me give you a little insight of my story…

c4ppur4rzkmcg2xl_luefa[1]

So here is my Story…

I finished my degree by the age of 21, and right after that I got job offers from three famous companies in Sri Lanka after successfully passing through all their interviews. So what did I do ? like every other excited-inexperienced-smart graduate, I chose the Job offer with the highest salary and accommodation without considering my passion for innovation, creativity and new technologies as a fresh college graduate.

6935723_orig[1]

Everything was great and going smooth except for the job didn’t turned out to be what I was expecting, so I started to get bored of it. So after completing a considerable work period, I left the job, hoping for a different next step. Learning one of the biggest lessons of my life, when it comes to your Career, never choose money over your life’s passion… 🙂

A Little break for Life…

So for few months, I took a little break, did some freelancing, tried to start off something of my own. But mostly I guess, I just wanted to take a break and refocus on my passion. 🙂 So after two or three months, I got a new Job offer which seemed kind of interesting… 😉 So I thought of giving it a try.

A new Hope…

And I started off working, but I didn’t keep much hopes as I had for my first job, because I didn’t want to get disappointed and suffer later on. But surprisingly after few days of working, I fell in love with that job. I started to love every single day at work. It was the kind of job I have been dreaming to have, filled with innovation, new technologies, and experimentation. And whenever I got home, I couldn’t wait to go back to work the next day… 😉 My life started changing in so many ways since then, and after a long time I was feeling fulfilled about my life…

So starting from having a disappointing career experience and then ending up with a truly satisfied career experience… let me share some of my own Experience of How it Feels like to be Truly Satisfied with your Job… 😀
And Yes, I know this “satisfaction” may or may not last forever or for a long time, as nothing is permanent and everything is constantly changing in this universe by its nature, I’m really valuing and and enjoying it to the fullest while it lasts… After all, change is Inevitable ! 😉 That is Life !

So how does it really Feel ?

Now I should tell you, I have been observing and analyzing my own experience and behaviors regarding this since the beginning whereas I have been collecting facts to write this article since over 9 month. So summing up all the facts, Lemme being… 🙂

You can’t wait till you get back to work next day…

This is the first feeling you will encounter, at the end of the working day, you won’t be able wait till you get back to work on the next day. You prefer staying at office and keep on working even after office hours. Mostly you will wait till the security guards closes the office and shuts down all the light. This used to happen to me all the time, specially during the first 6 months, I was among the last few to leave office. (Later I forced myself not to wait till they close the office lol)
You may get forced to leave office being worried, thinking you couldn’t wait more longer and keep on working. And you may go home after closing the office, but still you will be impatiently waiting till the next day morning to get back to work. 😉

Weekends ? You will be counting hours till Monday!

Oh please, while your friends are waiting for the Weekends to arrive with all their #TBT #TGIF #ThankGodItsFriday and #FinallyItsFriday hashtags, you will hate it when the Weekend arrives. Yes it is true, when you are truly satisfied with your job, you won’t even think of the Weekends to arrive, in fact you wish if there were no weekend. And during your weekends, you will be literally counting hours for it to over and get back to work on Monday! While your friends be like,  #IHateMondays #OhShitItsMonday, and there you would be like all pumped up for work, counting hours for the Monday to begin. The best feeling when you are truly satisfied with your Job is that, when everyone is hating their Mondays at office, you would be loving the Mondays, you would be super energetic and pumped up to begin your work. Yep I know, sounds funny… but that is what happens when you are truly satisfied with your Job ! 😉

You will be like, Thank God It’s Monday #ThankGodItsMonday #TGIM #ILoveMondays…

Simply put, you are gonna love Mondays ! Like I mentioned earlier this is one of the best feelings you would ever encounter. While everyone is hating Mondays, you would absolutely love Mondays, and you would be thanking whoever the guardian higher power you believe in.. 😉 You would be counting hours during weekends and once the Monday arrives, you would be super energetic and pumped up to begin your work while everyone is cursing their Mondays. Personally this is by far one of the best feelings I have ever encountered, because I used to hate Mondays during my previous job, but now I absolutely LOVE MONDAYS ! ❤ 😀

You wish if you could work on Weekends as well…

Yes weirdly enough, you are gonna wish if you could work on Weekends as well. There was this one time I couldn’t bear it up and I asked the manager if I could come to office on Saturdays and keep on working, where he advised me not to even think of it and go out to enjoy real life. lol (whereas later I adopted some habits and activities to do on weekends, such as going out on adventures, cycling, running and so on)
This occurs especially during the first few months of your job once you get satisfied (but later you might find some alternatives to do like I did)… When you are in love with your job, you begin to dislike weekends, and you wish if you could work on Weekends, because simply you are bored of Weekends, having nothing to do, or even if you do have things to do, you would prefer your office work more than them.. 😉 And it gets worst, if you have nothing planned to do on your Weekends, you are going to be bored to death and you will be wishing to get back to work as soon as possible.

Nine to Five routine ? Screw that ! I want more…

Like I mentioned earlier, you are gonna get hungry for your work, you just don’t want the day to end, and specially while your friends are waiting for 5PM to get out of office, you wouldn’t even care about the time. You would simply want to keep on working and you wouldn’t even notice the time moving. And yes this phenomena, I still go through it almost every single day… 😛

You wake up with so much of Energy and Motivation!

Every single morning you will be waking up with so much of Energy and Motivation to go to work, and not only related to work, but also other aspects of your life. You will be pumped up, ready to get back to work every morning when you wake up. You would be ready to go through any challenge at work, and in fact you’ll be on fire at the moment you start working in the morning. With that mentality you get an extra push to set your mind to overcome any challenge or difficulty of your life.

You feel Fulfilled, Happy about Yourself and your Life…

You begin to feel fulfilled about your Life as well as Yourself as a whole, whereas in almost every aspect of your life you begin to feel complete and calm. That feeling of fulfillment and happiness is something truly amazing and very hard to come by for anyone. 😀 We all want to feel fulfilled, about ourselves, and being able to satisfy with your job, plays a huge role in that pursuit. Happiness is something that we all seek for, and let me tell you, when you are satisfied with your Job, you feel an immense amount of happiness throughout your day, whereas Happiness comes as a part of the fulfillment. 😉 You become more optimistic towards life and everything that you go through in your daily life.

You make everyone Happy around you…

With that energy, motivation, fulfillment and happiness comes another benefit, where you begin to make everyone around you Happy ! 🙂 As you become more positive towards every aspect of your life, you begin to direct the same mindset for people around you, your parents, life partner, family, friends and so on. You are always calm and you could easily tolerate anyone around you. You become more positive and cheerful when it comes to dealing with your loved ones so in return you end up making them happy…

Your Efficiency, skyrocketing at work…

One of the best results of being truly satisfied with your job, is that you become more efficient at your workplace, whatever the work you are given, or however challenging it is, you become insanely efficient in it. That very sense of motivation , fulfillment, and happiness become the key ingredients for this amazing force. As you begin to love your work, your efficiency may sky rocket in ways that you won’t even believe. Whatever the work you have given, you would be able to finish it off way better, way quicker in ways you wouldn’t have even thought of before. Your brain gets super focused during your work, that everything becomes so easy to you, that you could easily figure out anything, given any challenge and finish off your work even before the deadlines. Not only that, the quality of your work will begin to improve unbelievably. You will be very much confident in everything you engage with your office work, because you would be doing it with passion for the joy of the job you’re doing. 😉
This effect, I have experienced very well with my work as for the last few months, I have been noticing myself being able to finish almost all the tasks way before deadlines and getting way better at the approach of the work after each and every task. 🙂 Likewise overtime you get insanely efficient with your work, when you are truly satisfied with your job… 😀

…beginning to push through your limits beyond the impossibilities !

Along with all the above incredible side-effects of being in Love with your job, you get an extra super power to push forward through your limits, beyond your own impossibilities… expanding yourself into new horizons of success. 😉 Yep that statement may seem to be a little exaggerated, but yes it is kind of true, with proof of my own experience. You begin to explore more knowledge by yourself, and expand your potential. Personally last few months I was able to easily learn so many new things knowledge related to my career which I thought I never would. 😉
You automatically adopt the ability to learn anything easy without any stress, and rapidly absorb more knowledge and experience by yourself. Therefore your job satisfaction plays a huge role in pushing you forward through life and expanding your possibilities…

Now now…

Now I know the above facts/behaviors/effects/ are based on my own experience and could be easily differ from one person to another, depending on their own perspective, whereas one might have their own different ways of being satisfied with their job, with different experience. But overall I suppose most of these facts or experience are common for those who are actually satisfied or fallen in love with your jobs… 🙂

In Conclusion…

Well to simply put it, as a great man once said…

quote-your-work-is-going-to-fill-a-large-part-of-your-life-and-the-only-way-to-be-truly-satisfied-steve-jobs-14-71-51[1]

It is hard to find a job that you would love or even like it up to some extent, but if you are determined enough, it is not that that hard to find, as it all comes down to our own determination and not giving up on our dreams. 😉

Once you find it, become truly satisfied and you begin to love your job… Your life would begin to change in so many amazing ways that haven’t even thought of before… 😉

Cheers everyone ! Wishing you all Success ! 🙂

Stay Awesome ! 😀

choose-a-job-you-love-and-you-will-never-have-to-work-a-day-in-your-life4[1]

All Images are fetched via Google Search, 2015

Microsoft Azure Notification Hub Diagnostics in Visual Studio…

So the other day I wanted to Monitor some activities in my Azure Notification Hubs, well of course you get the “Monitor” tab in the ANH panel online, but it’s hard to get into details with it as it only shows numerical statistics. I wanted to be more specifically look into the Device registrations, platform types, available Tags usage, registration expiration and so on.

Then quite surprisingly I came through this tool which was sitting right inside Visual Studio this whole time, which I hadn’t noticed before. Behold, the “Azure Notification Hubs Diagnostics” tool in Visual Studio. (Well actually Microsoft hasn’t given it a proper name though 😛 , but I wish if they did…)

Capture22

Capture21

(Sorry I had to blacken out the sensible information 😉 )

Just as a side-note I actually wish if Microsoft included these features in the online Azure Notification Hub Monitoring panel as well.

I’m really surprised why I haven’t noticed about this tool this whole time working with Azure PNH ! Therefore I thought of writing a small article about this awesome tool, if by chance any of you fellow awesome developers had missed on this tool… 🙂

Yes its pretty useful…

With the use of this tool you could do easily accomplish all the following requirements,

  • Easily Send Test/Debug Push Notifications (A huge variety of devices through respective PNS)
  • View all the Device Registrations along with their Platform types, Tags, PNS Identifiers, Registration IDs, and Expiration Days.
  • View all the above info in real time as it updates
  • Edit any Tags of the registered devices
  • Remove any Registrations
  • Sort through your specific Tags of the registered Devices
  • View overall registration stats of each platform
  • and many more uses if you are smart enough… 😉

Yep it’s sitting right here…

Simply go to your Sever Explorer Panel -> Sign into your Azure Account (click on Connect to Microsoft Azure Subscription) -> expand Notification Hubs -> choose your desired Notification Hub -> Right Click -> Diagnose !

Capture20

It will open up the Azure NH diagnostics tool, and let the fun begin… 😉

Sending Test/Debug Push Notifications…

When you open up the Diagnostics, by default it opens up the Test/Debug Push Notification Panel as follows.

Capture23

As I have highlighted above, this option beings some very useful features. You could include the tags you need to include in your test push notification messages easily or if you want to send without tags, you could keep the Broadcast option.

Next you will be surprised that there is a long list of mobile platforms you could choose to send the test notification as shown below.

Capture24

Best yet it also by default generates the sample body, and you just have to insert the required parameters and values, and hit send.

Let’s say if you wanted Widows Phone – Toast type notification ? No problem !

Capture25

oh how about Apple iPhone type notification ? Here you go…

Capture26

Likewise, it is super easy to send test push notifications right from here.

Not only sending. but also viewing their results could be done in a very specific manner, which devices received them, any errors occurred and so on. 😉

Viewing Device Registrations and other Stats…

This awesome tiny tool also allows you to view all of the Device Registrations along with the following very useful information.

  • Platform
  • Registration Type
  • Tags
  • PNS Identifier
  • Registration ID
  • Expiration Date

Now the above information may seem quite preliminary, but still when it comes for serious monitoring and debugging those are very useful.

Capture19

Simply go to the “Device Registrations” tab to navigate to this section and start playing…

Now we all know how much we use tags along with our Azure Notifications, which is an incredible feature that allows us to send targeted push notifications to groups or individual devices. And guess what ? this tool allows you to easily search and filter through any available tags and view those registration information.

Capture24

Also you can easily sort through the above listed information columns (Platform, Registration Type, Tags, etc) by acceding or descending order as you wish, which makes it really easy to monitor and debug.

Capture25

What if you ever wanted to Edit or Remove some registrations or their data in case of an emergency ? Yep you can easily do that from this tool.

Capture24

Yep do you see that tiny set of controls in the top left side of the panel ? It allows you to easily,

  • Edit any available Tags
  • Delete any selected Registrations
  • Refresh the Registrations in real time

which are very much useful when monitoring and debugging push notification processes. 😉

Finally another feature this brings is the overall registration statistics of any given platform, which is useful but not very informative though as much as the “Monitor” tab in the online Azure NH Console.

Capture26

There you go, if you haven’t yet noticed about this useful tool, head in right now and give it a try. I grantee you it will come very handy in cases of monitoring and debugging you push notification related executions… 😉
I still wish if Microsoft had made all the above features available in the online Azure Hub Monitoring section, which I sincerely hope they would do someday.
The above mentioned features may not seem to be advance enough, but still they become very handy and useful and if you are smart enough you could use this for many more other purposes.. 😀

Hope this was helpful for any of your fellow awesome developers out there… 🙂

CHEERS ! Stay Awesome ! ^_^

UPDATE 26/10/2015 : 

One of our readers @milenppavlov has suggested another great tool for even more detailed diagnostics for Azure Notification Hub. And yes I agree with him, it seem to be a very useful tool. So if any of you are looking for more specific diagnostics try his recommendation here. https://code.msdn.microsoft.com/windowsapps/Service-Bus-Explorer-f2abca5a