Xamarin Forms中如何在XAML将控件设为其他控件属性

问题背景 #

自定义BlurredImage控件接收VisualElement类型的Root属性，用于捕获目标控件截图并设置为自身图片源。在按钮点击触发截图时正常，但通过XAML绑定Root="{Binding Source={x:Reference stackLayout}}"时，平台代码var render = Platform.GetRenderer(view)出现渲染器为空的错误。

自定义控件代码：

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);
        });
    }
}

XAML代码：

<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}}" />

问题原因 #

1. XAML引用写法冗余：传递控件引用不需要嵌套Binding，直接使用{x:Reference}即可。
2. 控件渲染时机不匹配：RootPropertyChanged回调在属性赋值时立即触发，但此时目标控件stackLayout的平台渲染器尚未初始化完成，导致Platform.GetRenderer(view)返回空。

解决方案 #

1. 修正XAML中Root属性的赋值方式 #

直接使用{x:Reference stackLayout}赋值，无需Binding包裹：

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

2. 修改自定义控件逻辑，等待控件渲染完成再截图 #

通过监听目标控件的Loaded事件，确保控件已完成平台渲染后再执行截图操作，同时更新UI需回到主线程：

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;
        var oldRoot = oldValue as VisualElement;
        var newRoot = newValue as VisualElement;

        // 清理旧Root的事件绑定，避免内存泄漏
        if (oldRoot != null)
        {
            EventHandler loadedHandler = null;
            loadedHandler = (s, e) => OnRootLoaded(s, e, control, loadedHandler);
            oldRoot.Loaded -= loadedHandler;
        }

        // 给新Root绑定Loaded事件，等待控件渲染完成
        if (newRoot != null)
        {
            EventHandler loadedHandler = null;
            loadedHandler = (s, e) => OnRootLoaded(s, e, control, loadedHandler);
            newRoot.Loaded += loadedHandler;
        }
    }

    static async void OnRootLoaded(object sender, EventArgs e, BlurredImage control, EventHandler handler)
    {
        var root = sender as VisualElement;
        // 移除事件监听，避免重复触发
        root.Loaded -= handler;

        // 执行截图操作
        var imageStream = await DependencyService.Get<IVisualElementExtension>().PlatformCaptureImageAsync(root, Color.Red);
        
        // 回到主线程更新UI
        Device.BeginInvokeOnMainThread(() => 
        {
            control.Source = ImageSource.FromStream(() => imageStream);
        });
    }
}

关键要点 #

• 传递控件引用时，{x:Reference}是直接且正确的写法，无需额外Binding包装。
• 必须等待目标控件触发Loaded事件后再执行依赖平台渲染器的操作，此时控件已完成初始化。
• 更新UI元素的属性必须在主线程中执行，使用Device.BeginInvokeOnMainThread避免跨线程访问错误。
• 及时清理旧控件的事件绑定，防止内存泄漏。

内容的提问来源于stack exchange，提问作者Junaid Pathan