DatePicker Flyout 演示者样式

Question

我正在寻找一种方法来编辑 DatePickerFlyoutPresenter 滚动框样式。我想将文本更改为白色箭头按钮并更改指针颜色，但似乎找不到它。它可以使用翻转视图样式吗？我正在使用 xaml/C#

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

Answer 1

从Visual Studio的Live Visual Tree中，我们可以找到DatePickerFlyoutPresenter在里面使用LoopingSelector。

所以要改变箭头按钮中文字的颜色，我们可以改变Windows.UI.Xaml.Controls.Primitives.LoopingSelector的模板，我们可以在generic.xaml中找到它，典型的

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

或

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

此位置取决于您安装的 Windows 10 SDK。

Windows.UI.Xaml.Controls.Primitives.LoopingSelector 的默认样式如下：

<!-- 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>

要将文本更改为白色，我们可以在RepeatButton 中添加Foreground="White"，例如：

<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" />

改变颜色的指针是类似的。我们可以更改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>

在此模板中，我们可以更改名为PointerOver 的VisualState 中的Background 以自定义指针的颜色。