Windows Phone 8.1 Date Picker customization problems

Question

Primary Problem:

I have a Windows Phone 8.1 app where I have a DatePicker:

<DatePicker 
    DateChanged="ChangedDate"  
    x:Name="OriginationDate" 
    Grid.Row="1" 
    Grid.Column="0" 
    Grid.ColumnSpan="2" 
    Style="{StaticResource CustomDatePickerStyle}"
    FontSize="{StaticResource TextStyleSmallFontSize}" 
    RequestedTheme="Light"
/>

which I've overridden with the following Control Template:

<Style TargetType="DatePicker" x:Key="CustomDatePickerStyle">
    <Setter Property="Orientation" Value="Horizontal"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{StaticResource TextStyleSmallFontSize}" /> <!-- Note: This does nothing, the ComboBoxes ignore their FontSize settings --><!-- "{ThemeResource ControlContentThemeFontSize}" -->
    <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DatePicker">
                    <Border x:Name="LayoutRoot"
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                    >
                    <Grid Margin="{TemplateBinding Padding}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <ContentPresenter x:Name="HeaderContentPresenter"
                            FlowDirection="{TemplateBinding FlowDirection}"
                            Content="{TemplateBinding Header}"
                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                            Margin="0"
                            FontWeight="Normal" 
                            Foreground="Red"
                        />
                        <StackPanel Grid.Row="1" Orientation="{TemplateBinding Orientation}">
                            <Border x:Name="FirstPickerHost" Padding="0" Margin="0">
                                <ComboBox x:Name="DayPicker" 
                                    MinHeight="{ThemeResource DatePickerSpacingThemeHeight}"
                                    FontWeight="{TemplateBinding FontWeight}"
                                    FontSize="{TemplateBinding FontSize}"
                                    FontFamily="{TemplateBinding FontFamily}"
                                    RequestedTheme="{TemplateBinding RequestedTheme}"
                                    PickerFlyoutBase.Title="Pick Day"
                                    PlaceholderText="Pick Day"
                                />
                            </Border>
                            <Rectangle x:Name="FirstPickerSpacing"
                                Width="5"
                                Height="{ThemeResource DatePickerSpacingThemeHeight}"
                            />
                            <Border x:Name="SecondPickerHost" Padding="0" Margin="0">
                                <ComboBox x:Name="MonthPicker"
                                    MinHeight="{ThemeResource DatePickerSpacingThemeHeight}"
                                    FontWeight="{TemplateBinding FontWeight}"
                                    FontSize="{TemplateBinding FontSize}"
                                    FontFamily="{TemplateBinding FontFamily}"
                                    RequestedTheme="{TemplateBinding RequestedTheme}"
                                    PickerFlyoutBase.Title="Pick Month"
                                    PlaceholderText="Pick Month"
                                />
                            </Border>
                            <Rectangle x:Name="SecondPickerSpacing"
                                Width="5"
                                Height="{ThemeResource DatePickerSpacingThemeHeight}"
                            />
                            <Border x:Name="ThirdPickerHost" Padding="0" Margin="0">
                                <ComboBox x:Name="YearPicker"
                                    MinHeight="{ThemeResource DatePickerSpacingThemeHeight}"                                                
                                    FontWeight="{TemplateBinding FontWeight}"
                                    FontSize="{TemplateBinding FontSize}"
                                    FontFamily="{TemplateBinding FontFamily}"
                                    RequestedTheme="{TemplateBinding RequestedTheme}"   
                                    PickerFlyoutBase.Title="Pick Year"   
                                    PlaceholderText="Pick Year"
                                />
                            </Border>
                        </StackPanel>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
 </Style>

I got this ControlTemplate from the Windows Desktop (WinRT) documentation and modified it from there. It works pretty well aside from not being able to modify font colors in a couple of places (that's the reason I did RequestedTheme="Light", it was the only way I could get the font color to be not-white) but that's not the point of this question.

The undesirable behavior I'm trying to fix is that when I tap on the month, day, or year ComboBox, the current value is not the focus of the picker that comes up. For example, when tapping on the '2016' in the following date picker:

The following picker window appears:

Note that if you wanted to pick '2017', the year after the currently-selected value, you have to scroll all the way down to it to do so. Since the picker starts in 1916, that means 100 years worth of scrolling. That's a huge pain for the user, and is obviously not the way it should work.

Corollary Problem 1:

The picker window appears modally, and I can't seem to find a way to change its formatting directly - what's my best path forward here? Is there a way for me to change the format of the text in the picker window to (for example) 20 point bold red text? There's actually a phrase at the top "Pick Year", but it's white text on a white background, so you can't see it. That's undesirable as well.

Corollary Problem 2:

If I don't override the ControlTemplate, then the date picker looks like this:

And tapping on it gets me to this:

I can't seem to find a way to modify that modally-presented page either, in order to 1) change its blue background color, as that blue matches no other part of my app, and 2) make it so the user can see the roller-style picker 'columns'. This is not a usable UI widget in its current state, as the user has no idea that swiping up and down will change the values.

Conclusion:

Thanks for any help or guidance you can provide me in this. I've reached the end of what I can glean out of the documentation I could find.

Answer 1

I would recommend that you use the default Date Picker provided in WP8.1 SDK. But as you mentioned you are facing issue where you can't change the Blue color. So internally the DatePicker uses a LoopingSelector so basically you need to override the Default LoopingSelector color. The best place to do that would be in App.xaml or whereever you have defined all the styles.

<SolidColorBrush x:Key="LoopingSelectorSelectionBackgroundThemeBrush" Color="#FFD84E53" />

Similarly you can override the LoopingItems foreground color. You can see more details from this answer. Hope it helps