Right now I have a basic TimePicker
in XAML:
<TimePicker x:Name="PeriodEndTimePicker" Visibility="Collapsed" Margin="8 5 0 5" Header="Period End Time" SelectedTimeChanged="PeriodEndTimePicker_SelectedTimeChanged"/>
When you click on a TimePicker it pops open a flyout. When placed near mid screen or somewhere away from the top of the screen you are able to fully see the flyout, and able to see the arrow buttons to change values when hovering over a time picker column.
However, if you place the window near the top of the screen or maximize the app window, the flyout gets cutoff and you are no longer able to see the up arrow to move the value up.
Is it possible to move the placement so that the top of the flyout is below the TimePicker?
P.S. There is nothing preventing the user from scrolling using the mouse wheel, or doing a partial hover and click to move to the next number, but my boss is adamant about getting the arrow to appear.
This behavior is by design. When the popup is near the bottom of the screen, it moves to a better position for display, but when the popup is near the top of the screen, it is partially hidden.
We can find the styles of TimePicker
in generic.xaml
which is available in the \(Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.xxxxx.0\Generic
. There is nothing about the popup of TimePicker
, and we can't see the popup in the visual tree either. So we can't make any changes.
If this behavior affects your development progress, it is recommended that you write a custom TimePicker
yourself. You can refer to this thread, It uses four listviews to implement a simple picker.