Xamarin.Forms: Custom Context Actions on iOS

Xamarin.Forms: Custom Context Actions on iOS

Hello folks now is time to talk about customize context action views on Xamarin.Forms cell for iOS (yes the red/light-gray options that appear when you swipe a cell) the default colors are not a good-looking, so right now is a little bit tricky to achieve that but we will use a reflection technique to achieve the next two escenarios:

• Change background color for default and destructive context action
• Set custom view for default and destructive context action

first at all, lets take a look to native impl. on Xamarin.Forms Github project on the next url

https://github.com/xamarin/Xamarin.Forms/blob/ae92582d5acad2b8aeab9a2ed5b490561e71bd6c/Xamarin.Forms.Platform.iOS/ContextActionCell.cs#L14

Here we have two key items "DestructiveBackground" and "NormalBackground" both are the Images  that Xamarin.Forms use to put as background on the default ContextActions view(Gray/Red)

Not bad but sometimes we need to put some love into the design. at this point we found a major issue both ContextActionsCell & Destructive/Normal background properties are internal/private which basically means that we are not able to modify directly due protection level here is when Reflection is coming to help us to handle it.

Lets analyze how we can achieve this the steps are listed next

1. Get assembly info for Xamarin.Forms.Platform.iOS(the one that contains ContextActionsCell class).
2. Get Type info for internal ContextActionsCell class.
3. Get Field infor for DestructiveBackground & NormalBackground properties
4. Set or Get value for static DestructiveBackground / NormalBackground properties

Sound a little bit hard but let's see code this will be easy I promise you.

	//Step 1: Get assembly info
	var formsAssembly = (typeof(Xamarin.Forms.Platform.iOS.EntryRenderer)).Assembly;
	//Step 2: Get Internal type info
	var contextActionCellType = formsAssembly.GetType("Xamarin.Forms.Platform.iOS.ContextActionsCell");
	//Step 3: Get field info for DestructiveBackground & NormalBackground interal properties
	var info = contextActionCellType.GetField(isDestructive ? nameof(DestructiveBackground) : nameof(NormalBackground), BindingFlags.NonPublic | BindingFlags.Static);
	//Step 4: Get/Set value for internal static items
	var defaultValue = (UIImage)info.GetValue(null);
	info.SetValue(null, nativeView);

view raw Reflection.cs hosted with ❤ by GitHub

Told you with that 4 lines of code now you're able to modify that internal properties based on that now we need to create a dependency service interface to expose a simple way to change both properties and also we will need to create an iOS specific implementation.

	//ICustomContextActionsManager.cs
	public interface ICustomContextActionsManager
	{
	void RestoreContextActionsViews();
	void SetCustomBackgroundColor(Xamarin.Forms.Color color, bool isForDestructive = false);
	void SetCustomView(Xamarin.Forms.View color, bool isForDestructive = false);
	}
	//CustomContextActionsManager.cs
	namespace CustomContextActions.iOS.Dependency
	{
	public class CustomContextActionsManager : ICustomContextActionsManager
	{
	#region ICustomContextActionsManager
	public void RestoreContextActionsViews()
	{
	SetNativeView(DestructiveBackground, true);
	SetNativeView(NormalBackground);
	}
	public void SetCustomBackgroundColor(Color color, bool isForDestructive = false)
	{
	GetDefaultValuesIfNeeded();
	//Create a default size for color background
	var rect = new CGRect(0, 0, 1, 1);
	var size = rect.Size;
	//Create a background UIImage view based on requested color
	UIGraphics.BeginImageContext(size);
	using (var context = UIGraphics.GetCurrentContext())
	{
	context.SetFillColor(color.ToCGColor());
	context.FillRect(rect);
	SetNativeView(UIGraphics.GetImageFromCurrentImageContext(), isForDestructive);
	}
	}
	public void SetCustomView(Xamarin.Forms.View backgroundView, bool isForDestructive = false)
	{
	GetDefaultValuesIfNeeded();
	//Convert Xamarin.Forms.View to a Native UIView
	var defaultSize = new CGRect(0, 0, backgroundView.WidthRequest > 0 ? backgroundView.WidthRequest : 80, backgroundView.HeightRequest > 0 ? backgroundView.WidthRequest : 120);
	var renderer = Platform.CreateRenderer(backgroundView);
	renderer.NativeView.Frame = defaultSize;
	renderer.NativeView.AutoresizingMask = UIViewAutoresizing.All;
	renderer.NativeView.ContentMode = UIViewContentMode.ScaleToFill;
	renderer.Element.Layout(defaultSize.ToRectangle());
	var nativeView = renderer.NativeView;
	nativeView.SetNeedsLayout();
	//Convert UIView into a UIImage
	UIGraphics.BeginImageContextWithOptions(nativeView.Bounds.Size, nativeView.Opaque, 0.0f);
	nativeView.Layer.RenderInContext(UIGraphics.GetCurrentContext());
	var nativeImage = UIGraphics.GetImageFromCurrentImageContext();
	UIGraphics.EndImageContext();
	SetNativeView(nativeImage, isForDestructive);
	}
	#endregion
	UIImage DestructiveBackground;
	UIImage NormalBackground;
	void GetDefaultValuesIfNeeded()
	{
	if (DestructiveBackground == null)
	{
	DestructiveBackground = GetNativeView(true);
	NormalBackground = GetNativeView();
	}
	}
	void SetNativeView(UIImage nativeView, bool isDestructive = false)
	{
	var info = GetContextActionFieldInfo(isDestructive);
	info.SetValue(null, nativeView);
	}
	UIImage GetNativeView(bool isDestructive = false)
	{
	var info = GetContextActionFieldInfo(isDestructive);
	return (UIImage)info.GetValue(null);
	}
	FieldInfo GetContextActionFieldInfo(bool isDestructive = false)
	{
	var formsAssembly = (typeof(Xamarin.Forms.Platform.iOS.EntryRenderer)).Assembly;
	//https://github.com/xamarin/Xamarin.Forms/blob/ae92582d5acad2b8aeab9a2ed5b490561e71bd6c/Xamarin.Forms.Platform.iOS/ContextActionCell.cs#L14
	var contextActionCellType = formsAssembly.GetType("Xamarin.Forms.Platform.iOS.ContextActionsCell");
	return contextActionCellType.GetField(isDestructive ? nameof(DestructiveBackground) : nameof(NormalBackground), BindingFlags.NonPublic | BindingFlags.Static);
	}
	}
	}

view raw CustomContextActions.cs hosted with ❤ by GitHub

After complete the iOS implementation now we're able to retrieve the native manager and apply whether custom background color and/or the custom view using follow code:

	//Retrieve iOS impl.
	var manager = DependencyService.Get<ICustomContextActionsManager>();
	//Set Custom Background Color
	manager.SetCustomBackgroundColor(Color.Orange, true);
	manager.SetCustomBackgroundColor(Color.Accent);
	//User Custom View
	manager.SetCustomView(new DeleteContextActionView(), true);
	manager.SetCustomView(new SaveContextActionView());

view raw Impl.cs hosted with ❤ by GitHub

Also theres an small trick if you want to use a custom VIEW you'll need to add some hack spaces into the Text definition of the MenuItem as is displayed in the next fragment of code:

	<TextCell Text="{Binding .}">
	<TextCell.ContextActions>
	<MenuItem IsDestructive="true" Text=" " />
	<MenuItem Text=" " />
	</TextCell.ContextActions>
	</TextCell>

view raw TrickImpl.xaml hosted with ❤ by GitHub

After use the previous code you'll get the next result

IMPORTANT NOTE:
As you noticed this implementation is very customized which means that may change between Xamarin.Forms versions the version used on this example is the latest version 3.0.0.550146
So I highly recommend to be careful if you implement this way every time that you want to upgrade or downgrade the Xamarin.Forms version in your project

GITHUB REPOSITORY:

if you want to look a complete demo you can download it from here:

https://github.com/AlejandroRuiz/CustomContextActions

HAPPY CODE!!!!