Color del borde para el editor en Xamarin.Forms

También puede archieve esto envolviendo su Editor con un StackLayout con BackgroundColor="your color" y Padding="1" y establecer el BackgroundColor de su Editor para el mismo color del formulario.

Algo como esto:

 <StackLayout BackgroundColor="White"> <StackLayout BackgroundColor="Black" Padding="1"> <Editor BackgroundColor="White" /> </StackLayout> ... </StackLayout> 

No es que lujoso, pero esto por lo menos te consigue una frontera!

Aquí está la solución completa que usé. Necesitas tres cosas.

1 – Una clase personalizada que implementa Editor en el proyecto de formularios.

 public class BorderedEditor : Editor { } 

2 – Un renderizador personalizado para su Editor personalizado en su proyecto iOS.

 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 – Un atributo ExportRenderer en su proyecto iOS que le dice a Xamarin que utilice su renderizador personalizado para su editor personalizado.

 [assembly: ExportRenderer(typeof(BorderedEditor), typeof(BorderedEditorRenderer))] 

A continuación, utilice su editor personalizado en Xaml:

 <custom:BorderedEditor Text="{Binding TextValue}"/> 

En su proyecto portátil agregue este control

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

En tu proyecto androide agrega este renderizador:

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

En tus recursos> drawable agrega un archivo 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:width="3dp" 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:width="3dp" android:color="#ccc" /> <corners android:radius="12dp" /> </shape> </item> </selector> 

Xaml: Encabezado – xmlns:ctrls="clr-namespace:my control namespace;assembly= my assembly" control:

 <ctrls:PlaceholderEditor VerticalOptions="Fill" HorizontalOptions="StartAndExpand" Placeholder="add my comment title"> </ctrls:PlaceholderEditor> 

Necesitará implementar un Custom Renderer ( guía de Xamarin ) para cada plataforma, ya que la personalización del BorderColor de una Entry no se admite en Xamarin.Forms .

Ya que ya has logrado cambiar el BorderColor en Android, puedes encontrar una solución para iOS aquí: http://forums.xamarin.com/discussion/comment/102557/#Comment_102557

Esto funciona con seguridad, prueba esto.

Android Renderer

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

Manera fácil al procesador del androide

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

Generar un control personalizado como una cuadrícula. Construir BoxViews alrededor de él y colocar el Editor en el medio con margen. No es agradable pero sencillo …

  <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>