Category Archives: App Development

A MVVM-styled Service for my Await-able Custom Input Dialogs (XFCustomInputAlertDialog)

So a lot of folks asked me regarding my previous post, An Await-able Transparent, Custom, Popup Input Dialog in Xamarin.Forms! 😉 how they could implement this awesomeness in a MVVM-friendly manner in Xamarin.Forms, instead of having to deal with dirty code-behind ugliness.

Frankly I did the above original implementation in a MVVM-manner, given myself being a MVVM-practitioner, but since there are a lot of newbie Xamarin devs out there, I thought it would help if I push it out there in the simplest manner for the newbies to understand without a hassle.

Anyhow in order to do some justice for the Xamarin-Forms-MVVM practitioners out there, including myself 😉 here I am pushing out how to implement the same awesomeness in Xamarin-Forms MVVM environment in a beautiful code manner! 😀 ❤

Service FTW!

When it comes to dealing with MVVM environments, Services are crucial, which is what we’re going to leverage our previous implementation to.

So we could call up this service from anywhere across our shared code.

This demonstration…

We shall be using Prism as the MVVM framework for this demo Xamarin.Forms project because its awesome! 😉

And create a Service implementation for our XFCustomInputAlertDialog, which we’ll be register with the Prism’s default IoC container.

Rest is pure magic! lol 😉

PS: I shall not be spoon feeding from this post about MVVM or how to set up MVVM framework in Xamarin.Forms, I shall assume you have solid knowledge on MVVM based Xamarin.Forms implementations. 🙂

If you want to be ahead of all, you can grab the Github code from here: https://github.com/UdaraAlwis/XFInputAlertDialogService

Yep this time I’ve created a separate repo for the project. Alright then let’s get started!

Let’s do it…

Taking a step by step approach…

1. Prism MVVM Setup

Add Prism for Xamarin.Forms to your project and do the primarily set up for Prism MVVM framework. (if you’re unaware of how to do this, there’s plenty of tutorials and blog posts online about setting up Prism for Xamarin.Forms)

This also means you’re to set up the Views and ViewModels for the Project. (ex: MainPage -> MainPageViewModel).

2. Set up XFCustomInputAlertDialog basics

There’s few basic things you need to set up from my previous post as follows, and you can go back take a look at that post for these steps,  An Await-able Transparent, Custom, Popup Input Dialog in Xamarin.Forms! 😉

  • Setting up Rg.Plugins.Popup library
  • Create InputAlertDialogBase control
  • Create your Custom Input Views as you wish
  • Manage code-behind of your Custom Input Views

That’s it! nothing more! Alright let’s get started off with leveraging to MVVM!

3. Creating the Service…

So we shall create the service for our Custom Alert Dialogs. We shall call it InputAlertDialogService, thereby start off by creating the interface, IInputAlertDialogService with required methods.

namespace XFInputAlertDialogService.Interfaces
{
    public interface IInputAlertDialogService
    { 
        /// <summary>
        /// Open Text Input Alert Dialog
        /// </summary>
        /// <param name="titleText"></param>
        /// <param name="placeHolderText"></param>
        /// <param name="closeButtonText"></param>
        /// <param name="validationLabelText"></param>
        /// <returns></returns>
        Task<string> OpenTextInputAlertDialog(
            string titleText, string placeHolderText,
            string closeButtonText, string validationLabelText);
			
	
	//add other types of dialog open methods from here..
	// Task<string> OpenCancellableTextInputAlertDialog(...)
	// Task<string> OpenSelectableInputAlertDialog(...)
	// ...
	// ...
    }
}

 

You can add any amount of Service method calls to the interface which you can use to implement the concrete implementation.

github.com/XFInputAlertDialogService/…/Interfaces/IInputAlertDialogService.cs

Next let’s create the concrete implementation of our service, InputAlertDialogService.

namespace XFInputAlertDialogService.Services
{
    public class InputAlertDialogService : IInputAlertDialogService
    {
        public async Task<string> OpenTextInputAlertDialog(
            string titleText, string placeHolderText,
            string closeButtonText, string validationLabelText)
        {
            // create the TextInputView
            var inputView = 
               new TextInputView(titleText, placeHolderText,
                   closeButtonText, validationLabelText);

            // create the Transparent Popup Page
            // of type string since we need a string return
            var popup = new InputAlertDialogBase<string>(inputView);

            // Add the rest of Popup 
	    // Dialog display code below...
	    // just as in XFCustomInputAlertDialog
	    // ...
        }

        //add other types of dialog open methods from here..
        // ...
    }
}

 

There we are inheriting from our interface and doing the necessary concrete implementation. You will add the Popup Dialog instantiating and pushing to the navigation stack logic as you did in XFCustomInputAlertDialog code. Since its going to be repeated I’m not going to post the same code snippet here.

You can take a quick peak in the Gitub Repo though 😉

github.com/XFInputAlertDialogService/…/Services/InputAlertDialogService.cs

Then we need to register our Service Interface and Concrete implementation in the Prism’s default Unity Container.

namespace XFInputAlertDialogService
{
	public partial class App : PrismApplication
	{
		public App
		(IPlatformInitializer initializer = null) :
		base(initializer) { }

		protected override void RegisterTypes()
		{
			...
			
			// services registration
		    Container.RegisterType<IInputAlertDialogService,
			InputAlertDialogService>();
		}
		
		...
	}
}

 

There you go, the service layer is now ready! 😀

4. Consuming the Service…

Now let’s consume our Custom Popup Dialog Service in the ViewModel. First let’s inject it to the ViewModel and prepare it to be used when you need it.

public class MainPageViewModel 
	: BindableBase, INavigationAware
{
	private readonly 
	IInputAlertDialogService _inputAlertDialogService;
	
	public MainPageViewModel(
	IInputAlertDialogService inputAlertDialogService)
	{
		...
	
		_inputAlertDialogService = inputAlertDialogService;
		
		...
	}

        ...
}

 

Thanks to the IoC pattern, look at that beautiful and clean code. 😉

Now you’re ready to invoke the awesome custom popup dialogs from anywhere in your ViewModel. Let’s do that as the final step, shall we?

var result = await 
	_inputAlertDialogService.OpenTextInputAlertDialog(
	"What's your name?",
	"enter here...", 
	"Ok",
	"Ops! Can't leave this empty!");

 

If you don’t get the hint, you can simply create a Command in your ViewModel and bind that to a Button or something in your View and add the above call to the Command’s execution method as shown below. 😉

public DelegateCommand 
		OpenTextInputAlertDialogCommand { get; set; }

public MainPageViewModel(
	IInputAlertDialogService inputAlertDialogService)

{
	...
	
	OpenTextInputAlertDialogCommand = new DelegateCommand(OpenTextInputAlertDialog);
	
	...
}

private async void OpenTextInputAlertDialog()
{
	var result = await 
		_inputAlertDialogService.OpenTextInputAlertDialog(
		"What's your name?",
		"enter here...", 
		"Ok",
		"Ops! Can't leave this empty!");
}

 

There you go pure MVVM-Xamarin.Forms goodness! 😀

If you’re one of the lazy you can grab the whole code from Github: https://github.com/UdaraAlwis/XFInputAlertDialogService

Well fellas, that’s it!

Enjoy! 😀 Share the love!

-Udara Alwis 😀

An Await-able Transparent, Custom, Popup Input Dialog in Xamarin.Forms! ;)

Imagine you wanted to prompt your user with a popup alert dialog (which is also transparent, because its cool! lol) 😉 asking them to enter some value and you want to await the whole task (make it awaitable) while you’re at it, so the execution will halt until the user enter the value, and then retrieve the user entered value to the point of origin? 😀

And just to add some sugar to it, may be you wanted to customize and decorate the appearance of the input view?

Something like this?

Seems pretty cool yeah! That’s what I’m gonna share today!

Right outta Xamarin.Forms?

Now there’s no way you could do either of those things in that scenario right out of Xamarin.Forms! Nope, not with a Modal Popup, which doesn’t support transparency, and not even with DisplayAlerts or ActionSheets, since the’re not customizable, they don’t allow text input or any kind of custom input view, only multiple button selections.

