UWP CalendarDatePicker自定义今日高亮在年/年代视图不生效如何解决

现有实现代码 #

XAML代码 #

<Grid >
    <Canvas Width="1000" Background="White">
        <CalendarDatePicker CalendarViewStyle="{StaticResource CalendarDatePickerCalendarViewStyle1}" 
                            CalendarViewDayItemChanging="CalendarDatePicker_CalendarViewDayItemChanging"
                            PlaceholderText="dd\mm\yyyy" Width="222" Height="32"
                            Canvas.Left="350" Canvas.Top="30"
                            DateChanged="CalendarDatePicker_DateChanged" 
                            IsTodayHighlighted="False"></CalendarDatePicker>
    </Canvas>
</Grid>

C# 后台代码 #

private void CalendarDatePicker_CalendarViewDayItemChanging(CalendarView sender, CalendarViewDayItemChangingEventArgs e)
{
    if (e.Item.Date.Date.Equals(DateTimeOffset.Now.Date))
    {
        CalendarViewDayItem calendarViewDayItem = e.Item;
        calendarViewDayItem.Style = (Style)Resources["TodayhighlightCalendarViewDayItemStyle"];
    }
}

private void CalendarDatePicker_DateChanged(CalendarDatePicker sender, CalendarDatePickerDateChangedEventArgs args)
{
    string selectedDate = args.NewDate != null ? args.NewDate.ToString() : "" ;
}

问题说明 #

自定义样式高亮今日日期时，关闭了IsTodayHighlighted属性，通过CalendarViewDayItemChanging事件绑定自定义样式的逻辑仅在月视图生效，年视图、年代视图下今日对应的月份、年份没有高亮效果，需要实现三个视图下今日对应项的背景与前景高亮。

你遇到的问题是因为CalendarView在不同显示模式下使用的项容器类型不同：月视图的日期项是CalendarViewDayItem，年视图的月份项、年代视图的年份项是CalendarViewItem，原逻辑只处理了前者，需要补充CalendarViewItemChanging事件处理后一种容器的样式。

步骤1：补充事件绑定 #

找到你定义的CalendarDatePickerCalendarViewStyle1样式，在内部的CalendarView节点添加CalendarViewItemChanging事件绑定：

<CalendarView ...
              CalendarViewItemChanging="CalendarView_CalendarViewItemChanging">
    <!-- 原有样式内容 -->
</CalendarView>

步骤2：定义对应高亮样式 #

在资源字典里补充年视图、年代视图的高亮样式，可根据你的设计需求调整参数：

<!-- 年视图月份高亮样式 -->
<Style x:Key="TodayHighlightMonthStyle" TargetType="CalendarViewItem">
    <Setter Property="Background" Value="LightBlue"/>
    <Setter Property="Foreground" Value="Red"/>
</Style>
<!-- 年代视图年份高亮样式 -->
<Style x:Key="TodayHighlightYearStyle" TargetType="CalendarViewItem">
    <Setter Property="Background" Value="LightBlue"/>
    <Setter Property="Foreground" Value="Red"/>
</Style>

步骤3：添加事件处理逻辑 #

在后台代码补充CalendarViewItemChanging的处理逻辑：

private void CalendarView_CalendarViewItemChanging(CalendarView sender, CalendarViewItemChangingEventArgs e)
{
    var today = DateTimeOffset.Now.Date;
    // 年视图：显示12个月份，匹配当前年月
    if (sender.DisplayMode == CalendarViewDisplayMode.Year)
    {
        if (e.Item.Date.Year == today.Year && e.Item.Date.Month == today.Month)
        {
            e.Item.Style = (Style)Resources["TodayHighlightMonthStyle"];
        }
    }
    // 年代视图：显示10个年份，匹配当前年
    else if (sender.DisplayMode == CalendarViewDisplayMode.Decade)
    {
        if (e.Item.Date.Year == today.Year)
        {
            e.Item.Style = (Style)Resources["TodayHighlightYearStyle"];
        }
    }
}

完成以上操作后，三个视图下今日对应的日、月、年都会按照你定义的样式实现高亮。

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