【问题标题】:Windows Phone 8.1 Date Picker customization problemsWindows Phone 8.1 日期选择器自定义问题
【发布时间】:2016-01-20 00:27:41
【问题描述】:

主要问题:

我有一个 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",这是我可以让字体颜色不是白色的唯一方法)但这不是重点这个问题。

我试图解决的不良行为是 当我点击月、日或年 ComboBox 时,当前值不是出现的选择器的焦点。例如,在以下日期选择器中点击“2016”时:

出现以下选择器窗口:

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

推论问题 1:

选择器窗口以模态方式显示,我似乎找不到直接更改其格式的方法 - 我最好的前进路径是什么?有没有办法让我将选择器窗口中的文本格式更改为(例如)20 点粗体红色文本?顶部“Pick Year”实际上有一个短语,但它是白底白字,所以你看不到它。这也是不可取的。

推论问题 2:

如果我不覆盖 ControlTemplate,那么日期选择器将如下所示:

点击它可以让我做到这一点:

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

结论:

感谢您为此提供的任何帮助或指导。从我能找到的文档中收集到的信息已经到了尽头。

【问题讨论】:

    标签: xaml datepicker windows-phone-8.1 controltemplate


    【解决方案1】:

    我建议您使用 WP8.1 SDK 中提供的默认日期选择器。但是正如您提到的,您面临无法更改蓝色的问题。所以在内部 DatePicker 使用 LoopingSelector 所以基本上你需要覆盖 Default LoopingSelector 颜色。执行此操作的最佳位置是 App.xaml 或您定义了所有样式的任何位置。

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

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

    【讨论】:

    • 感谢您的提示,我会试一试!我在我的 themeresources.xaml 或 generic.xaml 的任何地方都没有看到任何带有“循环”一词的内容...我应该这样做吗?
    • 哇,那个键确实起作用了。我想知道他们为什么不将它包含在 themeresources.xaml 或 generic.xaml 中。
    • 不幸的是,链接答案中提到的 ControlTemplates 仅适用于 UWP,不适用于 WinPhone 8.1。所以那里没有骰子。
    • 很酷,您能够部分解决问题。而对于这一点——让用户可以看到滚筒式选择器'列。我不完全确定你想在这里实现什么,因为当我们点击日期、月份或年份的任何列时,我们可以看到相应元素的滚动列表,这是预期的行为。
    • 哦,所以“正常”行为是滚动条是不可见的?我之前没有在 WinPhone 上使用过带有 DatePickers 的应用程序,所以这不是我的期望。但如果这就是 WinPhone 上的工作方式,那么我很乐意接受这个设备成语,因为这是用户所期望的。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多