it-swarm.com.ru

Цвет границы для редактора в Xamarin.Forms

Как сделать цвет границы для редактора в Xamarin.Forms?

Я использовал эту ссылку , но она работает только для Android. Я хочу, чтобы это работало на всех платформах!

Я немного новичок в этом . Пожалуйста, помогите мне.

Любая идея?

17
Vaikesh

Вы также можете архивировать это, обернув ваш Редактор StackLayout с BackgroundColor="your color" и Padding="1" и установите BackgroundColor вашего Редактора в тот же цвет формы.

Что-то вроде этого:

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

Не так уж и сложно, но это, по крайней мере, даст вам границу!

38
hsjolin

Вот полное решение, которое я использовал. Вам нужны три вещи.

1 - Пользовательский класс, который реализует Editor в вашем проекте форм.

public class BorderedEditor : Editor
{

}

2 - Пользовательский рендер для вашего Editor в вашем проекте 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 - Атрибут ExportRenderer в вашем проекте iOS, который говорит Xamarin использовать ваш собственный рендерер для вашего собственного редактора.

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

Затем используйте свой собственный редактор в Xaml:

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

в вашем переносимом проекте добавьте этот элемент управления

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

в ваших ресурсах> 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: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: Заголовок - xmlns:ctrls="clr-namespace:my control namespace;Assembly= my Assembly" Control:

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

Самый простой способ - добавить рамку вокруг него.

 <Frame BorderColor="LightGray" HasShadow="False" Padding="0">
     <Editor/>
 </Frame>
2
lyndon hughey

Вам потребуется реализовать Custom Renderer ( руководство от Xamarin ) для каждой платформы, так как настройка BorderColor для Entry еще не поддерживается в Xamarin.Forms.

Поскольку вам уже удалось изменить BorderColor на Android, вы можете найти решение для iOS здесь: http://forums.xamarin.com/discussion/comment/102557/#Comment_102557

1
Demitrian

Это работает наверняка, попробуйте это.

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);
            }
        }
    }
0
Parth Patel

Создайте пользовательский элемент управления в виде сетки. Создайте 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>
0
Alex Freund

простой способ рендерера 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);
                }
0
Abdullah Tahan