I need a content view that blurs whatever is below it so I thought I'd try writing a custom control and an iOS renderer for it. This is the class definition ...
public class XBlurredContentView : ContentView
{
}
... here's the custom renderer ...
public class XBlurFrameRenderer : ViewRenderer<XBlurredContentView,UIView>
{
private UIVisualEffectView _effectView;
protected override void OnElementChanged(ElementChangedEventArgs<XBlurredContentView> e)
{
base.OnElementChanged(e);
var blurFrame = e.NewElement;
if (blurFrame != null)
{
var effect = UIBlurEffect.FromStyle(UIBlurEffectStyle.Light);
_effectView = new UIVisualEffectView(effect);
SetNativeControl(_effectView);
}
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
if (e.PropertyName == VisualElement.XProperty.PropertyName
|| e.PropertyName == VisualElement.YProperty.PropertyName
|| e.PropertyName == VisualElement.HeightProperty.PropertyName
|| e.PropertyName == VisualElement.WidthProperty.PropertyName)
{
var x = Element.X; var y = Element.Y; var w = Element.Width; var h = Element.Height;
_effectView.Frame = new CGRect(x, y, w, h);
}
base.OnElementPropertyChanged(sender, e);
}
}
... and here's the XAML to test it ...
<customUi:XBlurredContentView HeightRequest="50">
<Grid>
<Button Text="Hello World" TextColor="White" />
</Grid>
</customUi:XBlurredContentView>
The expected are does get blurred as expected but the content (the "Hello World" button isn't visible. I double checked with the Live Inspector and it does look like the button (and it's UILabel) is added correctly but nothing is visible on screen. This is my first go at deriving the ContentView into a custom control so I guess I need to learn more but what have I missed?
