0

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

Zia Ur Rahman
  • 1,850
  • 1
  • 21
  • 30
  • Not sure whether it works. Try this on page load FlyoutBase.ShowAttachedFlyout( sender as FrameworkElement ); where sender us TimePicker element – Archana Apr 15 '16 at 13:10

2 Answers2

2

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

Archana
  • 3,213
  • 1
  • 15
  • 21
  • Thanks you so much, it solved 80% of my prob, rest I will manage InshaAllah. Thanks once again. – Zia Ur Rahman Apr 20 '16 at 05:29
  • Hello, how can I get the time in this format (4:00 PM or 9:34 AM) in TestTimePicker.Time = sender.Time, I can get the value without PM/AM via this TestTimePicker.Time = sender.Time.ToString(@"hh\:mm"), but I need the actual format as I mentioned. Plz. – Zia Ur Rahman May 04 '16 at 18:10
  • plz check my this question/post. http://stackoverflow.com/questions/37043765/uwp-how-to-format-time-in-timepicker-timechanged-select-time-without-buttons-i – Zia Ur Rahman May 05 '16 at 06:31
1

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

Alexej Sommer
  • 2,677
  • 1
  • 14
  • 25
  • I need actually, how to show this popup when the app runs rather than tapping on the control and then show the flyout of Timepicker. Your link has the older view of the Timepicker and my one has the latest view ... but the problem is as I mentioned, how to open it directly when the App loaded. – Zia Ur Rahman Apr 15 '16 at 12:06
  • You have image with standart UWP control, but I give you option to use another one control from syncfusion. Thats 2 different controls, they are not old and new versions. – Alexej Sommer Apr 15 '16 at 12:14
  • OK good. Is this a separate library, what is this syncfusion. How to use its controls. I will use it and then will let you know. – Zia Ur Rahman Apr 15 '16 at 18:54
  • Yes. Unfortunately you can only try trial – Alexej Sommer Apr 18 '16 at 11:42