CODEWITHSUNDEEP
datepickerwin-universal-apptimepickeruwp-xaml
Zia Ur Rahman
Zia Ur Rahman

Reputation: 1880

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

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.

enter image description here

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

Upvotes: 0

Views: 2331

Answers (2)

Archana
Archana

Reputation: 3221

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

enter image description here

Upvotes: 2

Alexej Sommer
Alexej Sommer

Reputation: 2679

You can also use TimePicker from Syncfusion

Or you can try to edit style for standart UWP TimePicker. It's located in file generic.xaml which should be inside folder like

C:\Program Files\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic

You can serch for TimePicker or TimePickerFlyoutPresenter

Upvotes: 1

Related Questions