Xamarin.Forms 中编辑器的边框颜色
Posted
技术标签:
【中文标题】Xamarin.Forms 中编辑器的边框颜色【英文标题】：Border Color for Editor in Xamarin.Forms 【发布时间】：2015-11-19 04:17:29 【问题描述】：如何在 Xamarin.Forms 中为编辑器设置边框颜色？
我使用了这个link，但它仅适用于 android。我希望它适用于所有平台！
我对此有点新手。 请帮帮我。
有什么想法吗？
【问题讨论】：
【参考方案1】：您也可以通过使用BackgroundColor="your color" 和Padding="1" 将您的编辑器包裹在StackLayout 中并将您的编辑器的BackgroundColor 设置为与表单相同的颜色来进行归档。
类似这样的：
<StackLayout BackgroundColor="White"> <StackLayout BackgroundColor="Black" Padding="1"> <Editor BackgroundColor="White" /> </StackLayout> ... </StackLayout>
没那么花哨，但这至少会给你一个边框！
【讨论】：
确实不花哨，但对于昨天想要他的应用程序的通用客户来说已经足够快了。【参考方案2】：这是我使用的完整解决方案。你需要三样东西。
1 - 在表单项目中实现 Editor 的自定义类。
public class BorderedEditor : Editor
2 - 在您的 ios 项目中自定义 Editor 的自定义渲染器。
public class BorderedEditorRenderer : EditorRenderer
protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
base.OnElementChanged(e);
if (Control != null)
Control.Layer.CornerRadius = 3;
Control.Layer.BorderColor = Color.FromHex("F0F0F0").ToCGColor();
Control.Layer.BorderWidth = 2;
3 - 你的 iOS 项目中的 ExportRenderer 属性告诉 Xamarin 为你的自定义编辑器使用你的自定义渲染器。
[assembly: ExportRenderer(typeof(BorderedEditor), typeof(BorderedEditorRenderer))]
然后在 Xaml 中使用您的自定义编辑器：
<custom:BorderedEditor Text="Binding TextValue"/>
【讨论】：
请注意，最简单的方法是在它周围添加一个框架。
<Frame BorderColor="LightGray" HasShadow="False" Padding="0">
<Editor/>
</Frame>
【讨论】：
【参考方案4】：在您的可移植项目中添加此控件
public class PlaceholderEditor : Editor
public static readonly BindableProperty PlaceholderProperty =
BindableProperty.Create("Placeholder", typeof(string), typeof(string), "");
public PlaceholderEditor()
public string Placeholder
get
return (string)GetValue(PlaceholderProperty);
set
SetValue(PlaceholderProperty, value);
在您的 android 项目中添加此渲染器：
[assembly: ExportRenderer(typeof(PlaceholderEditor), typeof(PlaceholderEditorRenderer))]
namespace Tevel.Mobile.Packages.Droid
public class PlaceholderEditorRenderer : EditorRenderer
public PlaceholderEditorRenderer()
protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
base.OnElementChanged(e);
if (e.NewElement != null)
var element = e.NewElement as PlaceholderEditor;
this.Control.Background = Resources.GetDrawable(Resource.Drawable.borderEditText);
this.Control.Hint = element.Placeholder;
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == PlaceholderEditor.PlaceholderProperty.PropertyName)
var element = this.Element as PlaceholderEditor;
this.Control.Hint = element.Placeholder;
在你的 Resources > drawable 添加一个 XML 文件borderEditText.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape android:shape="rectangle">
<gradient
android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="270" />
<stroke
android:
android:color="#F8B334" />
<corners android:radius="12dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<gradient android:startColor="#FFFFFF" android:endColor="#FFFFFF" android:angle="270" />
<stroke android: android:color="#ccc" />
<corners android:radius="12dp" />
</shape>
</item>
</selector>
Xaml：
标题 - xmlns:ctrls="clr-namespace:my control namespace;assembly= my assembly"
控制：
<ctrls:PlaceholderEditor VerticalOptions="Fill" HorizontalOptions="StartAndExpand" Placeholder="add my comment title">
</ctrls:PlaceholderEditor>
【讨论】：
【参考方案5】：您需要为每个平台实现Custom Renderer (guide from Xamarin)，因为Xamarin.Forms 尚不支持自定义Entry 的BorderColor。
由于您已经设法在 Android 上更改了 BorderColor，您可以在此处找到适用于 iOS 的解决方案：http://forums.xamarin.com/discussion/comment/102557/#Comment_102557
【讨论】：
【参考方案6】：这肯定有效，试试这个。
Android 渲染器
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Android.Graphics;
[assembly: ExportRenderer(typeof(Entry), typeof(some.namespace.EntryRenderer))]
namespace some.namespace
public class EntryRenderer : Xamarin.Forms.Platform.Android.EntryRenderer
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
base.OnElementChanged(e);
if (Control == null || Element == null || e.OldElement != null) return;
var customColor = Xamarin.Forms.Color.FromHex("#0F9D58");
Control.Background.SetColorFilter(customColor.ToAndroid(), PorterDuff.Mode.SrcAtop);
【讨论】：
【参考方案7】：android 渲染器的简单方法
if (((Editor)Element).HasBorder)
GradientDrawable gd = new GradientDrawable();
gd.SetColor(Android.Resource.Color.HoloRedDark);
gd.SetCornerRadius(4);
gd.SetStroke(2, Android.Graphics.Color.LightGray);
Control.SetBackground(gd);
【讨论】：
【参考方案8】：将自定义控件构建为网格。围绕它构建 BoxViews 并将编辑器放置在中间并留有边距。 不好但很简单……
<Grid xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:CustomControls="clr-namespace:xxx.CustomControls"
x:Class="xxx.CustomControls.EditorWithBorder" BackgroundColor="White"
x:Name="this">
<Grid.RowDefinitions>
<RowDefinitionCollection>
<RowDefinition Height="1"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1"/>
</RowDefinitionCollection>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinitionCollection>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1"/>
</ColumnDefinitionCollection>
</Grid.ColumnDefinitions>
<Editor Text="Binding Source=x:Reference this,Path=EditorText, Mode=TwoWay" TextColor="Orange" Margin="20,10,20,10" FontSize="StaticResource FontSizeLarge"
Grid.Row="1" Grid.Column="1" />
<BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="Orange"
></BoxView>
<BoxView Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BackgroundColor="Orange"
></BoxView>
<BoxView Grid.Row="0" Grid.Column="2" Grid.RowSpan="3" BackgroundColor="Orange" HeightRequest="1"
></BoxView>
<BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="Orange" HeightRequest="1"
></BoxView>
</Grid>
【讨论】：
以上是关于Xamarin.Forms 中编辑器的边框颜色的主要内容，如果未能解决你的问题，请参考以下文章
如何向 Xamarin Forms App Shell Tabbar 添加顶部边框
如何在 Xamarin.Forms 的 Grid 中启用边框