Hello,
I'm struggling with Editor component and have no clue on how to solve it.
I have an Editor (in fact an ExtEditor that inherits from Editor and has a Renderer). When the Text property is empty, the editor is very small. When I have some text in it it takes the width of this text. It has a style applied with HorizontalOptions set as FillAndExpand.
How could I set the width of this editor so it takes the available width of the container ?
Some code :
My view ; components:EditEntityPropertyRow is a composite component with a bunch of styles, and a label followed by whatever control I need in EditView, it works fine for every other kind of controls (Entry, DatePicker...) :
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:i18n="clr-namespace:Sharemat.Locales;assembly=Sharemat"
xmlns:components="clr-namespace:Sharemat.Components;assembly=Sharemat"
x:Class="Sharemat.Pages.Reports.ReportCreateTabs.MainTab">
<ContentPage.Content>
<StackLayout VerticalOptions="FillAndExpand">
<ScrollView Padding="10, 0, 10, 0">
<StackLayout>
<StackLayout BackgroundColor="White">
...
<components:EditEntityPropertyRow Title="{i18n:Translate Entity.Intervention.Report.Description}">
<components:EditEntityPropertyRow.EditView>
<AbsoluteLayout HeightRequest="100" HorizontalOptions="FillAndExpand">
<components:ExtEditor x:Name="ReportDescriptionEditor" Text="Binding Item.ReportDescription" Style="{StaticResource EditEntityPropertyExtEditor}" />
<components:MenuIcon x:Name="SpeechRecognition" IconName="speech-recognition"
HorizontalOptions="End"
VerticalOptions="End"
HeightRequest="60"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
/>
</AbsoluteLayout>
</components:EditEntityPropertyRow.EditView>
</components:EditEntityPropertyRow>
...
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
The style for EditEntityPropertyExtEditor :
<Style x:Key="EditEntityPropertyExtEditor" TargetType="components:ExtEditor">
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="VerticalOptions" Value="FillAndExpand" />
<Setter Property="FontSize" Value="14" />
<Setter Property="HeightRequest" Value="100" />
</Style>
The renderer for ExtEditor just sets a background with rounded border :
using System;
using Android.Content;
using Android.Graphics.Drawables;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Sharemat.Components;
using Sharemat.Droid.Renderers;
[assembly: ExportRenderer(typeof(ExtEditor), typeof(ExtEditorRenderer))]
namespace Sharemat.Droid.Renderers
{
public class ExtEditorRenderer : EditorRenderer
{
public ExtEditorRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Editor> e)
{
base.OnElementChanged(e);
if (e.OldElement == null)
{
// Crée un drawable avec des bords arrondis
GradientDrawable MyCornerRadiusDrawable = new GradientDrawable();
MyCornerRadiusDrawable.SetCornerRadius(3);
MyCornerRadiusDrawable.SetStroke(1, Xamarin.Forms.Color.Black.ToAndroid());
// Combine les drawable
Drawable[] DrawablesArray = { MyCornerRadiusDrawable };
var layers = new LayerDrawable(DrawablesArray);
// Rabougrit le padding sinon le controle prend trop ses aises
Control.SetPadding(7, 7, 7, 7);
// Set le background avec les drawables créés
Control.SetBackground(layers);
}
}
}
}