如何在Xamarin UWP中创建带圆角边框的Entry和Editor控件

Entry 圆角问题修正 #

你的Entry渲染器没生效，大概率是这两个原因：

1. 代码里引用的borderBrush资源未定义，导致边框刷为空，视觉上看不到效果
2. 部分情况下UWP默认控件模板会覆盖CornerRadius属性，需要明确设置背景色避免冲突

修正后的Entry渲染器代码：

[assembly: ExportRenderer(typeof(Entry), typeof(RoundedEntry))]
namespace combo.UWP
{
    public class RoundedEntry : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.BorderThickness = new Windows.UI.Xaml.Thickness(1);
                // 直接指定边框颜色，避免资源不存在的问题
                Control.BorderBrush = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Gray);
                // 100的圆角半径足够让边角完全圆润
                Control.CornerRadius = new Windows.UI.Xaml.CornerRadius(100);
                // 设置背景色，避免默认背景样式覆盖圆角
                Control.Background = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.White);
            }
        }
    }
}

Picker 圆角实现 #

Picker对应的UWP原生控件是ComboBox，直接创建自定义渲染器即可：

[assembly: ExportRenderer(typeof(Picker), typeof(RoundedPicker))]
namespace combo.UWP
{
    public class RoundedPicker : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.BorderThickness = new Windows.UI.Xaml.Thickness(1);
                Control.BorderBrush = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Gray);
                Control.CornerRadius = new Windows.UI.Xaml.CornerRadius(100);
                Control.Background = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.White);
                
                // 如果下拉按钮样式破坏了圆角，可自定义ComboBox的Style调整
                var comboBox = Control as Windows.UI.Xaml.Controls.ComboBox;
                comboBox?.ApplyTemplate();
            }
        }
    }
}

Editor 圆角实现 #

Editor对应UWP的多行TextBox，渲染器实现如下：

[assembly: ExportRenderer(typeof(Editor), typeof(RoundedEditor))]
namespace combo.UWP
{
    public class RoundedEditor : EditorRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.BorderThickness = new Windows.UI.Xaml.Thickness(1);
                Control.BorderBrush = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Gray);
                Control.CornerRadius = new Windows.UI.Xaml.CornerRadius(100);
                Control.Background = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.White);
                // 增加内边距，避免文字贴边框
                Control.Padding = new Windows.UI.Xaml.Thickness(12, 8, 12, 8);
            }
        }
    }
}

注意事项 #

• 所有渲染器必须放在UWP项目中，命名空间要和项目一致
• 如果需要统一样式，可把颜色、圆角值定义在UWP的资源字典里，渲染器直接引用，不用硬编码
• 要是自定义了控件模板，得确保模板里的Border控件绑定了CornerRadius属性，不然设置Control的CornerRadius可能无效

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