如何缩小UWP Calendar Date Picker控件及弹窗尺寸与字体大小？

嘿，这个问题我之前也踩过坑！UWP的Calendar Date Picker默认样式比较“顽固”，直接改外层控件的FontSize或者Width属性，往往只能影响输入框部分，弹窗里的日历根本没反应。得从控件的内部模板和嵌套的CalendarView入手，给你两个亲测有效的方案：

方案一：修改CalendarDatePicker的完整控件模板 #

默认的CalendarDatePicker弹窗里嵌套了一个CalendarView控件，我们需要把整个控件的模板提取出来，然后针对性修改：

1. 首先在Visual Studio里右键点击CalendarDatePicker控件，选择编辑模板 -> 编辑副本，这样会自动生成完整的默认模板到你的Resources里。
2. 在生成的模板里找到<Popup>标签，里面的<CalendarView>就是弹窗里的日历控件，我们可以直接给它设置以下属性：
   • FontSize: 控制日历整体的字体大小
   • CalendarItemHeight/CalendarItemWidth: 缩小日历单元格的尺寸，从而整体缩小弹窗
   • DayItemFontSize: 单独设置日期数字的字体大小
3. 同时别忘了修改模板里输入框部分的字体，找到<ContentPresenter x:Name="HeaderContentPresenter"，给它设置FontSize属性，对应控件的显示文本。

示例代码片段（模板关键部分）：

<Style x:Key="CustomCalendarDatePickerStyle" TargetType="CalendarDatePicker">
    <!-- 省略其他默认模板代码 -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="CalendarDatePicker">
                <!-- 省略输入框部分代码 -->
                <Popup x:Name="CalendarPickerFlyout">
                    <Border x:Name="FlyoutBorder" Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">
                        <CalendarView x:Name="CalendarView" 
                                      FontSize="12"
                                      CalendarItemHeight="30"
                                      CalendarItemWidth="30"
                                      DayItemFontSize="10"
                                      IsTodayHighlighted="True"
                                      SelectionMode="Single" />
                    </Border>
                </Popup>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后给你的CalendarDatePicker应用这个样式：

<CalendarDatePicker Style="{StaticResource CustomCalendarDatePickerStyle}" />

方案二：单独自定义CalendarView的样式 #

如果不想修改整个CalendarDatePicker的模板，也可以单独定义一个CalendarView的样式，然后通过CalendarDatePicker的CalendarViewStyle属性绑定：

<Page.Resources>
    <Style x:Key="SmallCalendarViewStyle" TargetType="CalendarView">
        <Setter Property="FontSize" Value="12" />
        <Setter Property="CalendarItemHeight" Value="28" />
        <Setter Property="CalendarItemWidth" Value="28" />
        <Setter Property="DayItemFontSize" Value="10" />
        <Setter Property="HeaderFontSize" Value="11" />
        <!-- 还可以修改星期标题的字体大小 -->
        <Setter Property="WeekDayItemFontSize" Value="9" />
    </Style>
</Page.Resources>

<CalendarDatePicker CalendarViewStyle="{StaticResource SmallCalendarViewStyle}" />

这个方法更简洁，直接针对弹窗里的日历控件生效，输入框的字体可以直接通过CalendarDatePicker的FontSize属性修改。

注意事项 #

• 如果修改后还是没生效，检查一下是否有其他样式覆盖了你的自定义设置（比如主题样式）。
• 调整CalendarItemHeight和Width时，别设置太小，否则日期会显示不全，建议根据字体大小来匹配。

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