Xamarin Forms 日期和时间选择器答案

【问题标题】：Xamarin Forms date and time pickerXamarin Forms 日期和时间选择器
【发布时间】：2019-08-05 23:47:30
【问题描述】：

我正在使用 Xamarin Forms 制作跨平台应用程序，我需要创建用户可以选择日期和时间的简单视图，类似于以下内容：我在这里找到的View that I want to create：Picker in Xamarin iOS。 Android 解决方案已准备就绪，但我需要在同一个应用程序中为 iOS 创建解决方案

我不能独立于 Xamarin Forms 使用标准日期选择器和另一个标准时间选择器。我需要创建自定义解决方案（一个视图 - 只需选择日期和时间）。

我尝试在 Xamarin Forms 中创建视图，该视图由 2 个水平方向的列表（一个用于日期，一个用于时间）组成，但是当我选择一个位置时，列表不会滚动到视图中间，而且还有当我向上或向下滚动列表时，不会自动选择中间位置元素。我想创建类似于 Xamarin-iOS 解决方案的东西：“日期和时间选择器”，但在 Xamarin 表单中。

我还尝试在 Xamarin-iOS 中创建项目“日期和时间选择器”的一部分。我有 main.storyboard 和视图控制器，但我不知道如何在 Xamarin Forms 中显示来自 Xamarin-iOS 的视图并传递选定的日期和时间。

你能帮帮我吗？

【问题讨论】：

欢迎加入！请阅读how-to-ask 并更正您的问题

标签： c# visual-studio xamarin.forms xamarin.ios

【解决方案1】：

如果您想在 Xamarin.Forms 中使用本机视图，请在此处阅读：https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/native-views/

【讨论】：

【解决方案2】：

如果你想在iOS平台的Xamarin.Forms上实现日期时间选择器，可以使用CustomRenderer。

在表单中

创建Picker的子类

public class MyPicker:Picker
{
    public MyPicker()
    {

    }
}

并将其添加到 xaml 中

<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
    <!-- Place new controls here -->

    <local:MyPicker  WidthRequest="150"  BackgroundColor="AliceBlue"/>

</StackLayout>

在 iOS 中

创建Picker的渲染器。您可以根据需要设置选择器的format。

using System;

using Foundation;
using UIKit;
using ObjCRuntime;

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

using xxx;
using xxx.iOS;

[assembly:ExportRenderer(typeof(MyPicker),typeof(MyPickerRenderer))]
namespace xxx.iOS
{
  public class MyPickerRenderer:PickerRenderer
  {

    string SelectedValue;

    public MyPickerRenderer()
    {

    }

    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
    {
        base.OnElementChanged(e);

        if(Control!=null)
        {
            SetTimePicker();
        }

    }


    void  SetTimePicker()
    {
        UIDatePicker picker = new UIDatePicker
        {
            Mode = UIDatePickerMode.DateAndTime
        };

        picker.SetDate(NSDate.Now,true);

        picker.AddTarget(this,new Selector("DateChange:"),UIControlEvent.ValueChanged);

        Control.InputView = picker;


        UIToolbar toolbar = (UIToolbar)Control.InputAccessoryView;

        UIBarButtonItem done = new UIBarButtonItem("Done", UIBarButtonItemStyle.Done, (object sender, EventArgs click) =>
        {
            Control.Text = SelectedValue;
            toolbar.RemoveFromSuperview();
            picker.RemoveFromSuperview();
            Control.ResignFirstResponder();
            MessagingCenter.Send<Object, string>(this, "pickerSelected", SelectedValue);



        });

        UIBarButtonItem empty = new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace, null);

        toolbar.Items = new UIBarButtonItem[] { empty, done };

    }

    [Export("DateChange:")]
    void DateChange(UIDatePicker picker)
    {
        NSDateFormatter formatter = new NSDateFormatter();

        formatter.DateFormat = "MM-dd HH:mm aa"; //you can set the format as you want

        Control.Text = formatter.ToString(picker.Date);

        SelectedValue= formatter.ToString(picker.Date);

        MessagingCenter.Send<Object, string>(this,"pickerSelected",SelectedValue);
    }
  }
}

并使用MessagingCenter 传递选定的日期和时间。

public MainPage()
{
    InitializeComponent();

    MessagingCenter.Subscribe<Object, string>(this, "pickerSelected", (sender, arg) => {
        Console.WriteLine(arg);
        //arg is the selected date and time
    });

}

我已经在github上传了demo，大家可以下载测试一下。

The effect

【讨论】：

如何使用 BindableProperty 代替 MessagingCenter？