如何设置UWP TimePicker的Flyout放置位置？

问题重现 #

使用基础UWP TimePicker控件时，当窗口靠近屏幕顶部或最大化，弹出的Flyout会被顶部截断，无法显示向上调整数值的箭头按钮。控件代码如下：

<TimePicker x:Name="PeriodEndTimePicker" Visibility="Collapsed" Margin="8 5 0 5" Header="Period End Time" SelectedTimeChanged="PeriodEndTimePicker_SelectedTimeChanged"/>

解决方案 #

方法1：直接指定Flyout的Placement属性 #

通过替换TimePicker默认的Flyout为自定义TimePickerFlyout，并强制设置Placement="Bottom"，让Flyout顶部固定对齐TimePicker的底部，避免被屏幕顶部截断：

<TimePicker x:Name="PeriodEndTimePicker" Visibility="Collapsed" Margin="8 5 0 5" Header="Period End Time" SelectedTimeChanged="PeriodEndTimePicker_SelectedTimeChanged">
    <TimePicker.Flyout>
        <TimePickerFlyout Placement="Bottom"/>
    </TimePicker.Flyout>
</TimePicker>

该设置会强制Flyout始终显示在控件下方，不再依赖系统自动调整位置，确保上箭头按钮完整可见。

方法2：修改TimePicker控件模板（若方法1不生效） #

如果直接设置Flyout属性无效，可提取TimePicker的默认控件模板，找到触发Flyout的按钮部分，修改其Flyout的Placement：

1. 在Visual Studio中右键TimePicker控件，选择编辑模板 -> 编辑副本，生成默认模板的副本。
2. 在模板中找到名为FlyoutButton的按钮控件，修改其内部的TimePickerFlyout的Placement属性：

<Button x:Name="FlyoutButton"
        Background="{TemplateBinding Background}"
        Foreground="{TemplateBinding Foreground}"
        Style="{StaticResource TimePickerFlyoutButtonStyle}">
    <Button.Flyout>
        <TimePickerFlyout x:Name="TimePickerFlyout" Placement="Bottom"/>
    </Button.Flyout>
    <!-- 其他模板内容 -->
</Button>

3. 保存模板修改，此时TimePicker的Flyout会固定显示在控件下方。

注意事项 #

设置Placement="Bottom"后，若TimePicker靠近屏幕底部，Flyout可能会被底部截断。如果需要兼顾上下屏幕边界的适配，可结合代码动态计算Flyout的位置，或者使用Placement="Auto"配合自定义偏移，但针对当前需求（强制显示上箭头），上述方法已能满足要求。

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