MonthYearPicker.xaml

<!--
// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Public License (Ms-PL).
// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
// All other rights reserved.
-->

<controls1:DateTimePickerPageBase
    x:Class="CustomDatePicker.View.MonthYearPicker"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:controls1="clr-namespace:CustomDatePicker.Classes"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="728" d:DesignWidth="480">

    <controls1:DateTimePickerPageBase.Resources>
        <controls:DateTimePickerResources x:Key="DateTimePickerResources"/>
        <ExponentialEase x:Key="Ease" EasingMode="EaseIn"/>
    </controls1:DateTimePickerPageBase.Resources>

    <Grid Background="{StaticResource PhoneChromeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisibilityStates">
                <VisualState x:Name="Open">
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetName="PlaneProjection"
                            Storyboard.TargetProperty="RotationX"
                            From="-50"
                            To="0"
                            Duration="0:0:0.2"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Closed">
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetName="PlaneProjection"
                            Storyboard.TargetProperty="RotationX"
                            To="90"
                            Duration="0:0:0.2"
                            EasingFunction="{StaticResource Ease}"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.Projection>
            <PlaneProjection x:Name="PlaneProjection"/>
        </Grid.Projection>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <!-- SystemTray placeholder -->
        <Rectangle
            x:Name="SystemTrayPlaceholder"
            Grid.Row="0"
            Height="32"/>
        <!-- Title -->
        <TextBlock
            x:Name="HeaderTitle"
            Grid.Row="1"
            Text="{Binding DatePickerTitle, Source={StaticResource DateTimePickerResources}}"
            FontFamily="{StaticResource PhoneFontFamilySemiBold}"
            FontSize="{StaticResource PhoneFontSizeMedium}"
            Foreground="{StaticResource PhoneForegroundBrush}"
            Margin="24,16,24,24"/>
        <!-- LoopingSelectors -->
        <Grid
            Grid.Row="2"
            HorizontalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <primitives:LoopingSelector
                x:Name="SecondarySelector"
                Grid.Column="0"
                Width="148"
                ItemSize="148,148"
                ItemMargin="6">
                <primitives:LoopingSelector.ItemTemplate>
                    <DataTemplate>
                        <StackPanel
                            HorizontalAlignment="Left"
                            VerticalAlignment="Bottom"
                            Margin="6">
                            <TextBlock
                                Text="{Binding MonthNumber}"
                                FontSize="54"
                                FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                Margin="0,-8"/>
                            <TextBlock
                                Text="{Binding MonthName}"
                                FontSize="20"
                                FontFamily="{StaticResource PhoneFontFamilyNormal}"
                                Margin="0,-2"/>
                        </StackPanel>
                    </DataTemplate>
                </primitives:LoopingSelector.ItemTemplate>
            </primitives:LoopingSelector>
            <primitives:LoopingSelector
                Grid.Column="2"
                x:Name="PrimarySelector"
                Width="148"
                ItemSize="148,148"
                ItemMargin="6">
                <primitives:LoopingSelector.ItemTemplate>
                    <DataTemplate>
                        <StackPanel
                            HorizontalAlignment="Left"
                            VerticalAlignment="Bottom"
                            Margin="6">
                            <TextBlock
                                Text="{Binding YearNumber}"
                                FontSize="54"
                                FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                Margin="0,-8"/>
                            <TextBlock
                                Text=" "
                                FontSize="20"
                                FontFamily="{StaticResource PhoneFontFamilyNormal}"
                                Margin="0,-2"/>
                        </StackPanel>
                    </DataTemplate>
                </primitives:LoopingSelector.ItemTemplate>
            </primitives:LoopingSelector>
        </Grid>
    </Grid>

    <controls1:DateTimePickerPageBase.ApplicationBar>
        <shell:ApplicationBar IsVisible="True">
            <!--
            Due to platform restrictions, ApplicationBarIconButton.IconUri content can not come from the
            Microsoft.Phone.Controls.Toolkit assembly, so it is up to the application developer to ensure
            these resources are placed in the right location and marked as Build Action=Content. For
            convenience, platform-consistent images are included with the Toolkit installer.

            Note: ApplicationBarIconButton.Text automatically comes from the Microsoft.Phone.Controls.Toolkit
            resources (where it can be localized).
            -->
            <shell:ApplicationBarIconButton
                IconUri="/Toolkit.Content/ApplicationBar.Check.png"
                Text="DONE"/>
            <shell:ApplicationBarIconButton
                IconUri="/Toolkit.Content/ApplicationBar.Cancel.png"
                Text="CANCEL"/>
        </shell:ApplicationBar>
    </controls1:DateTimePickerPageBase.ApplicationBar>

</controls1:DateTimePickerPageBase>