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：