Different Windows Phone (51)-8.1 New controls: Datepickerflyout, Timepickerflyout

Source: Internet
Author: User



[SOURCE DOWNLOAD]


Different Windows Phone (51)-8.1 New controls: Datepickerflyout, Timepickerflyout




Webabcd


Introduced
Different from Windows Phone 8.1 's new controls


    • Datepickerflyout-Date picker control
    • Timepickerflyout-Time picker control




Example
1, demonstrate the application of Datepickerflyout
Datepickerflyoutdemo.xaml


<Page
    x:Class="Demo.Control.DatePickerFlyoutDemo"
    Xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    Xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Xmlns:local="using:Demo.Control"
    Xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    Xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel Orientation="Vertical">
            
            <Button Content="Show DatePicker" >
                <Button.Flyout>
                    <!--
                        Title - the title of the popup
                    -->
                    <DatePickerFlyout x:Name="datePicker" Title="Select Date" DatePicked="datePicker_DatePicked" Closed="datePicker_Closed" />
                </Button.Flyout>
            </Button>

            <!--For the DatePicker control, it is supported by both wp and windows. For details, see: http://www.cnblogs.com/webabcd/archive/2014/05/12/3722733.html-->
            <DatePicker Header="Date" Margin="0 10 0 0" />
            
            <TextBlock Name="lblMsg" Margin="0 10 0 0" />
            
        </StackPanel>
    </Grid>
</Page> 


DatePickerFlyoutDemo.xaml.cs


/*
 * DatePickerFlyout - Date Picker Control (wp only)
 * ShowAtAsync(FrameworkElement target) - Popup date picker control
 * Hide() - hide popup
 *
 * DatePicked - the event triggered by the user after selecting the date (click the "Finish" button)
 * Opening, Opened, Closed - Several events as the name suggests
 */

Using System;
Using Windows.Globalization;
Using Windows.UI.Xaml.Controls;
Using Windows.UI.Xaml.Navigation;

Namespace Demo.Control
{
    Public sealed partial class DatePickerFlyoutDemo : Page
    {
        Public DatePickerFlyoutDemo()
        {
            this.InitializeComponent();
        }

        Protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // Date - the currently displayed date
            datePicker.Date = DateTimeOffset.Now.AddMonths(1);

            // MinYear - the smallest year allowed for the DatePicker control
            datePicker.MinYear = DateTimeOffset.Now.AddYears(-20);
            // MaxYear - the largest year allowed for the DatePicker control
            datePicker.MaxYear = DateTimeOffset.Now.AddYears(20);

            // YearVisible - whether to display the year selection box
            datePicker.YearVisible = true;
            // MonthVisible - whether to display the month selection box
            datePicker.MonthVisible = true;
            // DayVisible - whether to display the day selection box
            datePicker.DayVisible = true;

            // CalendarIdentifier - the calendar system used by the DatePicker control (Gregorian, Hebrew, Hijri, Japanese, Julian, Korean, Taiwan, Thai, UmAlQura)
            datePicker.CalendarIdentifier = CalendarIdentifiers.Gregorian;

        }

        // Event triggered by the user clicking the "Complete" button
        Private void datePicker_DatePicked(DatePickerFlyout sender, DatePickedEventArgs args)
        {
            // e.OldDate - original date
            // e.NewDate - new date
            lblMsg.Text = args.NewDate.ToString("yyyy-MM-dd hh:mm:ss");
            lblMsg.Text += Environment.NewLine;
        }

        // By combining the DatePicked event with the Closed event, you can determine if the user clicked the "Cancel" button or pressed the "Back button"
        Private void datePicker_Closed(object sender, object e)
        {
            lblMsg.Text += "closed";
            lblMsg.Text += Environment.NewLine;
        }
    }
} 



2, demonstrate the application of Timepickerflyout
Timepickerflyoutdemo.xaml


<Page
    x:Class="Demo.Control.TimePickerFlyoutDemo"
    Xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    Xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Xmlns:local="using:Demo.Control"
    Xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    Xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel Orientation="Vertical">

            <Button Content="Show TimePicker" >
                <Button.Flyout>
                    <!--
                        Title - the title of the popup
                    -->
                    <TimePickerFlyout x:Name="timePicker" Title="Choose Time" TimePicked="timePicker_TimePicked" Closed="timePicker_Closed" />
                </Button.Flyout>
            </Button>

            <!--For the TimePicker control, it is supported by both wp and windows. For details, please refer to: http://www.cnblogs.com/webabcd/archive/2014/05/12/3722733.html-->
            <TimePicker Header="Time" Margin="0 20 0 0" />

            <TextBlock Name="lblMsg" Margin="0 10 0 0" />
            
        </StackPanel>
    </Grid>
</Page> 


TimePickerFlyoutDemo.xaml.cs


/*
 * TimePickerFlyout - Time Picker Control (wp only)
 * ShowAtAsync(FrameworkElement target) - Popup time picker control
 * Hide() - hide popup
 *
 * TimePicked - the event triggered by the user after selecting the time (click the "Finish" button)
 * Opening, Opened, Closed - Several events as the name suggests
 */

Using System;
Using Windows.Globalization;
Using Windows.UI.Xaml.Controls;
Using Windows.UI.Xaml.Navigation;

Namespace Demo.Control
{
    Public sealed partial class TimePickerFlyoutDemo : Page
    {
        Public TimePickerFlyoutDemo()
        {
            this.InitializeComponent();
        }

        Protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // Time - the time currently displayed by the TimePicker control
            timePicker.Time = new TimeSpan(16, 0, 0);

            // MinuteIncrement - the minute increment of the minute selection box (0, 15, 30, 45)
            timePicker.MinuteIncrement = 15;

            // ClockIdentifier - hour system, ClockIdentifiers.TwelveHour (12HourClock), 12-hour clock
            // timePicker.ClockIdentifier = ClockIdentifiers.TwelveHour;

            // ClockIdentifier - hour system, ClockIdentifiers.TwentyFourHour (24HourClock), 24-hour clock
            timePicker.ClockIdentifier = ClockIdentifiers.TwentyFourHour;
        }

        // Event triggered by the user clicking the "Complete" button
        Private void timePicker_TimePicked(TimePickerFlyout sender, TimePickedEventArgs args)
        {
            // e.OldTime - original time
            // e.NewTime - new time
            lblMsg.Text = args.NewTime.ToString("c");
            lblMsg.Text += Environment.NewLine;
        }

        // By combining the TimePicked event with the Closed event, you can determine if the user clicked the "Cancel" button or pressed the "Back button".
        Private void timePicker_Closed(object sender, object e)
        {
            lblMsg.Text += "closed";
            lblMsg.Text += Environment.NewLine;
        }
    }
} 




Ok
[SOURCE DOWNLOAD]



Different Windows Phone (51)-8.1 New controls: Datepickerflyout, Timepickerflyout


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.