Xamarin 形式：输入数学分数

Posted 2023-04-13

【中文标题】Xamarin 形式：输入数学分数

【英文标题】：Xamarin Forms: Entry Math Fraction

【发布时间】：2022-01-16 11:26:39

【问题描述】：

我正在尝试创建一个以分数样式显示Entry 的条目。我真的需要按照image 所示的方式对齐（分子、下方的水平线和下方的分母）。

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

有什么想法吗？

【问题讨论】：

您可能需要使用 SkiaSharp，或者查看每个平台提供的本机文本支持。这听起来像一个非常重要的问题要解决

@Jason 是的，我在考虑 SkiaSharp，我试图使用 Xamarin Essentials 中的一些东西或一些本机包或只做分数的包，但这些都不是用于条目的。可能我会使用 SkiaSharp。现在谢谢。

用户将如何与此条目交互？他们是否键入3/9，然后该条目将其转换为显示的样式？您是否打算扩展它以输入更复杂的公式？如果没有，请考虑为分子和除数设置两个条目。

还可以考虑另一种方法，他们在文本框（“3/9”）中编辑公式的“字符串化”版本，并在其下方，作为一个单独的框，显示花哨公式作为您使用 SkiaSharp 绘制的图像。

或在AbsoluteLayout 内使用Xamarin Forms Shapes 绘制单独的框。

【参考方案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 Entry Renderer：

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>

输出：

【讨论】：

好的，但是我把这个Android Entry Renderer for removing default underline放在哪里？我试图在 Android 上放入 MainActivity.cs 但我无法覆盖它。我的项目是 Xamarin Forms。

@Que44 先了解Xamarin表单中Renderers的概念：docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/…

谢谢，成功了。