DatePicker Flyout演示者风格 [英] DatePicker Flyout Presenter Style

查看：191
本文介绍了DatePicker Flyout演示者风格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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





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


C：\程序文件（x86）\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\通用


或



<块报价>

C：\程序文件（x86）\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic


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



Windows.UI.Xaml.Controls.Primitives.LoopingSelector 如下：

 <！ -  Windows.UI.Xaml.Controls.Primitives.LoopingSelector的默认样式 - > 
< Style TargetType =LoopingSelector> 
< Setter Property =ShouldLoopValue =True/> 
< Setter Property =UseSystemFocusVisualsValue =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 =0Value =Visible/> 
< / ObjectAnimationUsingKeyFrames> 
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =DownButton
 Storyboard.TargetProperty =Visibility> 
< DiscreteObjectKeyFrame KeyTime =0Value =Visible/> 
< / ObjectAnimationUsingKeyFrames> 
< / Storyboard> 
< / VisualState> 
< / VisualStateGroup> 
< /VisualStateManager.VisualStateGroups> 
< ScrollViewer x：Name =ScrollViewerVerticalSnapPointsType =MandatoryVerticalSnapPointsAlignment =NearVerticalScrollBarVisibility =Hidden
 Horizo​​ntalScrollMode =DisabledZoomMode =DisabledTemplate ={StaticResource ScrollViewerScrollBarlessTemplate} /> 
< RepeatButton x：Name =UpButtonContent =&＃xE70E; FontFamily ={ThemeResource SymbolThemeFontFamily}FontSize =8Height =16Padding =0Horizo​​ntalAlignment =StretchVerticalAlignment =TopVisibility =CollapsedStyle ={StaticResource DateTimePickerFlyoutButtonStyle}Background = ThemeResource SystemControlBackgroundChromeMediumBrushIsTabStop =False/> 
< RepeatButton x：Name =DownButtonContent =&＃xE70D; FontFamily ={ThemeResource SymbolThemeFontFamily}FontSize =8Height =16Padding =0Horizo​​ntalAlignment =StretchVerticalAlignment =BottomVisibility =CollapsedStyle ={StaticResource DateTimePickerFlyoutButtonStyle}Background = ThemeResource SystemControlBackgroundChromeMediumBrushIsTabStop =False/> 
< / Grid> 
 
< / ControlTemplate> 
< /Setter.Value> 
< / Setter> 
< / Style>

要将文本更改为白色，我们可以添加 Foreground =White RepeatButton like：

  RepeatButton x：Name =UpButtonForeground =WhiteContent =&＃xE70E; FontFamily ={ThemeResource SymbolThemeFontFamily}FontSize =8Height =16Padding =0Horizo​​ntalAlignment =StretchVerticalAlignment =TopVisibility =CollapsedStyle ={StaticResource DateTimePickerFlyoutButtonStyle}Background = ThemeResource SystemControlBackgroundChromeMediumBrushIsTabStop =False/> 
< RepeatButton x：Name =DownButtonForeground =WhiteContent =&＃xE70D; FontFamily ={ThemeResource SymbolThemeFontFamily}FontSize =8Height =16Padding =0Horizo​​ntalAlignment =StretchVerticalAlignment =BottomVisibility =CollapsedStyle ={StaticResource DateTimePickerFlyoutButtonStyle}Background = ThemeResource SystemControlBackgroundChromeMediumBrushIsTabStop =False/>

更改颜色上的指针是类似的。我们可以更改的模板Windows.UI.Xaml.Controls.Primitives.LoopingSelectorItem ：

 code><！ -  Windows.UI.Xaml.Controls.Primitives.LoopingSelectorItem的默认样式 - > 
< Style TargetType =LoopingSelectorItem> 
< Setter Property =Horizo​​ntalAlignmentValue =Stretch/> 
< Setter Property =VerticalAlignmentValue =Stretch/> 
< Setter Property =ForegroundValue ={ThemeResource SystemControlForegroundBaseHighBrush}/> 
< Setter Property =IsTabStopValue =False/> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType =LoopingSelectorItem> 
< Grid x：Name =RootBackground =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 =0Value ={ThemeResource SystemControlHighlightAltBaseHighBrush}/> 
< / ObjectAnimationUsingKeyFrames> 
< / Storyboard> 
< / VisualState> 
< VisualState x：Name =PointerOver> 
< Storyboard> 
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =Root
 Storyboard.TargetProperty =Background> 
< DiscreteObjectKeyFrame KeyTime =0Value ={ThemeResource SystemControlHighlightListLowBrush}/> 
< / ObjectAnimationUsingKeyFrames> 
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =ContentPresenter
 Storyboard.TargetProperty =Foreground> 
< DiscreteObjectKeyFrame KeyTime =0Value ={ThemeResource SystemControlHighlightAltBaseHighBrush}/> 
< / ObjectAnimationUsingKeyFrames> 
< / Storyboard> 
< / VisualState> 
< VisualState x：Name =Pressed> 
< Storyboard> 
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =Root
 Storyboard.TargetProperty =Background> 
< DiscreteObjectKeyFrame KeyTime =0Value ={ThemeResource SystemControlHighlightListMediumBrush}/> 
< / ObjectAnimationUsingKeyFrames> 
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =ContentPresenter
 Storyboard.TargetProperty =Foreground> 
< DiscreteObjectKeyFrame KeyTime =0Value ={ThemeResource SystemControlHighlightAltBaseHighBrush}/> 
< / ObjectAnimationUsingKeyFrames> 
< / Storyboard> 
< / VisualState> 
< / VisualStateGroup> 
< /VisualStateManager.VisualStateGroups> 
< Grid.RenderTransform> 
< ScaleTransform x：Name =ContentScaleTransform/> 
< /Grid.RenderTransform> 
< ContentPresenter x：Name =ContentPresenterForeground ={TemplateBinding Foreground}
 Content ={TemplateBinding Content}ContentTemplate ={TemplateBinding ContentTemplate}
 Padding ={ TemplateBinding Padding}Margin =2,0,2,0
 Horizo​​ntalContentAlignment ={TemplateBinding Horizo​​ntalContentAlignment}
 VerticalContentAlignment ={TemplateBinding VerticalContentAlignment}AutomationProperties.AccessibilityView =Raw/> 
< / Grid> 
< / ControlTemplate> 
< /Setter.Value> 
< / Setter> 
< / Style>

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


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="&#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.

这篇关于DatePicker Flyout演示者风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