So how could I do it?

Let me explain fellas!

So for transparency and ultimate flexibility of setting up custom popup views, we are going to use the awesome Rg.Plugins.Popup library for Xamarin.Forms and to make the whole Task awaitable let’s use a TaskCompletionSource (Thank you dot net)! 😉

So the trick here for adding custom input views to the popup page, is by creating our Xamarin.Forms custom views using a ContentView and set them to the Content of popup page.

Alright then time for some coding!

Let the coding begin…

But first, setting up!

First thing first create a Xamarin.Forms PCL project in Visual Studio. 🙂

Then install Rg.Plugins.Popup library for Xamarin.Forms through Nuget Package manager.

I’ve actually written a blog post about Rg.Plugins.Popup in my blog right here: So I created a Popup with Transparent background in Xamarin Forms… 😉

Create the Transparent Popup Page…

Once you’re done with that, let’s create our custom Transparent Popup Page using the Rg.Plugins.Popup we just installed.

Something to keep in mind,

  • We should allow it to use Generic data types as for the return data type. 😀
  • Popup page provides us with many cool features, including Page background click handling and back button press handling, which we will override as of disable page background click to dismissal and disable back button press cancellation.
  • Pass in a View and set it to the PopupPage’s Content property, which we will attach the custom input view we want to use in our popup page.
  • Set the transparency level to 0.4 of alpha value.

Let’s call it InputAlertDialogBase.

/// <summary>
/// The awesome Transparent Popup Page
/// sub-classed from Rg.Plugins.Popup
/// Customized for our usecase with
/// Generic data type support for the result
/// </summary>
/// <typeparam name="T"></typeparam>
public class InputAlertDialogBase<T> : PopupPage
{
	public InputAlertDialogBase(View contentBody)
	{
		Content = contentBody;

		this.BackgroundColor = new Color(0, 0, 0, 0.4);
	}

	// Method for animation child in PopupPage
	// Invoced after custom animation end
	protected override Task OnAppearingAnimationEnd()
	{
		return Content.FadeTo(1);
	}

	// Method for animation child in PopupPage
	// Invoked before custom animation begin
	protected override Task OnDisappearingAnimationBegin()
	{
		return Content.FadeTo(1);
	}

	protected override bool OnBackButtonPressed()
	{
		// Prevent back button pressed action on android
		//return base.OnBackButtonPressed();
		return true;
	}

	// Invoced when background is clicked
	protected override bool OnBackgroundClicked()
	{
		// Prevent background clicked action
		//return base.OnBackgroundClicked();
		return false;
	}
}

 

There you go, over to the next step!

Configure the await-able Task properties…

So let’s create a Task and TaskCompletionSource inside our InputAlertDialogBase, to handle await-ability of our “Transparent, Custom, Popup Input Dialog” as I’ve mentioned in the blog title! 😉

public class InputAlertDialogBase<T> : PopupPage
{
	// the awaitable task
	public Task<T> PageClosedTask { get { return PageClosedTaskCompletionSource.Task; } }

	// the task completion source
	public TaskCompletionSource<T> PageClosedTaskCompletionSource { get; set; }

	public InputAlertDialogBase(View contentBody)
	{
		...

		// init the task completion source
		PageClosedTaskCompletionSource = new System.Threading.Tasks.TaskCompletionSource<T>();

		...
	}

	...
}

 

Note that how we are initializing the TaskCompletionSource in the Constructor.

Alright, now our Transparent Popup is ready. Next we need to construct the Custom Input View, that we are going to pass into the InputAlertDialogBase to display and retrieve data input (text or any kind) from the User. 😀

Create your Custom Input View! 😀

Alright this step is totally up to your desires, you could construct any kind of a Custom Input View to be displayed on top of the InputAlertDialogBase we just created above, and retrieve the User’s inputs.

So for this example, let’s create a simple View with Title Label, Text Entry and Ok button yeah! 😉 Also let’s add a simple validation Label inside it to show up if the User tries to leave the Text Entry empty and hit the ok button to quit.

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
    x:Class="XFCustomInputAlertDialog.InputViews.TextInputView"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <ContentView.Content>
        <StackLayout
            Padding="10"
            BackgroundColor="White"
            HorizontalOptions="CenterAndExpand"
            Spacing="5"
            VerticalOptions="CenterAndExpand">
            <Label
                x:Name="TitleLabel"
                FontSize="Medium"
                Text="Enter the value:" />
            <Label
                x:Name="ValidationLabel"
                FontSize="Micro"
                IsVisible="False"
                Text="You can't leave this field empty!"
                TextColor="Red" />
            <Entry x:Name="InputEntry" Placeholder="Enter Here..." />
            <Button x:Name="CloseButton" Text="Ok">
                <Button.HeightRequest>
                    <OnPlatform x:TypeArguments="x:Double">
                        <On Platform="Android" Value="40" />
                        <On Platform="iOS" Value="30" />
                    </OnPlatform>
                </Button.HeightRequest>
            </Button>
        </StackLayout>
    </ContentView.Content>
</ContentView>

 

As you can see we have created a simple ContentView with a custom Text input view! 😀

Notice that we have explicitly named all the elements and added a button click event, this is to make it easy to set custom textual values to the elements and to handle the OK button’s click event as for the closing of the Popup Page. 🙂

Pretty simple yeah, next let’s handle the back end of this custom View to manage the Textual values, Ok button’s click event and validations.

Let’s manage code-behind of Custom Input View…

Now this is important, if you consider a ContentView, all it’s Child elements are private to it’s class scope, so we can’t observe or interact with any of the property value changes or behaviors from outside of the View.

Therefore we need to create custom properties that will expose those required values and events to the public.

Something to keep in mind here,

  • In order to customize the values displayed in the Child elements of the ContentView (Label,Button, etc..) we should pass in the values to the Constructor and set them to the Child elements there.
  • We should create a public EventHandler to handle the Ok Button’s click event from outside the View and add a public string Propery to expose the text Entry’s value to the public.
  • Subscribe to the Entry’s TextChanged event to reflect the value the public string property.
  • Create a public bindable Boolean property to display or hide Validation label in the ContentView. Or you could handle this internally in the View on the Ok Button’s click event as well, but it would be nice if we could expose the Validations to public so we could handle it outside the View.

public partial class TextInputView : ContentView
{
	// public event handler to expose 
	// the Ok button's click event
	public EventHandler CloseButtonEventHandler { get; set; }

	// public string to expose the 
	// text Entry input's value
	public string TextInputResult { get; set; }

	public TextInputView(string titleText, 
          string placeHolderText, string closeButtonText, 
           string validationLabelText)
	{
		InitializeComponent();

		// update the Element's textual values
		TitleLabel.Text = titleText;
		InputEntry.Placeholder = placeHolderText;
		CloseButton.Text = closeButtonText;
		ValidationLabel.Text = validationLabelText;

		// handling events to expose to public
		CloseButton.Clicked += CloseButton_Clicked;
		InputEntry.TextChanged += InputEntry_TextChanged;
	}

	private void CloseButton_Clicked(object sender, EventArgs e)
	{
		// invoke the event handler if its being subscribed
		CloseButtonEventHandler?.Invoke(this, e);
	}

	private void InputEntry_TextChanged(object sender,
					TextChangedEventArgs e)
	{
		// update the public string value 
		// accordingly to the text Entry's value
		TextInputResult = InputEntry.Text;
	}
}

 

So you can see we are passing in all the required values to set to our Child element’s we are passing in to the Constructor and setting them up there. Also we are subscribing to the Ok Button’s OnClick event and text Entry’s TextChanged event.

Inside the CloseButton_Clicked() event we are invoking the public EventHandler CloseButtonEventHandler if it’s being subscribed to by outside.

As well as  the Entry’s InputEntry_TextChanged() event we are updating the public TextInputResult to reflect the Entry’s text value to the public.

Don’t forget to handle Validations…

Oh and here’s the Bindable Boolean property you should include inside the TextInputView code behind to handle the Validations from outside the View.

public partial class TextInputView : ContentView
{
	...
	
	public static readonly BindableProperty 
           IsValidationLabelVisibleProperty =
		BindableProperty.Create(
			nameof(IsValidationLabelVisible),
			typeof(bool),
			typeof(TextInputView),
			false, BindingMode.OneWay, null,
			(bindable, value, newValue) =>
			{
				if ((bool)newValue)
				{
					  
		((TextInputView)bindable).ValidationLabel
					 .IsVisible = true;
				}
				else
				{
					 
		((TextInputView)bindable).ValidationLabel
					.IsVisible = false;
				}
			});

	/// <summary>
	/// Gets or Sets if the ValidationLabel is visible
	/// </summary>
	public bool IsValidationLabelVisible
	{
		get
		{
			return (bool)GetValue(
                             IsValidationLabelVisibleProperty);
		}
		set
		{
			SetValue(
                         IsValidationLabelVisibleProperty, value);
		}
	}
	
	...
}

 

Now speaking of the bindable IsValidationLabelVisibleProperty, we are updating the Validation Label’s visibility based on its value changes accordingly. 🙂

Following this method, you can create any kind of custom Input Views to be attached to our Transparent Popup Page. 🙂 All you need to do is expose the required Values and Events to the public.

Alright next step…

Time to assemble everything and consume it!

Now we are going to put everything together and get it to be used as our “awaitable Transparent, Custom, Popup Input Dialog”! 😉

Somethings to keep in mind here,

  • We need to initialize our TextInputView by passing in the parameters we would like the necessary child elements to display
  • Create an InputAlertDialogBase<string>(), yes of type string, since we are going to return a string from the Popup Alert.
  •  Subscribe to the CloseButtonEventHandler of TextInputView’s instance to handle validation and reflect the Text input value to the TaskCompletionSource.
  • Push the popup page instance to Navigation Stack and await the page’s Task
  • Upon result retrieval Pop the page from Stack and return the user inserted value.

Alright let’s do it…

private async Task<string> LaunchTextInputPopup()
{
	// create the TextInputView
	var inputView = new TextInputView(
		"What's your name?", "enter here...", 
		"Ok", "Ops! Can't leave this empty!");

	// create the Transparent Popup Page
	// of type string since we need a string return
	var popup = new InputAlertDialogBase<string>(inputView);

	// subscribe to the TextInputView's Button click event
	inputView.CloseButtonEventHandler +=
		(sender, obj) =>
		{
			if (!string.IsNullOrEmpty(
                         ((TextInputView)sender).TextInputResult))
			{
				
                            ((TextInputView)sender)
                               .IsValidationLabelVisible = false;
				
                            // update the page completion source
                            popup.PageClosedTaskCompletionSource
                                .SetResult(
                                ((TextInputView)sender)
                                      .TextInputResult);
			}
			else
			{
				
                             ((TextInputView)sender)
                                 .IsValidationLabelVisible = true;
			}
		};

	// Push the page to Navigation Stack
	await PopupNavigation.PushAsync(popup);

	// await for the user to enter the text input
	var result = await popup.PageClosedTask;

	// Pop the page from Navigation Stack
	await PopupNavigation.PopAsync();

	// return user inserted text value
	return result;
}

 

There you go, step by step as I explained before you can see how it’s being consumed. Specially inside the CloseButtonEventHandler, every time the event fires we are checking the TextInputResult property and enabling or disabling the IsValidationLabelVisible property, as well as updating the PageClosedTaskCompletionSource property value if a text value is being entered by the User, which will in return update the awaiting PageClosedTask and task will proceed to completion state, then return the value after popping the Page. 😀

There you go! 😀 How straight forward is that! 😉

Keep in mind like I said before you can add any kind of a customized View on top of our Transparent Popup Page, and retrieve any kind of result as you expect from the User following the same steps. 😀

Let’s see this in action…

 

Look at that coolness right! 😉

Since it’s full on Xamarin.Forms, and doesn’t have a single line of native code, you could straight up run this implementation on all Android, iOS, UWP, WinPhone as you wish! 😀

I want more! 😮

Alright now that’s just a little bit of basic head start of what you could do, whereas if you get creative and smart you could do a lot more cool stuff like this…

  

 

 

There you have it, some cool stuff I played around with my implementation. 😉

You can grab the Github code from here: github.com/UdaraAlwis/XFCustomInputAlertDialog

Well fellas, that’s it for now!

Enjoy! 😀 Share the love!

-Udara Alwis 😀

Wait… How could I handle Click event of a Custom Renderer Button in Xamarin Forms ? :|

Now we all know how Xamarin allows your to override the renderering process of any given UI control from native level and do any sort of modifications through Custom Renderers.

Completely overriding Xamarin Forms Control in Custom Renderer?

It even allows you to completely override the whole Control that’s associated with Xamarin Forms type Control and replace it with a completely native type Control. Specifically in cases like where you override the Control property with SetNativeControl() method in your Custom Renderer.

But when you do that…

But what happens when you complete replace and override the associated default control for your renderer is that, you will lose the access to Events of that particular control.

To be specific…

Let’s take a look at the following Custom Renderer…

[assembly: ExportRenderer(typeof(CustomButton), typeof(CustomButtonRenderer))]
namespace WhateverYourNamespace.Droid
{
    public class CustomButtonRenderer : ButtonRenderer
    {
        protected override async void OnElementChanged(ElementChangedEventArgs<CustomButton> e)
        {
            base.OnElementChanged(e);
            
            if (e.NewElement != null)
            {
		Android.Widget.Button nativeButton = new Android.Widget.Button();
			
                SetNativeControl(nativeButton);
            }
        }
     }
}

 

There you can see we are completely replacing the default Button Control associated with the Renderer with our own native Button control.

When you do that, since you’re completely replacing everything, you will lose access to all the events and properties associated with the default control. Such as Button Click, Touch Events and so on.

As in try to subscribe to your CustomButton’s default Clicked event, it won’t fire up during run time, since it been overridden by the native button control.

So how to handle events?

Yep in that case, we need to handle those events manually and map those necessary events from our Native button control to Xamarin Forms level properties and events.

Custom Events…

Yep this is how you manually create an Event for your Custom Button.

public class CustomButton : Button
{
	public event EventHandler ClickedCustom;
	
	public void SendCustomClicked()
	{
		EventHandler eventHandler = this.ClickedCustom;
		eventHandler?.Invoke((object)this, EventArgs.Empty);
	}
}

 

And then upon the Native Button’s Click event we invoke this event from the Custom Renderer level. 🙂

nativeButton.ClickEvent += (sender, args) =>{
	view.SendCustomClicked();
}

 

And then at the run time it will fire up the ClickedCustom event for your Custom Button in response of the native button’s click.

So now you can subscribe to ClickedCustom event instead of default Clicked event in your Xamarin Forms code and get the response upon the custom button click.

Any other type of events and properties…

You could follow the same pattern for any other type of event you wish to handle, and even properties such as Text, Color and blah blah… 😉

TADAAA! 😀

Enjoy!

A Cool Breadcrumbs Bar with Xamarin Forms Animations…

A Breadcrumbs bar? Bread? Crumbs? Breadcrumbs? Ok I don’t wanna make you hungry right now! 😛

le Breadcrumbs bar…

But hey you know the Breadcrumbs bar we use in our UI designs! that bar kind of thingy that they put up, to indicate Navigation steps in Websites and mobile applications(not often though). Yeah that one, exactly! 😀

So the other day I had to implement a Breadcrumbs bar control with some nice animations to one of our Xamarin Forms apps… First I was like, Breadcrumbs bar? they actually use them in Mobile Apps? Well turned out to be YEAH! some still do! lol 😛

So I thought, why not give a try to Xamarin Forms Animations while I’m at it, without diving in to the native level to handle all the nice animations.

So as a result of that, let me introduce you to the Cool Breadcrumbs Bar cooked right out of Xamarin Forms Animations. 😉

This Breadcrumbs Bar control can be used to show case navigation path in your Xamarin Forms mobile applications, and you could use this as a separate ui control and add it to each page in your app, and set it to nicely animate and showcase breadcrumbs path in those pages. 😀

Now how did I do it?

In simple theory, I created a StackLayout control, which adds Labels horizontally on demand, but when the Labels are added to the StackLayout, they are being added with a nice X axis point transformation from right end of the screen to the left end using Xamarin Forms Animations. Likewise, each breadcrumb gets added next to each other one by one on demand.

breadcrumbs-completed

^^ Yep that’s the actual Breadcrumbs bar control I implemented with Xamarin Forms! 😉

Now I must inform you for the sake of the post I have done a simple implementation in a sample code, since I can not share the original implementation I did for my company project. So you should be smart enough to extract this implementation into another control and use it as a component for your pages. 😛

Now if you’re one of em lazy people, then grab my github up in here : XFBreadcrumbsBar

Let’s get into coding.

Alright create your Xamarin Forms PCL project and follow me!

namespace WhateverYourNamespace
{
    public class HomePage : ContentPage
    {
        private StackLayout _breadcrumbStackLayout;
        private ScrollView _breadCrumbsScrollView;
        private Button _addNewBreadcrumbButton;
        private Button _clearAllBreadcrumbsButton;

        public HomePage()
        {
           
        }
    }
}

 

Alright we create the HomePage and make sure to add those initial elements which we will be using later.

Create the Breadcrumbs Bar

Next lets create our simple but awesome Breadcrumbs bar implementation with the above StackLayout and ScrollView.

// le animated breadcrumbs bar
_breadcrumbStackLayout = new StackLayout()
{
	Orientation = StackOrientation.Horizontal,
	HorizontalOptions = LayoutOptions.FillAndExpand,
	Children =
	{
		new Label
		{
			HorizontalOptions = LayoutOptions.Start,
			Text = "Welcome!",
			FontSize = 15,
			FontAttributes = FontAttributes.Bold,
			TextColor = Color.Black,
		},
	},
	Padding = new Thickness(10,0,10,0),
	HeightRequest = 30,
};
_breadcrumbStackLayout.ChildAdded += AnimatedStack_ChildAdded;

// let's add that breadcrumbs stacklayout inside a scrollview
_breadCrumbsScrollView = new ScrollView
{
	Content = _breadcrumbStackLayout,
	Orientation = ScrollOrientation.Horizontal,
	VerticalOptions = LayoutOptions.StartAndExpand,
};

 

Now let me do a bit of explaining there, I have created StackLayout with Horizontal Orientation so that we could stack up our breadcrumb Labels next to each other. Then I have added a Label as the first child to showcase the first default Breadcrumb in the bar. 🙂

Next I have wrapped the StackLayout inside a ScrollView, to allow the new Breadcrumbs to be visible in case the Breadcrumbs StackLayout gets filled and more breadcrumb Labels are to be added. So that we could scroll to the end of the Breadcrumbs StackLayout and make them visible. 😉

Then notice I have subscribed the to ChildAdded event? yep that’s to handle new Breadcrumbs being added at the runtime, which we will get into later. 😀

Add the rest of tid bits for the UI

Next let’s add a title to the page and two buttons to show case the awesome Breadcrumbs bar, then put them all together into the Content of the page.

// Button for adding and removing breadcrumbs 
_addNewBreadcrumbButton =
	new Button()
	{
		Text = "Add a Breadcrumb",
		TextColor = Color.Black,
		BackgroundColor = Color.White,
		BorderColor = Color.Gray,
		BorderWidth = 2,
	};
_addNewBreadcrumbButton.Clicked += AddNewBreadcrumbButtonOnClicked;

_clearAllBreadcrumbsButton =
	new Button()
	{
		Text = "Clear Breadcrumbs",
		TextColor = Color.Black,
		BackgroundColor = Color.White,
		BorderColor = Color.Gray,
		BorderWidth = 2,
	};
_clearAllBreadcrumbsButton.Clicked += ClearAllBreadcrumbsButtonOnClicked;


// Now put em all together on the screen
Content =
new StackLayout()
{
	Padding = Device.OnPlatform(
	new Thickness(5, 40, 5, 0), 
	new Thickness(0, 20, 0, 0), 
	new Thickness(0, 20, 0, 0)),
	Orientation = StackOrientation.Vertical,
	Children =
	{
		_breadCrumbsScrollView,
		
		new Label()
		{
			VerticalOptions = LayoutOptions.EndAndExpand,
			HorizontalTextAlignment = TextAlignment.Center,
			Text = "Welcome to the Breadcrumbs Bar with Xamarin Forms !",
			FontSize = 25,
			TextColor = Color.Black,
		},

		new StackLayout() { 
			Children = { 
				_addNewBreadcrumbButton,
				_clearAllBreadcrumbsButton,
			},
			VerticalOptions = LayoutOptions.End,
			Padding = new Thickness(10,10,10,10),
		}
	}
};

BackgroundColor = Color.White;

 

Alright no need to spoon feed this part I suppose, since the basic Xamarin Forms stuff. Those Button click events we will handle next! 😉

Adding a new Breadcrumb?

Don’t you worry child! Here’s the button click event I talked about earlier, AddNewBreadcrumbButtonOnClicked.

private void AddNewBreadcrumbButtonOnClicked(object sender, EventArgs e)
{
	_addNewBreadcrumbButton.IsEnabled = false;

	// retrieve the page width
	var width = Application.Current.MainPage.Width;

	// Add the new Breadcrumb Label
	_breadcrumbStackLayout.Children.Add(new Label
	{
		// Grab some random text (as in insert whatever 
		// the text you want for your new breadrumb)
		Text = "/ " + 
		RandomWordGenerator.GetMeaninglessRandomString(new Random().Next(5, 10)),
		FontSize = 15,
		TextColor = Color.Black,
		TranslationX = width,
	});

	// Scroll to the end of the StackLayout
	_breadCrumbsScrollView.ScrollToAsync(_breadcrumbStackLayout,
		ScrollToPosition.End, true);

	_addNewBreadcrumbButton.IsEnabled = true;
}

 

Now here is where we add the new Breadcrumbs to the Breadcrumbs Bar StackLayout at run time. Pretty simple right?

Ok when you click on the “Add a Breadcrumb” button, it will first retrieve the Screen Width and then create a Label which represents a Breadcrumb and add some dummy text to it. Oh by the way to generate a dummy text I’m using this super simple static class which I created earlier you can grab it in this post : Random String Generator 

Then we are setting it’s TranslationX property to the Width of the screen, which will place this Label at the edge of the Breadcrumbs Bar StackLayout.

After adding the Label, next we are scrolling the ScrollView to the end to make the transition visible for the new Breadcrumb Label.

Now you should keep in mind that,

You can add any type of Breadcrumbs to the breadcrumbs bar, such as Buttons, Images etc… and make it look even more cooler! 😉

Next is the beautiful Animation part….

Awesome Animation…

So this is the most important part where we are animating out the Breadcrumb Label getting added to the Breadcrumbs Bar.

private void AnimatedStack_ChildAdded(object sender, ElementEventArgs e)
{
	Device.BeginInvokeOnMainThread(() =>
	{
		var width = Application.Current.MainPage.Width;

		var storyboard = new Animation();
		var enterRight = new Animation(callback: d => 
		_breadcrumbStackLayout.Children.Last().TranslationX = d,
		start: width,
		end: 0,
		easing: Easing.Linear);

		storyboard.Add(0, 1, enterRight);
		storyboard.Commit(
		_breadcrumbStackLayout.Children.Last(), 
		"RightToLeftAnimation", length: 800);
	});
}

 

So to explain a bit we are using a compound animation to animate the Breadcrumb Label’s X position from the starting point to the 0th point of the screen. Since we originally set the X position to the edge of the Screen, now we can decrease it through an Animation and bring it to the position it should be placed, which is next to the previous Child in the _breadcrumbStackLayout. 

This gets fired whenever you click on the  “Add a Breadcrumb” button and a new child gets added to the StackLayout, resulting a beautiful animation from right end of the screen to the left.

PS : You can play around with the Easing of the Animation and the timing to add beautiful animation to it. Use your imagination and go crazy! 😉

Clear the Breadcrumbs!

This is super easy!

private void ClearAllBreadcrumbsButtonOnClicked(object sender, EventArgs eventArgs)
{
	_breadcrumbStackLayout.Children.Clear();

	_breadcrumbStackLayout.Children.Add(
	new Label
	{
		HorizontalOptions = LayoutOptions.Start,
		Text = "Welcome!",
		FontSize = 15,
		FontAttributes = FontAttributes.Bold,
		TextColor = Color.Black,
	});
}

 

Just get rid of the Children in the StackLayout and add the default Breadcrumb back if you wish like I have chosen above 😉

Next is Run time!

That’s it fellas, hit F5 and watch the magic! 😀

breadcrumbs-bar-android  breadcrumbs-bar-ios

Well here’s the cool Breadcrumbs Bar control I added in my project after all the customization. 😉

screen-shot-2017-01-26-at-7-17-11-pm screen-shot-2017-01-26-at-7-17-22-pm

Here’s a little tip, I basically moved the Breadcrumb related stuff to a custom control and used them in all the app pages. So now whenever we navigate to any page the breadcrumbs bar will nicely animate itself at the page visible event. 😉

breadcrumbs-completed

So your imagination is the limit fellas!

Enjoy! 😀

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! 😛

So I played around with Xamarin Forms Control Templates!

Yes I did and I came up with something pretty cool. Do you want to change your app’s theme on demand at run time? or load a different template for your pages at run time? or even simply change the app’s colors on demand?

Oh yeah Xamarin Forms Control Template gives the answer to all of that! 😉 Here what I built with it! 😀

xf-control-templates-ios xf-control-templates-android

Pretty cool eh! 😀

So basically what I built was a simple app where you could dynamically change the App background  color theme and change the change the App theme style on demand.

As you can see you can change the color theme of the app by clicking on the color buttons and change the theme style by clicking on the theme change button, which loads a different theme for the App if you closely notice.

The honest inspiration for this is that I remember back in the days when I was installing Windows 8 in my laptop, at the first time boot up, they ask you to choose the color theme you would like to use.

installation-7

Where it presents you with a beautiful color pallet and when you click on any of those colors the whole page changes the color accordingly, so I wanted to build something like that for the fun someday. 😉

So here we go… 😀

What are Xamarin Forms Control Templates?

Xamarin.Forms control templates provide the ability to easily theme and re-theme application pages at runtime. – Xamarin Docs 

Nuff said, if you want to learn more about it, read the documents. Here I’m going to explain how you could achieve the above cool stuff using Control Templates for Xamarin Forms.

Xamarin Forms Control Templates Binding?

I have used the Binding in order to change the template color at runtime. 🙂 If you’re not familiar with this concept, you may read up here: Xamarin Docs

We are keeping a public Property for the Theme color in our ContentPage, and binding our Control Template’s color values to that property. So at the run time whenever we change the Color property, it will get reflected to whatever the Template and the background color will change accordingly. 😉

Otherwise we would have to create different Control Templates for every single color, which will be very heavy and long code, but thanks to Binding we could do it with ease as described above.

Let me walk you through…

1. Creating templates…

First of all let’s create our templates, we are going to create two templates with different styles, as show in the below screenshots of the finished implementation.

simulator-screen-shot-1-jan-2017-2-53-32-pm  simulator-screen-shot-1-jan-2017-2-53-45-pm

  1. Template Header and footer will have a background and simple Label for both header and footer.
  2. Template Header will have one label with with a white background color, and footer will have two labels with white background color.

For now just forget about the color and we will focus on the initial Template Design.

Alright now let’s get to work.

Let’s begin by creating the project, and make sure to create XAML based Xamarin Forms project. Then let’s create our Control Templates in the App.xaml file, within the Application.Resources tag by adding them to the global ResourceDictionary, so that they could be accessed in anywhere of the app at runtime.

You can create any number of templates as you wish and name them in anyways you prefer. 😉 More themes the merrier…

<Application.Resources>
<ResourceDictionary>

  <!--template theme 1-->
  <ControlTemplate x:Key="MyTemplate1">
    ...
  </ControlTemplate>

  <!--template theme 2-->
  <ControlTemplate x:Key="MyTemplate2">
    ...
  </ControlTemplate>

</ResourceDictionary>
</Application.Resources>

 

le template 1…

Alright let’s create our first Control Template.

<!--template theme 1-->
<ControlTemplate x:Key="MyTemplate1">
<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="0.1*" />
    <RowDefinition Height="0.8*" />
    <RowDefinition Height="0.1*" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="0.05*" />
    <ColumnDefinition Width="0.95*" />
  </Grid.ColumnDefinitions>

  <!--template header-->
  <!--use of template binding for color-->
  <BoxView Grid.ColumnSpan="2" Color="{TemplateBinding Parent.ThemeColor}" />
  <Label Grid.Row="0" Grid.Column="1"
         Text="this is my theme style 1"
         TextColor="White"
         VerticalOptions="Center" />
  <!--template header-->

  <!--your page content goes in here-->
  <ContentPresenter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" />

  <!--template footer-->
  <!--use of template binding for color-->
  <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Color="{TemplateBinding Parent.ThemeColor}" />
  <Label Grid.Row="2" Grid.Column="1"
         Text="template 1 (c) Udara Alwis 2016"
         TextColor="White"
         VerticalOptions="Center" />
  <!--template footer-->
</Grid>
</ControlTemplate>

 

There you have it, as you can see we have created a template with a Grid where we are aligning the page content in the middle  as the ContentPrensenter and the Header and Footer accordingly at top and bottom. We have added simple Labels to each Header and Footer with some text in it.

You can also notice that we are using Template property Binding to set the Background color of our Template. Color=”{TemplateBinding Parent.ThemeColor}”

So at the run time the Color will change according to the “ThemeColor” property which we will be implementing in the ContentPage.

You can use Binding to Change any property in your Control Templates thanks to awesomeness of Xamarin Forms! 😀

le template 2…

Now here’s our second Control Template.

<!--template theme 2-->
<ControlTemplate x:Key="MyTemplate2">
<Grid>
  <Grid.RowDefinitions>
	<RowDefinition Height="0.1*" />
	<RowDefinition Height="0.8*" />
	<RowDefinition Height="0.1*" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
	<ColumnDefinition Width="0.05*" />
	<ColumnDefinition Width="0.35*" />
	<ColumnDefinition Width="0.55*" />
	<ColumnDefinition Width="0.05*" />
  </Grid.ColumnDefinitions>

  <!--template header-->
  <!--use of template binding for color-->
  <BoxView Grid.ColumnSpan="4" Color="{TemplateBinding Parent.ThemeColor}" />
  <Label Grid.Row="0" Grid.Column="1"  Grid.ColumnSpan="2"
		 Text="this is my theme style 2"
		 TextColor="Black"
		 BackgroundColor="White"
		 VerticalOptions="Center" />
  <!--template header-->

  <!--your page content goes in here-->
  <ContentPresenter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4" />

  <!--template footer-->
  <!--use of template binding for color-->
  <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="4" Color="{TemplateBinding Parent.ThemeColor}" />
  <Label Grid.Row="2" Grid.Column="1"
		 Text="template 2"
		 TextColor="Black"
		 BackgroundColor="White"
		 VerticalOptions="Center" />
  <Label Grid.Row="2" Grid.Column="2"
		 Text="(c) Udara Alwis 2016"
		 TextColor="Black"
		 BackgroundColor="White"
		 VerticalOptions="Center"/>
  <!--template footer-->
</Grid>
</ControlTemplate>

 

As you can see the difference of this Template is that we have added extra columns to the Grid container and added extra labels to fill in. Also you may have noticed that we are setting the Label background to White color in this template.

Alright there goes our two templates in this example. Next let’s implement the design for our ContentPage.

2. ContentPage design stuff…

So those two Template themes are now ready to be applied for any ContentPage in our App.

Next let’s lay down the design for our content page. Remember hence we are using Control Templates, we need to implement our UI in a way our page could use those templates, which is by,

