Windows Phone 8.1 日期选择器自定义问题

Question

主要问题：

我有一个 Windows Phone 8.1 应用程序，我有一个 DatePicker:

<DatePicker 
    DateChanged="ChangedDate"  
    x:Name="OriginationDate" 
    Grid.Row="1" 
    Grid.Column="0" 
    Grid.ColumnSpan="2" 
    Style="{StaticResource CustomDatePickerStyle}"
    FontSize="{StaticResource TextStyleSmallFontSize}" 
    RequestedTheme="Light"
/>

我已经用以下控制模板覆盖了它：

<Style TargetType="DatePicker" x:Key="CustomDatePickerStyle">
    <Setter Property="Orientation" Value="Horizontal"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{StaticResource TextStyleSmallFontSize}" /> <!-- Note: This does nothing, the ComboBoxes ignore their FontSize settings --><!-- "{ThemeResource ControlContentThemeFontSize}" -->
    <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DatePicker">
                    <Border x:Name="LayoutRoot"
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                    >
                    <Grid Margin="{TemplateBinding Padding}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <ContentPresenter x:Name="HeaderContentPresenter"
                            FlowDirection="{TemplateBinding FlowDirection}"
                            Content="{TemplateBinding Header}"
                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                            Margin="0"
                            FontWeight="Normal" 
                            Foreground="Red"
                        />
                        <StackPanel Grid.Row="1" Orientation="{TemplateBinding Orientation}">
                            <Border x:Name="FirstPickerHost" Padding="0" Margin="0">
                                <ComboBox x:Name="DayPicker" 
                                    MinHeight="{ThemeResource DatePickerSpacingThemeHeight}"
                                    FontWeight="{TemplateBinding FontWeight}"
                                    FontSize="{TemplateBinding FontSize}"
                                    FontFamily="{TemplateBinding FontFamily}"
                                    RequestedTheme="{TemplateBinding RequestedTheme}"
                                    PickerFlyoutBase.Title="Pick Day"
                                    PlaceholderText="Pick Day"
                                />
                            </Border>
                            <Rectangle x:Name="FirstPickerSpacing"
                                Width="5"
                                Height="{ThemeResource DatePickerSpacingThemeHeight}"
                            />
                            <Border x:Name="SecondPickerHost" Padding="0" Margin="0">
                                <ComboBox x:Name="MonthPicker"
                                    MinHeight="{ThemeResource DatePickerSpacingThemeHeight}"
                                    FontWeight="{TemplateBinding FontWeight}"
                                    FontSize="{TemplateBinding FontSize}"
                                    FontFamily="{TemplateBinding FontFamily}"
                                    RequestedTheme="{TemplateBinding RequestedTheme}"
                                    PickerFlyoutBase.Title="Pick Month"
                                    PlaceholderText="Pick Month"
                                />
                            </Border>
                            <Rectangle x:Name="SecondPickerSpacing"
                                Width="5"
                                Height="{ThemeResource DatePickerSpacingThemeHeight}"
                            />
                            <Border x:Name="ThirdPickerHost" Padding="0" Margin="0">
                                <ComboBox x:Name="YearPicker"
                                    MinHeight="{ThemeResource DatePickerSpacingThemeHeight}"                                                
                                    FontWeight="{TemplateBinding FontWeight}"
                                    FontSize="{TemplateBinding FontSize}"
                                    FontFamily="{TemplateBinding FontFamily}"
                                    RequestedTheme="{TemplateBinding RequestedTheme}"   
                                    PickerFlyoutBase.Title="Pick Year"   
                                    PlaceholderText="Pick Year"
                                />
                            </Border>
                        </StackPanel>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
 </Style>

我从 Windows 桌面 (WinRT) 文档中获得了这个 ControlTemplate 并从那里修改了它。除了不能在几个地方修改字体颜色外，它工作得很好（这就是我这样做的原因 RequestedTheme="Light"，这是我可以让字体颜色不是白色的唯一方法）但事实并非如此这个问题的重点。

我试图解决的不良行为是 当我点击月、日或年组合框时，当前值不是出现的选择器的焦点.例如，在以下日期选择器中点击“2016”时：

出现以下选择器window：

请注意，如果您想选择“2017”，即当前所选值之后的那一年，您必须一直向下滚动到它才能这样做。由于选择器从 1916 年开始，这意味着需要滚动 100 年。这对用户来说是一个巨大的痛苦，显然不是它应该的工作方式。

推论1：

选择器 window 以模态方式显示，我似乎找不到直接更改其格式的方法 - 我最好的前进道路是什么？我有办法 将选择器 window 中的文本格式更改为（例如）20 号粗体红色文本吗？上面其实有一句话"Pick Year"，不过是白底白字，看不到。这也是不可取的。

推论2：

如果我不覆盖 ControlTemplate，则日期选择器如下所示：

点击它让我得到这个：

我似乎也找不到修改模态显示页面的方法，以便 1) 更改其蓝色背景颜色，因为蓝色与我的应用程序的其他部分不匹配，并且 2) 使用户可以看到滚轮式选择器'columns'。在当前状态下，这不是可用的 UI 小部件，因为用户不知道上下滑动会更改值。

结论：

感谢您在这方面给我提供的任何帮助或指导。我已经完成了从我能找到的文档中收集到的内容。

Answer 1

我建议您使用 WP8.1 SDK 中提供的默认日期选择器。但是正如您提到的，您面临着无法更改蓝色的问题。所以在内部 DatePicker 使用 LoopingSelector 所以基本上你需要覆盖默认 LoopingSelector 颜色。最好的地方是 App.xaml 或您定义所有样式的地方。

<SolidColorBrush x:Key="LoopingSelectorSelectionBackgroundThemeBrush" Color="#FFD84E53" />

同样，您可以覆盖 LoopingItems 的前景色。你可以从这个看到更多细节。希望对你有帮助

Windows Phone 8.1 日期选择器自定义问题

Windows Phone 8.1 Date Picker customization problems

xaml

datepicker

controltemplate

windows-phone-8.1