Xamarin Forms：输入数学分数

Question

我正在尝试创建一个以分数样式显示Entry的条目。 如图所示，我真的需要以一种对齐的方式进行操作（分子、下方的水平线和下方的分母）。

分数可以在公式的中间，所以我不能只将Grid.Row设置为它，因为它没有对齐。

有任何想法吗？

Answer 1

您可以像这样简单地创建自己的自定义控件，而无需使用任何第三方库：

FractionEntryControl XAML 代码

<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 后面的代码：

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 用于删除默认下划线的条目渲染器：

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

在您的视图中使用此控件：

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

Output：