Title of UIButton is not visible when UIVibrancyEffect is applied

Question

I'm having trouble applying UIVibrancyEffect to my UIButtons in iOS today widget. I want them to like default "Edit" button in notification centre's Today section:

As you can see in the screenshot, default button is vibrant and looks much better.

I tried replacing widget's View with UIVisualEffectView like that:

UIVisualEffectView effectView = new UIVisualEffectView(UIVibrancyEffect.CreateForNotificationCenter ());
effectView.Frame = this.View.Bounds;
effectView.AutoresizingMask = this.View.AutoresizingMask;
UIView oldView = this.View;
this.View = effectView;
effectView.ContentView.AddSubview(oldView);
this.View.TintColor = UIColor.Clear;

And it appears to be working, but titles of my buttons become vibrant as well (I want them to remain black):

Is there a way to prevent button titles from becoming vibrant when UIVibrancyEffect is applied?

I should also add that I'm using Xamarin.iOS.

Answer 1

I seem to have a solution to my own problem. I ended up creating UIVisualEffectView with blank UIView inside and adding it behind UIButton.

This code snippet shows how to style one button:

// Create effect view
var effectView = new UIVisualEffectView(UIVibrancyEffect.CreateForNotificationCenter ());
// This color looks best for me. You can play around with it to make it look better
effectView.BackgroundColor = UIColor.FromRGBA(55, 55, 55, 100);
// Position effectView
effectView.Frame = myButton.Frame;
// Add effectView and send it to back, behind actual button
this.View.AddSubview(effectView);
this.View.SendSubviewToBack (effectView);

// Create UIView and add it to effectView's ContentView
var view = new UIView ();
view.BackgroundColor = UIColor.White;
effectView.ContentView.AddSubview(view);
view.Frame = new CGRect(0, 0, effectView.Frame.Width, effectView.Frame.Height);

// Make sure your effect view has rounded corners
effectView.Layer.MasksToBounds = true;
effectView.Layer.CornerRadius = 4.0f;

And this is how it looks: