Xamarin Forms: Entry Math Fraction

Question

I'm trying to create a Entry that displays an Entry in a fraction style. I really need to do in a way that it gets aligned (numerator, horizontal line below and the denominator below) as the image shows.

The fraction can be in the middle of the formula, so I can't just set Grid.Row to it, because it gets unaligned.

Any ideas?

Answer 1

You can simply create your own custom control like this without using any third party library:

FractionEntryControl XAML code

<ContentView
    x:Class="SampleApp.Controls.FractionEntryControl"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Name="this">
    <ContentView.Content>
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
            <Frame
                Padding="20"
                BorderColor="DodgerBlue"
                CornerRadius="10">
                <StackLayout Spacing="0">
                    <Entry Text="{Binding Source={x:Reference this}, Path=NumeratorText}" WidthRequest="10" />
                    <BoxView BackgroundColor="Black" HeightRequest="1" />
                    <Entry Text="{Binding Source={x:Reference this}, Path=DenominatorText}" WidthRequest="10" />
                </StackLayout>
            </Frame>
        </StackLayout>
    </ContentView.Content>
</ContentView>

FractionEntryControl Code behind:

public partial class FractionEntryControl : ContentView
{
    public FractionEntryControl()
    {
        InitializeComponent();
    }

    public static BindableProperty NumeratorTextProperty = BindableProperty.Create(nameof(NumeratorText), typeof(string),
            typeof(FractionEntryControl), defaultValue: string.Empty);

    public string NumeratorText
    {
        get { return (string)GetValue(NumeratorTextProperty); }
        set { SetValue(NumeratorTextProperty, value); }
    }

    public static BindableProperty DenominatorTextProperty = BindableProperty.Create(nameof(DenominatorText), typeof(string),
            typeof(FractionEntryControl), defaultValue: string.Empty);

    public string DenominatorText
    {
        get { return (string)GetValue(DenominatorTextProperty); }
        set { SetValue(DenominatorTextProperty, value); }
    }
}

Android Entry Renderer for removing default underline:

protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
     base.OnElementChanged(e);
     if (Control != null)
     {
         Control.Background = new ColorDrawable(Android.Graphics.Color.Transparent);
         Control.Gravity = GravityFlags.CenterHorizontal;   
     }
}

Use this control in your View:

<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
     <control:FractionEntryControl DenominatorText="20" NumeratorText="10" />
</StackLayout>

Output: