如何在 Windows Phone 8.1 的 TimePickerControl 中格式化时间？答案

【问题标题】：How to format Time in TimePickerControl in Windows Phone 8.1?如何在 Windows Phone 8.1 的 TimePickerControl 中格式化时间？
【发布时间】：2016-10-27 08:19:43
【问题描述】：

我在 xaml 中有一个时间选择器控件

   <TimePicker Time="{Binding SelectedTime, Mode=TwoWay}" HorizontalContentAlignment="Center"
                    Style="{StaticResource TimePickerStyle}" x:Name="SeekTimePicker" />

控制是

   <Style x:Key="TimePickerStyle" TargetType="TimePicker">
        <Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}" />
        <Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}" />
        <Setter Property="Foreground" Value="{ThemeResource TimePickerForegroundThemeBrush}" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TimePicker" >
                    <StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}" Background="Red">
                        <ContentPresenter x:Name="HeaderContentPresenter"
                                ContentTemplate="{TemplateBinding HeaderTemplate}"
                                Content="aaaa" Margin="0,0,0,-3"
                                Style="{StaticResource HeaderContentPresenterStyle}" />
                        <Button x:Name="FlyoutButton" BorderBrush="{TemplateBinding Foreground}" BorderThickness="1"
                                Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                IsEnabled="{TemplateBinding IsEnabled}" Padding="6.5,0,0,3" Content="qqqqqqqqqqqq" Background="Green"/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

现在看起来像：

但我想将其格式化为：

【问题讨论】：

标签： windows xaml windows-phone-8 timepicker

【解决方案1】：

这可以通过在时间选择器样式中编辑模板来完成，如下所示

        <Style x:Key="TimePickerStyle" TargetType="TimePicker">
        <Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}" />
        <Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}" />
        <Setter Property="Foreground" Value="{ThemeResource TimePickerForegroundThemeBrush}" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TimePicker">
                    <StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
                        <ContentPresenter x:Name="HeaderContentPresenter"
                                ContentTemplate="{TemplateBinding HeaderTemplate}"
                                Content="{TemplateBinding Header}" Margin="0,0,0,-3"
                                Style="{StaticResource HeaderContentPresenterStyle}" />
                        <Button x:Name="FlyoutButton" BorderBrush="{TemplateBinding Foreground}" BorderThickness="1"
                                Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                IsEnabled="{TemplateBinding IsEnabled}" Padding="6.5,0,0,3" >
                            <Button.ContentTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding ElementName=FlyoutButton,Path=DataContext.SelectedTimeText}"/>
                                </DataTemplate>
                            </Button.ContentTemplate>
                        </Button>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

【讨论】：