Comment puis-je créer une couleur de bordure pour l'éditeur dans Xamarin.Forms?
J'ai utilisé ce link , mais cela ne fonctionne que pour Android. Je veux que cela fonctionne sur toutes les plateformes!
Je suis un peu novice à cette . S'il vous plaît aidez-moi.
Une idée?
Vous pouvez également résoudre ce problème en enveloppant votre éditeur avec une StackLayout
avec BackgroundColor="your color"
et Padding="1"
et en définissant la BackgroundColor
de votre éditeur avec la même couleur que le formulaire.
Quelque chose comme ça:
<StackLayout BackgroundColor="White"> <StackLayout BackgroundColor="Black" Padding="1"> <Editor BackgroundColor="White" /> </StackLayout> ... </StackLayout>
Pas tant que ça, mais ça vous donnera au moins une frontière!
Voici la solution complète que j'ai utilisée. Vous avez besoin de trois choses.
1 - Une classe personnalisée qui implémente Editor
dans votre projet de formulaire.
public class BorderedEditor : Editor
{
}
2 - Un moteur de rendu personnalisé pour votre Editor
personnalisée dans votre projet 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 attribut ExportRenderer
dans votre projet iOS qui indique à Xamarin d'utiliser votre rendu personnalisé pour votre éditeur personnalisé.
[Assembly: ExportRenderer(typeof(BorderedEditor), typeof(BorderedEditorRenderer))]
Ensuite, utilisez votre éditeur personnalisé dans Xaml:
<custom:BorderedEditor Text="{Binding TextValue}"/>
dans votre projet portable, ajoutez ce contrôle
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);
}
}
}
dans votre projet Android, ajoutez ce moteur de rendu:
[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;
}
}
}
}
dans vos ressources> drawable, ajoutez un fichier 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"
Control:
<ctrls:PlaceholderEditor VerticalOptions="Fill" HorizontalOptions="StartAndExpand" Placeholder="add my comment title">
</ctrls:PlaceholderEditor>
Le moyen le plus simple consiste à ajouter un cadre autour.
<Frame BorderColor="LightGray" HasShadow="False" Padding="0">
<Editor/>
</Frame>
Vous devrez implémenter un Custom Renderer
( guide de Xamarin ) pour chaque plate-forme, car la personnalisation de la BorderColor
d'une Entry
n'est pas encore prise en charge dans Xamarin.Forms
.
Puisque vous avez déjà réussi à changer la BorderColor
sur Android, vous pouvez trouver une solution pour iOS ici: http://forums.xamarin.com/discussion/comment/102557/#Comment_102557
Cela fonctionne à coup sûr, essayez ceci.
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);
}
}
}
Construire un contrôle personnalisé sous forme de grille. Construisez BoxViews autour de lui et placez l'éditeur au milieu avec une marge .
<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>
moyen facile de rendre 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);
}