xamluwptimepicker

Is there a way to set 'Placement' on UWP TimePicker?


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.

TimePicker correctly showing arrows and flyout fully.

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.

Maximized, the flyout gets cutoff.

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.


Solution

  • 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.