Question

我正在寻找一种编辑DatePickerFlyoutPresenter滚动框样式的方法。我想将文本更改为白色箭头按钮并更改指针颜色，但似乎无法找到它。它可以使用flipview风格吗？我正在使用xaml / C＃

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

Answer 1

从Visual Studio的实时视觉树，我们可以在其中找到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

OR

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>

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

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

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

DatePicker弹出演示者样式

1 个答案: