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
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="" 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="" 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="" 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="" 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.