user-interface - 如何向 Xamarin Forms 中的条目添加视觉前缀？

Question

假设我想为电话条目添加基于国家/地区的号码前缀？就像图片上的那样: 我怎样才能实现这一目标？

Answer 1

我会做这样的事情

 <StackLayout Orientation="Horizontal" BackgroundColor="Gray">
        <Label Text="+995 |" BackgroundColor="Transparent" />
        <Editor Text="699999999" BackgroundColor="Transparent"></Editor>
 </StackLayout>

水平堆栈布局，带有前缀标签和条目编辑器。

正如您所见，我对我的应用程序使用了相同的方法，以便在选择器旁边显示向下箭头图标。

var datectrl = new NoBorderPicker()
                {
                    VerticalOptions = LayoutOptions.Center,
                    FontSize = Device.GetNamedSize(NamedSize.Default, typeof(Label)) * FontSizes.EditFormControlFactor,
                    HeightRequest = 40,
                    BackgroundColor = Color.White,
                    HorizontalOptions = LayoutOptions.FillAndExpand,

                };

                var icon = new IconView()
                {
                    Source = "ic_keyboard_arrow_right_black_24dp",
                    Foreground = Palette._019,
                    VerticalOptions = LayoutOptions.Center,
                    HorizontalOptions = LayoutOptions.End,
                    Margin = new Thickness(0, 0, 5, 0)
                };
                var stack = new StackLayout()
                {
                    Orientation = StackOrientation.Horizontal,
                    Children =
                    {
                        datectrl,
                        icon
                    }
                };

NoBorderPicker 是一个自定义渲染器，用于删除选取器控件的边框

[assembly: ExportRenderer(typeof(NoBorderPicker), typeof(CustomPicker))]
namespace ThesisSFA.Droid.Renderers
{
    public class CustomPicker : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {

                var customBG = new GradientDrawable();
                customBG.SetColor(Android.Graphics.Color.Transparent);
                customBG.SetCornerRadius(3);
                Control.SetBackground(customBG);

                var custdatepicker = (NoBorderPicker) this.Element;
                this.Control.TextSize = (float)custdatepicker.FontSize;

            }
        }
    }
}