Colore bordo per Editor in Xamarin.Forms

Question

Come posso creare un colore di bordo per Editor in Xamarin.Forms?

Ho usato questo link, ma funziona solo per Android. Voglio che funzioni su tutte le piattaforme!

Sono un po 'novizio per questo. Per favore aiutatemi.

Qualche idea?

Answer 1

Sarà necessario implementare un Custom Renderer (guide from Xamarin) per ciascuna piattaforma in quanto la personalizzazione della BorderColor di un Entry non è ancora supportata in Xamarin.Forms.

Dal momento che avete già riusciti a cambiare il BorderColor su Android, è possibile trovare una soluzione per iOS qui: http://forums.xamarin.com/discussion/comment/102557/#Comment_102557

Answer 2

nel progetto portatile aggiungere questo controllo

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

nella vostra progetto Android aggiungi questo renderer:

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

nelle risorse> drawable aggiungere un file 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: Header - xmlns:ctrls="clr-namespace:my control namespace;assembly= my assembly" controllo:

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

Answer 3

Si può anche archieve questo avvolgendo l'Editor con a StackLayout con BackgroundColor="your color" e Padding="1" e impostare lo BackgroundColor dell'Editor sullo stesso colore del modulo.

Qualcosa di simile a questo:

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

Non che la fantasia, ma questo, almeno si ottiene un bordo!

Answer 4

Ecco la soluzione completa che ho usato. Hai bisogno di tre cose.

1 - Una classe personalizzata che implementa Editor nel progetto di moduli.

public class BorderedEditor : Editor 
{ 

} 

2 - Un renderer personalizzato per la vostra abitudine Editor nel progetto 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 attributo ExportRenderer nel progetto iOS che racconta Xamarin di utilizzare il renderer personalizzato per il vostro editor personalizzato.

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

quindi utilizzare il vostro editor personalizzato in XAML:

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

Answer 5

Questo funziona di sicuro, provare questo.

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

Answer 6

facile modo per renderer 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); 
       } 

Answer 7

Costruire un controllo personalizzato come una griglia. Costruisci BoxViews attorno e posiziona l'Editor al centro con margine. Non bello ma semplice ...

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