having a ContentView which will position itself in the ContentPresenter in the Templates once we bind to them.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XFControlTemplateThemes"
             x:Class="WhateverYourNamespace.MainPage">

  <ContentView x:Name="contentView"
               ControlTemplate="{StaticResource MyTemplate1}">
    <ContentView.Padding>
      <OnPlatform x:TypeArguments="Thickness" iOS="0,20,0,0" />
    </ContentView.Padding>

   <!-- Your Page Content-->

  </ContentView>
</ContentPage>

 

You may have noticed that I have bound our ContentView ControlTemplate  property to one of the Templates we created in the App.xaml yeah? Yep exactly that’s because since we placed those templates in the App’s global level, we can directly access those properties from anywhere in our app. So as of the defualt ControlTemplate I have set it to the “MyTemplate1” template we created. So when the page loads it will be decorated with that. 😉

Now let’s take a look at the Page content design which will be placed inside the ContentView above. 🙂

Now keep in mind you can implement whatever the design you want to your Page body, but for this example basically we need to have a button to switch in between the two themes we created above and another bunch of buttons to change the color of those themes (something like a color pallet). So here we go…

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

  <Label Text="Welcome to the Dynamic Theme Changer app!"
		 HorizontalTextAlignment="Center"
		 FontSize="20"
		 VerticalOptions="Start"
		 HorizontalOptions="Center" />

  <Grid Padding="0,20,0,20">
	<Label Text="click below to change the theme on the go"
		   HorizontalTextAlignment="Center"
		   HorizontalOptions="Center" />
	<Button Text="change current theme template" Grid.Row="1"
				Clicked="OnButtonClicked" />

	<Grid.RowDefinitions>
	  <RowDefinition Height="*" ></RowDefinition>
	  <RowDefinition Height="40" ></RowDefinition>
	</Grid.RowDefinitions>
  </Grid>

  <Grid Padding="0,20,0,20">

	<Label Text="click below to change the theme color on the go"
		   HorizontalTextAlignment="Center"
		   HorizontalOptions="Center"
		   Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="10"/>

	<Button BackgroundColor="#ff0000" Grid.Row="1" Grid.Column="0" Clicked="OnColorChangeButtonClicked" />
	<Button BackgroundColor="#ff8000" Grid.Row="1" Grid.Column="1" Clicked="OnColorChangeButtonClicked" />
	<Button BackgroundColor="#ffff00" Grid.Row="1" Grid.Column="2" Clicked="OnColorChangeButtonClicked" />
	<Button BackgroundColor="#00ff40" Grid.Row="1" Grid.Column="3" Clicked="OnColorChangeButtonClicked" />
	<Button BackgroundColor="#00ffff" Grid.Row="1" Grid.Column="4" Clicked="OnColorChangeButtonClicked" />
	<Button BackgroundColor="#0080ff" Grid.Row="1" Grid.Column="5" Clicked="OnColorChangeButtonClicked" />
	<Button BackgroundColor="#4000ff" Grid.Row="1" Grid.Column="6" Clicked="OnColorChangeButtonClicked" />
	<Button BackgroundColor="#bf00ff" Grid.Row="1" Grid.Column="7" Clicked="OnColorChangeButtonClicked" />
	<Button BackgroundColor="#ff0080" Grid.Row="1" Grid.Column="8" Clicked="OnColorChangeButtonClicked" />
	<Button BackgroundColor="#ff0040" Grid.Row="1" Grid.Column="9" Clicked="OnColorChangeButtonClicked" />

	<Grid.RowDefinitions>
	  <RowDefinition Height="*" />
	  <RowDefinition Height="40" />
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
	  <ColumnDefinition Width="0.1*" />
	  <ColumnDefinition Width="0.1*" />
	  <ColumnDefinition Width="0.1*" />
	  <ColumnDefinition Width="0.1*" />
	  <ColumnDefinition Width="0.1*" />
	  <ColumnDefinition Width="0.1*" />
	  <ColumnDefinition Width="0.1*" />
	  <ColumnDefinition Width="0.1*" />
	  <ColumnDefinition Width="0.1*" />
	  <ColumnDefinition Width="0.1*" />
	</Grid.ColumnDefinitions>
  </Grid>

</StackLayout>

 

Behold my beautiful UI. 😉 As you can see the first button will be switching in between the themes we created before, and them there’s a whole another set of buttons (color pallet buttons) with different background colors, which points to the same click event. Those buttons will be changing the template color by changing the ThemeColor property I mentioned earlier, which we are going to implement next. 🙂

3. ContentPage code-behind…

Now this is where we put things together, in your MainPage.cs code behind. Which we are handling all the theme changes and color changes on the go. 😉

So here are what we are going to implement here…

  1. ThemeColor public property to be used by the Templates for Color changing feature
  2. Load the control templates to be used in this page for run time theme changing
  3. Handle the run time theme switching functionality (switch the themes in between the templates we created before)
  4. Handle the tun time them color switching functionality (switch the themes between different color as show in those color buttons)
public partial class MainPage : ContentPage
{
	public static readonly BindableProperty ThemeColorProperty =
		BindableProperty.Create("ThemeColor", typeof(Color), typeof(MainPage), Color.Red);
	/// <summary>
	/// Gets or Sets the theme color for the template
	/// </summary>
	public Color ThemeColor
	{
		set { SetValue(ThemeColorProperty, value); }
		get { return (Color)GetValue(ThemeColorProperty); }
	}

	private bool _originalTemplate = true;
	private ControlTemplate _myTemplate1;
	private ControlTemplate _myTemplate2;

	public MainPage()
	{
		InitializeComponent();

		_myTemplate1 = (ControlTemplate)Application.Current.Resources["MyTemplate1"];
		_myTemplate2 = (ControlTemplate)Application.Current.Resources["MyTemplate2"];
	}

	void OnButtonClicked(object sender, EventArgs e)
	{
		// switching to the next theme
		_originalTemplate = !_originalTemplate;
		contentView.ControlTemplate = (_originalTemplate) ? _myTemplate1 : _myTemplate2;
	}

	private void OnColorChangeButtonClicked(object sender, EventArgs e)
	{
		if (((Button)sender) != null)
		{
			var sender1 = ((Button)sender);

			// Change the theme color according 
			// to the selected button color
			ThemeColor = sender1.BackgroundColor;

			// this will update the ThemeColor property
			// and reflect to the Control template
		}
	}
}

 

You can see I have implemented the ThemeColor property where our Templates will be binding their Color properties to. Then take a look at the event OnColorChangeButtonClicked which is the event that is fired by the set of buttons with different colors as we implemented in the UI. So inside this event we are retrieving the button’s background color and setting that value to our ThemeColor property, which will in return reflect to the Template that has been loaded to the page at that moment.

And then in the Constructor we are loading the two templates we created before into our page by accessing the Application Resources dictionary so we can use those instances to change the them on the go.

Inside the OnButtonClicked event we are switching between the two template themes we have loaded above.

Finally hit F5!

Alright that’s it for the coding. Now save it and hit F5 to see the magical beauty of Xamarin Forms! 😉

xf-control-templates-ios  xf-control-templates-android

So you can see clearly that when you click on the “change current theme template” button, the theme immediately changes to the next template.

And then you click on any of the color pallet buttons you can see the theme background color changes accordingly. Beautiful isn’t it? 😉

There you have it fellas!

Now as for them lazy people, you could straight away grab the code up in my github: Xamarin-Playground/XFControlTemplateThemes

Enjoy and share! 😀

– Udara Alwis

Is your Visual Studio stuck at, Emulator is already running?

So few days back after doing a fresh installation on my WIndows 10 laptop, and installing Visual Studio, I tried running a Xamarin Forms project, with the Visual Studio Android Emulator.

The project was successfully building itself, and the Visual Studio Android Emulator also started running successfully, but then the build process was on a hang state after the Emulator started running. Specifically the build log was on a hang state after “Emulator is already running” step, as I saw in the output log in VS.

So after Googling a while I figured out the problem thanks to wasting a bunch on hours on google search and forums, since many others were also having the same issue.

So let me post the solution for you right here.

Cause?

You must keep in mind that my project was building fine, and the Emulator also started running successfully and booted up itself. I was having a already built solution and up and running Emulator, but the VS couldn’t connect to the Emulator.

