Xamarin Datapicker 如何将其自定义为日历图像

问题描述

我是 Xamarin 的新手，我想知道如何将 DatePicker 设置为图像，例如日历，而不是下面有一行的文本（默认）。

目标是有一个条目，在它旁边有一个日历图像，使其行为类似于下图所示的 DatePicker：

我有以下代码，但我有 DatePicker 注释。我尝试设置 isVisible = 'false' 并将图像放在它的位置，但没有用。

<Grid>
    <Grid.ColumnDeFinitions>
            <ColumnDeFinition Width="360" />
                <ColumnDeFinition Width="*" />
         </Grid.ColumnDeFinitions>
         <Frame Style="{StaticResource FrameStyle}">
            <controls:CustomEntry x:Name="DataDocEntry" Grid.Column="0" Text="{Binding Date,StringFormat='{0:d/M/yy}',Source={x:Reference MainDatePicker}}" IsEnabled="false" Style="{StaticResource EntryStyle}" />
          </Frame>
          <!--<DatePicker x:Name="MainDatePicker" Grid.Column="1" MinimumDate="1/1/2018" MaximumDate="12/31/2030" HeightRequest="30" />-->
          <Image VerticalOptions="Center" Grid.Column="1" HorizontalOptions="End" Source="icalendar.png" HeightRequest="30" WidthRequest="30">
            <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Calendario_Clicked" NumberOfTapsrequired="1" />
                </Image.GestureRecognizers>
          </Image>
</Grid>

我还创建了一个 DatePickerRenderer 来自定义 DatePicker 以尝试将其背景设置为图像，但也没有成功。

DatePickerRenderer.cs

using Android.Content;
using FormsApp.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(DatePicker),typeof(MyRenderer))]
namespace FormsApp.Droid
{
    class MyRenderer : DatePickerRenderer
    {
        public MyRenderer(Context context) : base(context)
        {

        }

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

            if (Control != null)
            {
                //Control.Background = "icalendar.png";
            }
        }
    }
}

最好的问候

解决方法

你可以隐藏DataPicker，在图片的点击事件中使用Focus。

xml:

  <StackLayout Orientation="Horizontal" VerticalOptions="StartAndExpand">
        <Entry x:Name="entry" />
        <Image
            HeightRequest="20"
            HorizontalOptions="EndAndExpand"
            Source="calendar.png"
            WidthRequest="20">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
            </Image.GestureRecognizers>
        </Image>
        <DatePicker
            x:Name="dataPicker"
            IsVisible="false"
            Unfocused="dataPicker_Unfocused" />
    </StackLayout>

背后的代码：

  private void dataPicker_Unfocused(object sender,FocusEventArgs e)
    {
        entry.Text =dataPicker.Date.ToString();
    }

    private void TapGestureRecognizer_Tapped(object sender,EventArgs e)
    {
        dataPicker.Focus();
    }