Windows Phone 8.1 如何在TimePicker 控件中格式化时间?

How to format Time in TimePickerControl in Windows Phone 8.1?

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

现在看起来像:

但我想将其格式化为:

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

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