The cause for this is Visual Studio debugger was unable to connect to the started Emulator through the ADB (Android Debug Bridge).

This is due a wrong registry entry in the system, where as Visual Studio is looking to start up the ADB and connect to it, in order to connect to the Emulator, but due to this wrong registry entry, VS is unable to find the path to ADB, to start it up.

This is very well explained in this Visual Studio troubleshoot article:

https://msdn.microsoft.com/en-us/library/mt228282.aspx?f=255&MSPPError=-2147217396#ADB

This seem to be happening by default with fresh installations of VS lately, where as the Android SDK installation path in the above registry entry doesn’t seem to be matching with the actual SDK installation location in our system, which is probably done by default when installing Visual Studio 2015.

Solution!

So yeah as the article explains we just have to update the registry entry with the accurate path to the Android SDK installation in our system, so that Visual Studio can start up ADB to connect to the Emulator.

Step1 : Copy the actual Android SDK installation path

to find the actual Android SDK path in your system, that is referred by Visual Studio, go to the top tool bar of Visual Studio, and open the Android SDK Manager as shown below.

capture-3

If you did the default Visual Studio installation with the Cross-Platform mobile dev tools, then your path location should also look similar as above.

Copy that path, or type the same exact path on Run command and open the folder and copy the full path from there.

Step2 : Update the invalid registry entry

Open registry editor, by “regedit” in Run window and navigate to the following Registry.

HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools

Now open the Path registry key and change the value with the above Android SDK path which you copied earlier.

capture-2

Well, that’s it.

There goes the solution. Now you should close the Emulator and Visual Studio and reopen your solution, hit F5! you’re all good! 😀

Cheers!

Listening to the Layout on Xamarin Android PageRenderer! (LayoutListener)

So when you create a Custom Renderer for your Xamarin Forms ContentPage, on Android, sometimes you have to tap into the Android Layout changes on your current page.

For instances like, Orientation changes, Keyboard visibility changes on Android and so on.

This is done by Adding a Layout Listener to our Layout’s ViewTree. 🙂 Confusing? Let’s get to work!

Create a Layout Listener…

First let’s create our Layout Listener, the guy who get’s the call back when the Layout Changes on the ViewTree of our Layout.

public class CustomLayoutListener : Java.Lang.Object, ViewTreeObserver.IOnGlobalLayoutListener
{
	public void OnGlobalLayout()
	{
		// do whatever the stuff you wanna do here
	}
}

 

We derive to from the IOnGlobalLayoutListener interface, where as you need to implement its OnGlobalLayout() method which get’s the call back when a Layout change occurs.

Add the Listener to the ViewTree…

Next add it to the ViewTreeObserver of your Layout.

[assembly: ExportRenderer(typeof(CustomContentPage), typeof(CustomContentPageRenderer))]
namespace WhateverYourNamespace
{
    public class CustomContentPageRenderer : PageRenderer
    {
        protected override async void OnElementChanged(ElementChangedEventArgs<Page> e)
        {
			var rootView = CrossCurrentActivity.Current.Activity.Window.DecorView.RootView;
			rootView.ViewTreeObserver.AddOnGlobalLayoutListener(new CustomLayoutListener());
		}
	}
}

 

Since I implemented this on a Xamarin Forms Custom Renderer, first I have gained access to the current Activity’s RootView (from a 3rd party library CurrentActivityPlugin) and then I have added my listener to the ViewTreeObserver of my root view. 😀

TADAA! 😀

but you could also…

Oh well good things comes to those who wait.. lol Xamarin Android provides you an event called GlobalLayout where you could also directly subscribe to Layout changes without having to implement your own listener.

rootView.ViewTreeObserver.GlobalLayout += (sender, args) =>
{
	// do whatever the stuff you wanna do here
}

 

Oh well it depends on your implementation requirement though.

Anyways there you have it! 😀

Enjoy!

Setting RelativeLayout ConstraintExpressions from XAML Styles in Xamarin Forms…

When it comes to Xamarin Forms RelativeLayout we always use Constraints, its pretty easy to add those Constraint values from C# code behind, but when it comes to XAML UI implementation, it’s not so easy.

so myself…

I have been working with XAML UI implementation for the last year or so, specially dealing with a lot of pixel perfect design, which needs a lot of customization to design from XAML. But as a developer you have to find ways to deal with those stuff. In my current project we practice a strict discipline of MVVM pattern, which we strongly separate XAML UI View and the ViewModel code. So under no exceptions we add any single C# UI code or XAML code behind implementations in our project.

complex design implementations…

When you have to deal with complex design implementations in Xamarin Forms, the best way to go is with RelativeLayout, along with Relative Constraint values for X/Y position and Height/Width values.

flag1

RelativeLayout is good…

Usually those RelativeLayout Constraint values manages to get the job done, with ease on both Android and iOS devices. But sometimes it doesn’t quite go right, specially with Android, where you have to deal with different types of screen resolutions.

layouts1

but sometimes…

So at times like that you need to specify RelativeLayout ConstraintExpression separately for iOS and Android devices. But how do you do this in XAML code?

so how?

So how do you set those ConstraintExpression right from XAML code? Styles is the answer! 😀

The trick is to create two different Styles for Android and iOS, targeting the control you need to set the RelativeLayout Constraints on.

And then on your control’s XAML declaration, you set the Style property using the OnPlatform tag accordingly for iOS and Android.

Let’s do it…

You could define these Styles on your Page level or Application level as you wish as shown below…

You can see I have created twp styles which targets the Label control type and added my Relative Layout ConstraintExpressions. 🙂 Also I have added the other Properties that I need to customize through these Styles.

<ContentPage.Resources>
	<ResourceDictionary>
		<Style x:Key="MyLabelStyleiOS" TargetType="Label">
		  <Setter Property="BackgroundColor" Value="Yellow"/>
		  <Setter Property="HorizontalTextAlignment" Value="Center"/>
		  <Setter Property="RelativeLayout.YConstraint" 
				  Value="{ConstraintExpression RelativeToParent,Property=Height,Factor=0.5}"/>
		  <Setter Property="RelativeLayout.WidthConstraint"
				  Value="{ConstraintExpression RelativeToParent,Property=Width,Factor=0.7}"/>
		  <Setter Property="RelativeLayout.XConstraint"
				  Value="{ConstraintExpression RelativeToParent,Property=Width,Factor=0.15}"/>
		</Style>

		<Style x:Key="MyLabelStyleAndroid" TargetType="Label">     
		  <Setter Property="BackgroundColor" Value="Yellow"/>
		  <Setter Property="HorizontalTextAlignment" Value="Center"/>
		  <Setter Property="RelativeLayout.YConstraint"
				  Value="{ConstraintExpression RelativeToParent,Property=Height,Factor=0.1}"/>
		  <Setter Property="RelativeLayout.WidthConstraint"
				  Value="{ConstraintExpression RelativeToParent,Property=Width,Factor=0.7}"/>
		  <Setter Property="RelativeLayout.XConstraint"
				  Value="{ConstraintExpression RelativeToParent,Property=Width,Factor=0.15}"/>
		</Style>
	</ResourceDictionary>
</ContentPage.Resources>

 

And then on the your Control that you need to set those RelativeLayout Constraints…

<Label Text="Welcome to the app!"  >
	<Label.Style>
	  <OnPlatform x:TypeArguments="Style"
				  iOS="{StaticResource MyLabelStyleiOS}"
				  Android="{StaticResource MyLabelStyleAndroid}" />
	</Label.Style>
</Label>

 

You can see how I have nested down the Style property and added the specific style according to the Platform type.

It’s very important to notice that I have added those Styles as StaticResource this is because we need to set those RelativeLayout ConstraintExpressions before the run time, while the XAML are being parsed. 🙂 Once the XAML layout is parsed, we can not set the ConstraintExpressions, since it’s not going to be rendered.

make it pretty… Generalize!

Yep the above styles are ugly, so let’s generalize it and move the common properties and constraints to a general style as below, and derive our child styles.

