更改 CalendarViewDayItem 日期编号的位置 (TextBlock)

Question

我正在尝试使用 UWP CalendarView 获得此结果我现在最大的问题是...如何更改 CalendarViewDayItem 中创建的 "day number" 文本块的位置？

使用 Visual Studio 实时可视化树时，我可以看到 CalendarViewDayItem 有一个 TextBlock 代表月份的天数，但我看不到我该如何将 Vertical VerticalAlignment 更改为 "Top" 并将 HorizontalAlignment 更改为“Left

有人能帮忙吗？

这是我的实际结果：尝试将红色圆圈内的数字移动到框的顶部和左侧：

    <Page.Resources>
        <Style x:Key="DayColorBlock" TargetType="CalendarViewDayItem" >
            <Setter Property="Margin" Value="0.5"/>
            <Setter Property="Padding" Value="0, 0, 0, 4"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CalendarViewDayItem">
                        <Grid>
                            <Border BorderBrush="Red"  BorderThickness="1,1,1,1" CornerRadius="20,20,20,20" Height="40" Width="40" Margin="20" />
                            <Rectangle Opacity=".6" Margin="0,0,0,10" MinHeight="20" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Fill="DarkBlue" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">


        <CalendarView x:Name="calendarView" 
            Margin="12"
            CalendarViewDayItemChanging="CalendarView_OnCalendarViewDayItemChanging" 
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
            CalendarViewDayItemStyle="{StaticResource DayColorBlock}">
        </CalendarView>
    </Grid>
</Page>

Answer 1

这是一个艰难的过程！ CalendarView 似乎在 CalendarViewDayItem 的顶部添加了日期标签，在您的 Grid 旁边。这在 XAML Live Tree 查看器中很明显：

要掌握它，您需要使用 CalendarViewDayItemChanging 并实现一个辅助方法来在 CalendarViewDayItem.

中找到 TextBlock

VisualTreeHelper 使您能够遍历控制树，其中包括获取给定 DependencyObject 的子项的能力。然后我们可以简单地实现一个辅助方法，该方法将找到给定类型的第一个直接子代：

private T FindFirstChildOfType<T>(DependencyObject control) where T : DependencyObject
{
    var childrenCount = VisualTreeHelper.GetChildrenCount(control);
    for (int childIndex = 0; childIndex < childrenCount; childIndex++)
    {
        var child = VisualTreeHelper.GetChild(control, childIndex);
        if ( child is T typedChild)
        {
            return typedChild;
        }
    }
    return null;
}

现在，有了这个方法，我们就可以TextBlock并随意对齐了！

private void CalendarView_OnCalendarViewDayItemChanging(
                CalendarView sender, 
                CalendarViewDayItemChangingEventArgs args)
{
    var textBlock = FindFirstChildOfType<TextBlock>(args.Item);
    if (textBlock != null)
    {    
        textBlock.HorizontalAlignment = HorizontalAlignment.Left;
        textBlock.VerticalAlignment = VerticalAlignment.Top;
    }
}

更改 CalendarViewDayItem 日期编号的位置 (TextBlock)

Change position of CalendarViewDayItem date number (TextBlock)

uwp

uwp-xaml