Xamarin Forms:入门数学分数
Xamarin Forms: Entry Math Fraction
我正在尝试创建一个以分数样式显示 Entry
的条目。正如 image 所示,我真的需要以一种对齐的方式(分子、下方的水平线和下方的分母)进行操作。
分数可以在公式的中间,所以我不能只给它设置 Grid.Row
,因为它没有对齐。
有什么想法吗?
您可以像这样简单地创建自己的自定义控件,而无需使用任何第三方库:
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>
输出:
我正在尝试创建一个以分数样式显示 Entry
的条目。正如 image 所示,我真的需要以一种对齐的方式(分子、下方的水平线和下方的分母)进行操作。
分数可以在公式的中间,所以我不能只给它设置 Grid.Row
,因为它没有对齐。
有什么想法吗?
您可以像这样简单地创建自己的自定义控件,而无需使用任何第三方库:
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>
输出: