Kolor obramowania dla edytora w Xamarin.Forms

Question

Jak mogę utworzyć kolor obramowania dla edytora w Xamarin.Forms?

Użyłem tego link, ale działa tylko dla Androida. Chcę, żeby działał na wszystkich platformach!

Jestem trochę początkujący w tym. Proszę, pomóż mi.

Każdy pomysł?

Answer 1

Trzeba będzie wdrożyć Custom Renderer (guide from Xamarin) dla każdej platformy od Dostosowywanie BorderColor o Entry nie jest jeszcze obsługiwana w Xamarin.Forms.

Skoro już udało się zmienić BorderColor na Androida można znaleźć rozwiązanie dla iOS tutaj: http://forums.xamarin.com/discussion/comment/102557/#Comment_102557

Answer 2

w projekcie przenośnego dodać tej kontroli

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

w swojej android project dodaj ten mechanizm renderowania:

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

w zasobach> odkształcalne dodać plik 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: Nagłówek - xmlns:ctrls="clr-namespace:my control namespace;assembly= my assembly" kontrola:

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

Answer 3

Możesz także Archiwum to poprzez owinięcie z edytora a StackLayout z BackgroundColor="your color" i Padding="1" i ustaw BackgroundColor twojego Edytora na ten sam kolor formularza.

coś takiego:

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

że nie fantazyjny, ale będzie to przynajmniej Ci granicę!

Answer 4

Oto kompletne rozwiązanie, którego używałem. Potrzebujesz trzech rzeczy.

1 - Niestandardowa klasa implementująca Editor w projekcie formularzy.

public class BorderedEditor : Editor 
{ 

} 

2 - Niestandardowy mechanizm renderujący dla własnych Editor w projekcie 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 - atrybut ExportRenderer w projekcie iOS, który mówi Xamarin użyć niestandardowego renderujący dla niestandardowego edytora.

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

Następnie za pomocą edytora niestandardowy w XAML:

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

Answer 5

Działa to na pewno, spróbuj tego.

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

Answer 6

łatwy sposób android renderujący

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

Budowanie niestandardowych formantów w postaci siatki. Zbuduj BoxViews wokół niego i umieść Edytor w środku z marginesem. nie miły, ale proste ...

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