DatePicker Flyout Presenter Style

Question

I'm looking for a way to edit the DatePickerFlyoutPresenter scroll box style. I want to change the text to white the arrow buttons and change the pointover colors but cant seem to find it. could it be useing flipview style? I am using xaml/C#

http://puu.sh/lKvcW/a921089600.png

Answer 1

From the Live Visual Tree of Visual Studio, we can find DatePickerFlyoutPresenter use LoopingSelector in it.

So to change the color of the text in arrow button, we can change the template of Windows.UI.Xaml.Controls.Primitives.LoopingSelector, and we can find it in generic.xaml which typical in

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

OR

C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic

This location depends on the Windows 10 SDK you've installed.

The default style for Windows.UI.Xaml.Controls.Primitives.LoopingSelector is following:

<!-- Default style for Windows.UI.Xaml.Controls.Primitives.LoopingSelector -->
<Style TargetType="LoopingSelector">
    <Setter Property="ShouldLoop" Value="True" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel VerticalAlignment="Center" >
                    <TextBlock Text="{Binding PrimaryText}" FontFamily="{ThemeResource ContentControlThemeFontFamily}" FontSize="15" />
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Control">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UpButton"
                                                                       Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DownButton"
                                                                       Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ScrollViewer x:Name="ScrollViewer" VerticalSnapPointsType="Mandatory" VerticalSnapPointsAlignment="Near" VerticalScrollBarVisibility="Hidden"
                        HorizontalScrollMode="Disabled" ZoomMode="Disabled" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" />
                    <RepeatButton x:Name="UpButton" Content="&#xE70E;" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="8" Height="16" Padding="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Visibility="Collapsed" Style="{StaticResource DateTimePickerFlyoutButtonStyle}" Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}" IsTabStop="False" />
                    <RepeatButton x:Name="DownButton" Content="&#xE70D;" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="8" Height="16" Padding="0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Visibility="Collapsed" Style="{StaticResource DateTimePickerFlyoutButtonStyle}" Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}" IsTabStop="False" />
                </Grid>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

To change the text to white, we can add Foreground="White" in RepeatButton like:

<RepeatButton x:Name="UpButton" Foreground="White" Content="&#xE70E;" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="8" Height="16" Padding="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Visibility="Collapsed" Style="{StaticResource DateTimePickerFlyoutButtonStyle}" Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}" IsTabStop="False" />
<RepeatButton x:Name="DownButton" Foreground="White" Content="&#xE70D;" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="8" Height="16" Padding="0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Visibility="Collapsed" Style="{StaticResource DateTimePickerFlyoutButtonStyle}" Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}" IsTabStop="False" />

Changing the pointer over colors is similar. We can change the template of Windows.UI.Xaml.Controls.Primitives.LoopingSelectorItem:

<!-- Default style for Windows.UI.Xaml.Controls.Primitives.LoopingSelectorItem -->
<Style TargetType="LoopingSelectorItem">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="LoopingSelectorItem">
                <Grid x:Name="Root" Background="Transparent" >
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Expanded" />
                            <VisualState x:Name="Selected" >
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                   Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                   Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid.RenderTransform>
                        <ScaleTransform x:Name="ContentScaleTransform"/>
                    </Grid.RenderTransform>
                    <ContentPresenter x:Name="ContentPresenter" Foreground="{TemplateBinding Foreground}"
                        Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"
                        Padding="{TemplateBinding Padding}" Margin="2,0,2,0" 
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

In this template, we can change the Background in the VisualState named PointerOver to customize the pointer over color.