UWP - How to show TimePicker / DatePicker in Open format on Page Load

Question

I am developing UWP (Win10 - VS2015) app. when the app runs, the timepicker/datepicker is always in this format, See Img (1), and when we tap on the img(1) control then it shows/popup the img(2) flyout, but I need to show the full page flyout mode (like img(2)) on Page Load, rather than tap on the img(1).

I checked the Style and Template of Timepicker but didn't find anything. Plz help.

OR how can we get the custom timepicker control same like the iPad one. See the img Link here

Answer 1

As a workaround i found below solution. Hope it helps.

Attach TimePickerFlyout to TimePicker.It has got Placement property. There you can specify Full mode.

<TimePicker x:Name="TestTimePicker" ClockIdentifier="24HourClock" Time="0" >
                <FlyoutBase.AttachedFlyout>
                    <TimePickerFlyout Placement="Full" TimePicked="TimePickerFlyout_TimePicked"/>
                </FlyoutBase.AttachedFlyout>
        </TimePicker>

On page load showthe flyout. DOnt forget to call UpdateLayout of page or else Flyout wont be closed when you tap on Accept button.

private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
           FlyoutBase.ShowAttachedFlyout(TestTimePicker);
            UpdateLayout();
        }

In TimePicked event assign selected time to TimePicker

private void TimePickerFlyout_TimePicked(TimePickerFlyout sender, TimePickedEventArgs args)
        {
            TestTimePicker.Time = sender.Time;
        }

Here is the screenshoot. If you want to increase the width and height you can edit the style of TimePickerFlyoutPresenter