How to set a control as a property in other control in XAML in Xamarin Forms?

Viewed 48

I want to set a control as a property in XAML.

I have a custom Control BlurredImage that sends another control (XAML view or Visual Element) as the Root for generating blurred background for the current Image. I have implemented custom control.

Here's my custom control:

public class BlurredImage : Image
{
    public static readonly BindableProperty RootProperty = BindableProperty.Create(nameof(Root), typeof(VisualElement), typeof(BlurredImage), propertyChanged: RootPropertyChanged);

    public VisualElement Root { get => (VisualElement)GetValue(RootProperty); set => SetValue(RootProperty, value); }

    static void RootPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var control = (BlurredImage)bindable;

        Task.Run(async () =>
        {
            var imageStream = await DependencyService.Get<IVisualElementExtension>().PlatformCaptureImageAsync(control. Root, Color.Red);
            control. Source = ImageSource.FromStream(() => imageStream);
        });
    }
}

The RootPropertyChanged() is added here for reference, it works properly when capturing an image of a UI by a button click, it only has a problem, when I specify Root="{Binding someView, Source={x:Reference this}}"

Here is my XAML code when I am creating BlurredImage in my XAML Page:

<StackLayout x:Name="stackLayout">
    <BoxView Color="Blue" HeightRequest="50" WidthRequest="100" />
    <Label Text="This will be blurred" />
</StackLayout>

<ext:BlurredImage Aspect="AspectFit" VerticalOptions="FillAndExpand" 
                  Source="waterfront.jpg" 
                  Root="{Binding Source={x:Reference stackLayout}}" />

I have provided BlurredImage's Source just to avoid error, As I am getting an error, if the source is not specified.

What this code does is: capture a screenshot of the control that is given in the Root property, and then set the Source of the BlurredImage.

I just want to get the control named stackLayout and pass it under the Root property of the BlurredImage. When I specify Root as above, I am getting error as render is null in platform code var render = Platform.GetRenderer(view); This is probably because I am not able to set Root property value to the control in XAML.

Am I doing everything correctly? How can I pass a control as a property value from XAML?

0 Answers
Related