Xamarin.Forms UWP自定义渲染器在绑定属性更新时失效问题

嘿，我之前踩过类似的坑！这种情况大概率是因为你的自定义渲染器只在控件首次初始化时执行了文本居中的逻辑，但当绑定的文本更新时，并没有重新触发布局调整的代码。咱们一步步来修复它：

1. 确保监听属性/内容变更事件 #

在UWP的自定义渲染器里，你需要同时监听两个层面的变更：

• Xamarin.Forms元素的属性变更（比如自定义按钮的Text属性）
• UWP原生控件的内容变更（避免控件内部重新生成TextBlock导致设置被重置）

示例代码如下：

[assembly: ExportRenderer(typeof(TwoLineButton), typeof(TwoLineButtonRenderer))]
namespace YourApp.UWP.Renderers
{
    public class TwoLineButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                // 初始化时先设置一次居中
                UpdateTextLayout();
                // 订阅UWP控件的内容变更事件
                Control.ContentChanged += OnContentChanged;
            }

            // 清理旧元素的事件订阅，防止内存泄漏
            if (e.OldElement != null)
            {
                e.OldElement.PropertyChanged -= OnElementPropertyChanged;
                if (Control != null)
                {
                    Control.ContentChanged -= OnContentChanged;
                }
            }

            // 订阅新元素的属性变更事件
            if (e.NewElement != null)
            {
                e.NewElement.PropertyChanged += OnElementPropertyChanged;
            }
        }

        // 处理UWP控件内容变更（比如内部TextBlock被重新创建）
        private void OnContentChanged(object sender, ContentChangedEventArgs e)
        {
            UpdateTextLayout();
        }

        // 处理Xamarin.Forms元素的属性变更（比如Text属性更新）
        private void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            // 只在Text属性变更时触发布局更新
            if (e.PropertyName == nameof(TwoLineButton.Text))
            {
                UpdateTextLayout();
            }
        }

        // 封装文本居中逻辑，方便重复调用
        private void UpdateTextLayout()
        {
            if (Control.Content is TextBlock textBlock)
            {
                textBlock.TextAlignment = Windows.UI.Xaml.TextAlignment.Center;
                textBlock.TextWrapping = Windows.UI.Xaml.TextWrapping.Wrap;
                // 如果需要固定两行，可以加上MaxLines=2，或者调整LineHeight
                // textBlock.MaxLines = 2;
                // textBlock.LineHeight = 20;
            }
        }
    }
}

2. 确认Xamarin.Forms自定义按钮的绑定属性正确 #

确保你的自定义按钮类中，Text属性是标准的绑定属性，并且会触发PropertyChanged事件：

public class TwoLineButton : Button
{
    public static readonly BindableProperty TextProperty =
        BindableProperty.Create(
            nameof(Text), 
            typeof(string), 
            typeof(TwoLineButton), 
            string.Empty,
            BindingMode.TwoWay,
            propertyChanged: (bindable, oldVal, newVal) => 
            {
                // 这里可以加一些额外的属性变更逻辑，比如通知渲染器
            });

    public string Text
    {
        get => (string)GetValue(TextProperty);
        set => SetValue(TextProperty, value);
    }
}

3. 额外注意：避免ContentTemplate覆盖设置 #

如果你给按钮设置了ContentTemplate，要确保模板内的TextBlock已经默认设置了居中，或者在模板加载完成后再通过渲染器调整：

<!-- 如果用XAML模板，直接在模板里设置对齐 -->
<local:TwoLineButton>
    <local:TwoLineButton.ContentTemplate>
        <DataTemplate>
            <TextBlock 
                Text="{Binding Text}" 
                TextAlignment="Center" 
                TextWrapping="Wrap"
                MaxLines="2"/>
        </DataTemplate>
    </local:TwoLineButton.ContentTemplate>
</local:TwoLineButton>

核心原理 #

问题的本质是：初始化时你手动设置了TextBlock的居中，但当绑定文本更新时，UWP控件可能会重新生成内部的TextBlock（或者只是更新文本内容但不保留之前的布局设置），导致居中逻辑失效。通过监听属性/内容变更事件，每次文本更新时重新执行布局设置，就能解决这个问题。

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