如何调整UWP CalendarViewDayItem中日历数字文本块的位置？

你遇到的核心问题是自定义ControlTemplate时没有保留默认模板中负责显示日期的元素——默认的CalendarViewDayItem内部有一个ContentPresenter（或直接是TextBlock）来渲染日期数字，你的自定义模板完全替换了原有结构，所以不仅日期无法正常显示（或原有显示逻辑被覆盖），更没法调整它的位置。

下面是两种可行的解决方案，优先推荐样式模板修改的方式，更符合UWP的样式设计规范：

方案1：修改ControlTemplate，添加并对齐日期元素 #

直接在你的自定义ControlTemplate中添加ContentPresenter，绑定原控件的Content和ContentTemplate属性，然后设置它的对齐方式为左上角：

<Page.Resources>
    <Style x:Key="DayColorBlock" TargetType="CalendarViewDayItem">
        <Setter Property="Margin" Value="0.5"/>
        <Setter Property="Padding" Value="0"/> <!-- 去掉默认Padding避免影响对齐 -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CalendarViewDayItem">
                    <Grid>
                        <!-- 你的红色边框 -->
                        <Border BorderBrush="Red" BorderThickness="1" CornerRadius="20" Height="40" Width="40" Margin="20"/>
                        <!-- 底部蓝色矩形 -->
                        <Rectangle Opacity=".6" Margin="0,0,0,10" MinHeight="20" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Fill="DarkBlue"/>
                        <!-- 日期数字元素：设置为左上角对齐 -->
                        <ContentPresenter
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            VerticalAlignment="Top"
                            HorizontalAlignment="Left"
                            Margin="4,2,0,0"/> <!-- 调整Margin让数字更贴合角落，按需修改 -->
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <CalendarView x:Name="calendarView" Margin="12"
                  CalendarViewDayItemStyle="{StaticResource DayColorBlock}"
                  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>

关键细节说明： #

• 移除了原Style中的Padding="0, 0, 0, 4"，因为默认Padding会干扰ContentPresenter的位置，改为Padding="0"避免影响对齐效果。
• ContentPresenter绑定了Content和ContentTemplate，这样会自动沿用CalendarView默认的日期文本样式（比如当月/非当月日期的颜色差异），同时我们可以完全控制它的对齐位置。
• 通过Margin="4,2,0,0"微调数字和边框左上角的距离，你可以根据自己的UI需求调整这个值。

方案2：通过CalendarViewDayItemChanging事件修改（可选） #

如果你不想修改完整的ControlTemplate，可以在后台代码中遍历VisualTree找到日期TextBlock，然后设置对齐方式：

private void CalendarView_OnCalendarViewDayItemChanging(CalendarView sender, CalendarViewDayItemChangingEventArgs args)
{
    // 找到内部的日期TextBlock
    var dateTextBlock = FindVisualChild<TextBlock>(args.Item);
    if (dateTextBlock != null)
    {
        dateTextBlock.VerticalAlignment = VerticalAlignment.Top;
        dateTextBlock.HorizontalAlignment = HorizontalAlignment.Left;
        dateTextBlock.Margin = new Thickness(4, 2, 0, 0);
    }
}

// 辅助方法：遍历VisualTree查找子元素
private T FindVisualChild<T>(DependencyObject parent) where T : DependencyObject
{
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
    {
        var child = VisualTreeHelper.GetChild(parent, i);
        if (child is T typedChild)
            return typedChild;
        var result = FindVisualChild<T>(child);
        if (result != null)
            return result;
    }
    return null;
}

注意： #

这种方式依赖控件的内部结构，如果微软未来修改CalendarViewDayItem的布局逻辑，代码可能会失效，所以优先推荐方案1的样式模板方式。

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