How to format Time in TimePickerControl in Windows Phone 8.1?

Question

I have a time picker control in xaml as

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

and of the control is

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

Now it look like:

But I want to format it as:

Answer 1

This can do by editing template inside time picker style as below

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