<Style x:Key="MyLabelStyle" TargetType="Label">
  <Setter Property="BackgroundColor" Value="Yellow"/>
  <Setter Property="HorizontalTextAlignment" Value="Center"/>
  <Setter Property="RelativeLayout.WidthConstraint"
		  Value="{ConstraintExpression RelativeToParent,Property=Width,Factor=0.7}"/>
  <Setter Property="RelativeLayout.XConstraint"
		  Value="{ConstraintExpression RelativeToParent,Property=Width,Factor=0.15}"/>
</Style>

<Style x:Key="MyLabelStyleiOS" TargetType="Label" BasedOn="{StaticResource MyLabelStyle}">
  <Setter Property="RelativeLayout.YConstraint" 
		  Value="{ConstraintExpression RelativeToParent,Property=Height,Factor=0.5}"/>
</Style>

<Style x:Key="MyLabelStyleAndroid" TargetType="Label" BasedOn="{StaticResource MyLabelStyle}">
  <Setter Property="RelativeLayout.YConstraint"
		  Value="{ConstraintExpression RelativeToParent,Property=Height,Factor=0.1}"/>
</Style>

 

There we go! now that’s beautiful. Always keep in mind to generalize the common Style properties, and here in this case the common ConstraintExpression values. 🙂

Cheers! 😀

How to add a fixed Background Image for a UIScrollView?

So recently I wanted to add a Fixed image behind a ScrollView in Xamarin Forms. Furthermore when the ScrollView is scrolling the background image shouldn’t scroll along with it, and background image should stay fixed while the content is scrolling.

Solution?

So the obvious solution would be to lay down a RelativeLayout and top of that Image, and then a ScrollView with Transparent background.

But I wanted…

but instead of laying out all those layouts and multiple controls, I wanted to achieve this right from one Control, by customizing the ScrollView accordingly.

So I got to into Coding…

So I created a Custom ScrollView control in PCL project and added the Custom Renderers for each platform iOS and Android. Although I got it working with ease in on Android by setting the Image as the Background drawable for the ScrollView, I was having some struggle with iOS.

trouble with iOS UIScrollView…

So the Xamarin Forms ScrollView’s native iOS mapped control is the UIScrollView. So I tried adding the a UIImageView to the UIScrollView from the custom renderer hoping it should get the job done according to theory.

but the background was panning across the Content size. And it started scrolling alone with the Content.

So let me walk you through what I tried and what actually worked… 🙂

1. Adding the UIImageView as a SubView

So as per the obvious solution I added the UIImage into a UIImageView and added it into the UIScrollView as a SubView as shown below. Also you may have noticed how I have called SendSubviewToBack method to place the UIImageView behind the UIScrollView.

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

	if (e.NewElement != null)
	{
		var _uiImageViewBackground = new UIImageView(_uiImageBackground);

		this.AddSubview(_uiImageViewBackground);
		this.SendSubviewToBack(_uiImageViewBackground);
	}
}

 

And this was the result as you can see below..

method1

As you can see the UIImageView takes up the Height of the UIScrollView Content, not the UIScrollView actual Height, thereby resulting of the UIImageView spanning across the whole Content size. :O

2. Resizing the UIImage and adding the UIImageView as a SubView

Then I thought what if I resized the Image to the actual Height and Width of the UIScrollView and added as a Subview as show below.

Now in an iOS Custom Renderer we can not access the UIScrollView’s Bounds or Frame right from the OnElementChanged method, we need to override the Draw() method, which provides the Height and Width since it’s actually being drawn on the Parent view.

public override void Draw(CGRect rect)
{
	base.Draw(rect);

	// resize the UIImage to fit the current UIScrollView's width and height
	_uiImageBackground = ResizeUIImage(_uiImageBackground, (float)rect.Width, (float)rect.Height);

	var _uiImageViewBackground = new UIImageView(_uiImageBackground);

	this.AddSubview(_uiImageViewBackground);
	this.SendSubviewToBack(_uiImageViewBackground);
}

 

So as you can see I have resized the UIImage and added it to the UIScrollView thought a UIImageView holder.

Look at the results…

method2

Well the Background Image has been resized but the Background View still scrolls with the Content of UIScrollView. 😦

3. How about InsertSubview() ?

There are couple of methods for Adding a SubView to a View, the most common used one is the AddSubView() method which is also an alias for Add().

Then there also another method call we could use, InsertSubview(). In theory it does the same thing as AddSubView() but in a different manner where you could define a View index, in terms of which index the View should be added to in the array of sub-views in the given View.

So instead of this,

this.AddSubview(_uiImageViewBackground);
this.SendSubviewToBack(_uiImageViewBackground);

 

Let’s call the below, as you can see I’m placing our UIImageView at the very bottom of the SubViews stack by giving index 0 value.

this.InsertSubview(_uiImageViewBackground, 0);

 

Oh well what did you expect! Same result as before. 😦

4. How about InsertSubviewBelow() ?

So this method is also somewhat similar to above, where as this allows you to straightaway as a Subview, and define underneath which SubView you need to add your View in the stack. 😀

So I tried this as well. By the “this” reference I’m referring to the UIScrollView as the sibling and to tell the layout engine to place the UIImageView below the UIScrollView. 🙂

this.InsertSubviewBelow(_uiImageViewBackground, this);

 

But unfortunately the results was the same… 😦

5. What about directly setting the Background?

Frustrated with trying to add SubViews approach, I thought of directly setting the Background property of UIScrollView, specifically set the UIImage directly to the BackgroundColor Property of UIScrollView.

Well there’s no way we could set the BackgroundColor property from the Draw() method override, hence the canvas is already drawn. So we need to set it before its being drawn.

So let’s move back to the OnElementChanged method and set the BackgroundColor.

Since there’s no availability of the Height and Width values within the OnElementChanged event firing, for now we’ll just directly set the UIImage to BackgroundColor without resizing.

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

	if (e.NewElement != null)
	{
			this.BackgroundColor = UIColor.FromPatternImage(_uiImageImageBackground);
	}
}

 

Oh well, look at the results. It also fills up the whole Content area, without just setting the “background” on UIScrollView.

method3

5. What about directly setting the Background with resized UIImage?

Alright now let’s get a bit serious and retry the above approach properly, by accessing the Height and Width of the UIScrollView and resizing the UIImage accordingly.

So to do this we need to tap into the place where the Height and Width first gets allocated before the Draw method. That’s by subscribing to the OnPropertyChanged() as shown below.

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

	if (e.NewElement != null)
	{
		((CustomScrollView)e.NewElement).PropertyChanged += OnPropertyChanged;
	}
}

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

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

 

So inside the OnPropertyChanged() event we are waiting till the Width and Height properties are available, as you can see we are looking for the PropertyName in the event args. Then we resize the UIImage according to the retrieved Height and Width and values of UIScrollView and set the UIImage to the Background.

method4

Now as you can see, the Background Image gets resized to the exact size of UIScrollView but the Background is still scrolling with the content. And if you notice closely, you can see the Background has repeated the Image, this is because of the UIColor.FromPatternImage() where as the UIImage gets repeated to fill the whole canvas. This means that the Background still gets spread across the whole Content area of the UIScrollView.

then I witnessed something strange….

What actually worked… (strangely though)

So meanwhile playing around with different override methods and properties, at some point….

I accidentally left the Draw() method overridden in my Custom Renderer as shown below, and moved the setting of the UIScrollView Background to the OnPropertyChanged event like I did in the previous step.

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

	if (e.NewElement != null)
	{
		((CustomScrollView)e.NewElement).PropertyChanged += OnPropertyChanged;
	}
}

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

 

As you can see in my above code, I have just overriden the Draw() event and left it just as it is, without writing any code inside the method.

And behold! 😀 IT WORKED! 😀

bloopscrollview-on-ios-lowq

TADAA! 😀 as you can see we have successfully got it to work, a fixed background image in UIScrollView. 😉

Although this does not make any sense, how could the Background of the UIScrollView prevents itself from scaling to the size of Content size just by simply overriding the Draw() event, without even executing any code inside of it.

Either way this trick got the work done. 😀 May be this is just a bug in Xamarin or iOS. 😛

There you have it, how to add a fixed background image to a UIScrollView from custom renderer in Xamarin! 🙂

Enjoy!