wake-up-neo.com

Rahmenfarbe für den Editor in Xamarin.Forms

Wie kann ich in Xamarin.Forms eine Rahmenfarbe für den Editor erstellen?

Ich habe dieses link verwendet, aber es funktioniert nur für Android. Ich möchte, dass es auf allen Plattformen funktioniert!

Ich bin ein kleiner Neuling dazu .. Bitte helft mir.

Irgendeine Idee?

c#androidxamarinxamarin.forms
17
Vaikesh

Sie können dies auch erreichen, indem Sie Ihren Editor mit einer StackLayout mit BackgroundColor="your color" und Padding="1" umschließen und die BackgroundColor Ihres Editors auf dieselbe Farbe des Formulars setzen.

Etwas wie das:

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

Nicht so schick, aber das bringt dir wenigstens eine Grenze!

38
hsjolin

Hier ist die komplette Lösung, die ich verwendet habe. Du brauchst drei Dinge.

1 - Eine benutzerdefinierte Klasse, die Editor in Ihrem Formularprojekt implementiert.

public class BorderedEditor : Editor
{

}

2 - Ein benutzerdefinierter Renderer für Ihr benutzerdefiniertes Editor in Ihrem iOS-Projekt.

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 - Ein ExportRenderer-Attribut in Ihrem iOS-Projekt, das Xamarin anweist, Ihren benutzerdefinierten Renderer für Ihren benutzerdefinierten Editor zu verwenden.

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

Dann verwenden Sie Ihren benutzerdefinierten Editor in Xaml:

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

füge diese Kontrolle in deinem tragbaren Projekt hinzu 

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

füge in deinem Android-Projekt diesen Renderer hinzu: 

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

in Ihren Ressourcen> drawable fügen Sie eine XML-Datei borderEditText.xml hinzu 

 <?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" Steuerung:

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

Am einfachsten ist es, einen Rahmen um ihn herum hinzuzufügen.

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

Sie müssen für jede Plattform einen Custom Renderer ( guide von Xamarin ) implementieren, da die Anpassung der BorderColor einer Entry in Xamarin.Forms noch nicht unterstützt wird.

Da Sie die BorderColor unter Android bereits geändert haben, finden Sie hier eine Lösung für iOS: http://forums.xamarin.com/discussion/comment/102557/#Comment_102557

1
Demitrian

Das funktioniert sicher, probieren Sie es aus.

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

Erstellen Sie ein benutzerdefiniertes Steuerelement als Raster. Bauen Sie BoxViews auf und platzieren Sie den Editor in der Mitte mit Rand.

    <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

einfacher Weg zum Android-Renderer 

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