Xamarin Forms中如何修改背景色高亮DatePicker的当前周所有日期

Got it, let's break down how to highlight the entire current week in a Xamarin.Forms DatePicker by adjusting the background color of all dates in the week. The default DatePicker doesn't support this natively, so we'll need to use custom renderers for both Android and iOS to tap into the native calendar controls.

First, we'll make a custom control inheriting from the standard DatePicker. This lets us add custom properties (like highlight color) and target it with our renderers.

using Xamarin.Forms;

namespace YourAppNamespace
{
    public class HighlightWeekDatePicker : DatePicker
    {
        // Bindable property for custom highlight color
        public static readonly BindableProperty HighlightColorProperty =
            BindableProperty.Create(
                nameof(HighlightColor),
                typeof(Color),
                typeof(HighlightWeekDatePicker),
                Color.LightBlue);

        public Color HighlightColor
        {
            get => (Color)GetValue(HighlightColorProperty);
            set => SetValue(HighlightColorProperty, value);
        }
    }
}

On Android, we'll replace the default DatePickerDialog with a custom one that uses a modified CalendarView to draw a background for the current week.

First, create a custom CalendarView that handles the week highlighting:

using Android.Content;
using Android.Graphics;
using Android.Util;
using Android.Widget;
using System;

namespace YourAppNamespace.Droid.Renderers
{
    public class HighlightWeekCalendarView : CalendarView
    {
        private DateTime _currentDate;
        private Paint _highlightPaint;
        private Color _highlightColor;

        public HighlightWeekCalendarView(Context context, Color highlightColor) : base(context)
        {
            _highlightColor = highlightColor;
            Initialize();
        }

        public HighlightWeekCalendarView(Context context, IAttributeSet attrs, Color highlightColor) : base(context, attrs)
        {
            _highlightColor = highlightColor;
            Initialize();
        }

        private void Initialize()
        {
            _highlightPaint = new Paint();
            _highlightPaint.Color = _highlightColor;
            _highlightPaint.SetStyle(Paint.Style.Fill);
            _currentDate = DateTime.Now.Date;
            SetDate(_currentDate.Ticks);
        }

        protected override void OnDraw(Canvas canvas)
        {
            base.OnDraw(canvas);
            // Calculate start and end of the current week (adjust to Sunday if needed)
            var startOfWeek = GetStartOfWeek(_currentDate);
            var endOfWeek = startOfWeek.AddDays(6);

            // Draw background for each day in the week
            for (var date = startOfWeek; date <= endOfWeek; date = date.AddDays(1))
            {
                var dayRect = GetDayRect(date);
                if (dayRect != null)
                {
                    // Round corners for a nicer look
                    canvas.DrawRoundRect(dayRect.Left, dayRect.Top, dayRect.Right, dayRect.Bottom, 8f, 8f, _highlightPaint);
                }
            }
        }

        private DateTime GetStartOfWeek(DateTime date)
        {
            // Set Monday as the start of the week (change to DayOfWeek.Sunday for US-style weeks)
            int diff = (int)date.DayOfWeek - (int)DayOfWeek.Monday;
            if (diff < 0) diff += 7;
            return date.AddDays(-diff).Date;
        }

        private RectF GetDayRect(DateTime date)
        {
            // Use reflection to access the internal GetDayRect method of CalendarView
            try
            {
                var method = typeof(CalendarView).GetMethod(
                    "GetDayRect",
                    System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance);
                var calendar = Java.Util.Calendar.GetInstance();
                calendar.Set(date.Year, date.Month - 1, date.Day);
                return (RectF)method.Invoke(this, calendar);
            }
            catch (Exception)
            {
                return null;
            }
        }

        public override void SetDate(long milliseconds, bool animate)
        {
            base.SetDate(milliseconds, animate);
            _currentDate = new DateTime(milliseconds).Date;
            Invalidate(); // Redraw to update the highlighted week
        }
    }
}

Now create the renderer that replaces the default DatePicker behavior:

using Android.App;
using Android.Content;
using Android.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using YourAppNamespace;
using YourAppNamespace.Droid.Renderers;

[assembly: ExportRenderer(typeof(HighlightWeekDatePicker), typeof(HighlightWeekDatePickerRenderer))]
namespace YourAppNamespace.Droid.Renderers
{
    public class HighlightWeekDatePickerRenderer : DatePickerRenderer
    {
        public HighlightWeekDatePickerRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.Click += OnDatePickerClicked;
            }
        }

        private void OnDatePickerClicked(object sender, System.EventArgs e)
        {
            var customPicker = Element as HighlightWeekDatePicker;
            var highlightColor = customPicker.HighlightColor.ToAndroid();

            // Create our custom CalendarView
            var calendarView = new HighlightWeekCalendarView(Context, highlightColor);
            calendarView.SetDate(Element.Date.Ticks);

            // Handle date selection
            calendarView.DateChange += (s, args) =>
            {
                Element.Date = new DateTime(args.Date);
                ((IElementController)Element).SetValueFromRenderer(DatePicker.DateProperty, Element.Date);
                DismissCurrentDialog();
            };

            // Build and show the dialog
            var dialog = new AlertDialog.Builder(Context)
                .SetView(calendarView)
                .SetPositiveButton("OK", (d, args) => DismissCurrentDialog())
                .SetNegativeButton("Cancel", (d, args) => DismissCurrentDialog())
                .Create();

            dialog.Show();
        }

        private void DismissCurrentDialog()
        {
            // Find and dismiss any open DatePicker dialogs
            var windowManager = Context.GetSystemService(Context.WindowService) as IWindowManager;
            if (windowManager != null)
            {
                foreach (var window in windowManager.DefaultDisplay.WindowManager.Applications)
                {
                    if (window.AttachedWindow?.Callback is AlertDialog dialog)
                    {
                        dialog.Dismiss();
                    }
                }
            }
        }
    }
}

On iOS, we'll use UICalendarView (available in iOS 16+) to create a custom calendar picker that highlights the current week. For older iOS versions, we'll show a fallback message.

First, create a custom calendar cell to handle the background highlight:

using Foundation;
using UIKit;
using System;

namespace YourAppNamespace.iOS.Renderers
{
    public class HighlightWeekCalendarCell : UICalendarViewCell
    {
        private Color _highlightColor;

        public HighlightWeekCalendarCell(Color highlightColor)
        {
            _highlightColor = highlightColor;
        }

        public override void UpdateConfiguration(UICalendarViewConfiguration configuration)
        {
            base.UpdateConfiguration(configuration);
            var cellDate = new DateTime(configuration.Date.Year, configuration.Date.Month, configuration.Date.Day);
            var currentDate = DateTime.Now.Date;

            // Calculate week bounds
            var startOfWeek = GetStartOfWeek(currentDate);
            var endOfWeek = startOfWeek.AddDays(6);

            // Apply background if the cell's date is in the current week
            if (cellDate >= startOfWeek && cellDate <= endOfWeek)
            {
                BackgroundView = new UIView
                {
                    BackgroundColor = _highlightColor.ToUIColor(),
                    Layer = { CornerRadius = 8 }
                };
            }
            else
            {
                BackgroundView = null;
            }
        }

        private DateTime GetStartOfWeek(DateTime date)
        {
            // Adjust to Sunday if needed
            int diff = (int)date.DayOfWeek - (int)DayOfWeek.Monday;
            if (diff < 0) diff += 7;
            return date.AddDays(-diff).Date;
        }
    }
}

Now create the renderer:

using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using YourAppNamespace;
using YourAppNamespace.iOS.Renderers;

[assembly: ExportRenderer(typeof(HighlightWeekDatePicker), typeof(HighlightWeekDatePickerRenderer))]
namespace YourAppNamespace.iOS.Renderers
{
    public class HighlightWeekDatePickerRenderer : DatePickerRenderer
    {
        private UIViewController _calendarDialog;

        protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.AddTarget(OnDatePickerTapped, UIControlEvent.TouchUpInside);
            }
        }

        private void OnDatePickerTapped(object sender, System.EventArgs e)
        {
            var customPicker = Element as HighlightWeekDatePicker;
            var highlightColor = customPicker.HighlightColor;

            if (UIDevice.CurrentDevice.CheckSystemVersion(16, 0))
            {
                // Create UICalendarView for iOS 16+
                var calendarView = new UICalendarView
                {
                    Calendar = NSCalendar.CurrentCalendar,
                    TranslatesAutoresizingMaskIntoConstraints = false
                };

                // Set initial selected date
                var initialDate = NSDate.FromTimeIntervalSinceReferenceDate(
                    Element.Date.ToUniversalTime().Subtract(new DateTime(2001, 1, 1, 0, 0, 0, DateTimeKind.Utc)).TotalSeconds);
                calendarView.SetDateSelection(initialDate, animated: false);

                // Assign delegate to handle date selection
                calendarView.Delegate = new CalendarViewDelegate(Element);

                // Register our custom cell
                calendarView.RegisterClassForCell(typeof(HighlightWeekCalendarCell), UICalendarViewCell.Key);

                // Build the dialog view controller
                _calendarDialog = new UIViewController();
                _calendarDialog.View.AddSubview(calendarView);

                // Add OK button
                var okButton = new UIButton(UIButtonType.System)
                {
                    TranslatesAutoresizingMaskIntoConstraints = false
                };
                okButton.SetTitle("OK", UIControlState.Normal);
                okButton.AddTarget(OnOkTapped, UIControlEvent.TouchUpInside);
                _calendarDialog.View.AddSubview(okButton);

                // Set up auto layout constraints
                NSLayoutConstraint.ActivateConstraints(new[]
                {
                    calendarView.TopAnchor.ConstraintEqualTo(_calendarDialog.View.TopAnchor, 20),
                    calendarView.LeadingAnchor.ConstraintEqualTo(_calendarDialog.View.LeadingAnchor, 20),
                    calendarView.TrailingAnchor.ConstraintEqualTo(_calendarDialog.View.TrailingAnchor, -20),
                    calendarView.HeightAnchor.ConstraintEqualToConstant(300),

                    okButton.TopAnchor.ConstraintEqualTo(calendarView.BottomAnchor, 20),
                    okButton.CenterXAnchor.ConstraintEqualTo(_calendarDialog.View.CenterXAnchor),
                    okButton.BottomAnchor.ConstraintEqualTo(_calendarDialog.View.BottomAnchor, -20)
                });

                // Present as a popover
                var navController = new UINavigationController(_calendarDialog);
                navController.ModalPresentationStyle = UIModalPresentationStyle.Popover;
                var popover = navController.PopoverPresentationController;
                if (popover != null)
                {
                    popover.SourceView = Control;
                    popover.SourceRect = Control.Bounds;
                }

                UIApplication.SharedApplication.KeyWindow.RootViewController.PresentViewController(navController, true, null);
            }
            else
            {
                // Fallback for iOS versions below 16
                var alert = UIAlertController.Create(
                    "Note",
                    "Week highlighting requires iOS 16 or later.",
                    UIAlertControllerStyle.Alert);
                alert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
                UIApplication.SharedApplication.KeyWindow.RootViewController.PresentViewController(alert, true, null);
            }
        }

        private void OnOkTapped(object sender, System.EventArgs e)
        {
            _calendarDialog?.DismissViewController(true, null);
        }

        private class CalendarViewDelegate : UICalendarViewDelegate
        {
            private readonly DatePicker _element;

            public CalendarViewDelegate(DatePicker element)
            {
                _element = element;
            }

            public override void DidSelectDate(UICalendarView calendarView, NSDate date)
            {
                // Convert NSDate to DateTime
                var selectedDate = new DateTime(2001, 1, 1, 0, 0, 0, DateTimeKind.Utc)
                    .AddSeconds(date.SecondsSinceReferenceDate)
                    .ToLocalTime();

                // Update the Xamarin.Forms DatePicker
                _element.Date = selectedDate;
                ((IElementController)_element).SetValueFromRenderer(DatePicker.DateProperty, selectedDate);
            }
        }
    }
}

Now you can use your HighlightWeekDatePicker just like a regular DatePicker, and even set the highlight color:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainPage">

    <StackLayout Padding="20" Spacing="10">
        <Label Text="Select a date (current week is highlighted)" />
        <local:HighlightWeekDatePicker 
            HighlightColor="#E0F7FA" 
            Format="MMMM dd, yyyy" />
    </StackLayout>
</ContentPage>

• Week Start Adjustment: Modify the GetStartOfWeek method in both renderers to use DayOfWeek.Sunday if you need US-style weeks starting on Sunday.
• Android Reflection: The GetDayRect reflection might need adjustments for different Android versions—test on target API levels.
• iOS Version Support: iOS 16+ is required for the calendar view with week highlighting; older versions show a fallback message.

内容的提问来源于stack exchange，提问作者Developer