Comment formater l'heure dans TimePickerControl dans Windows Phone 8.1?

Question

J'ai un contrôle de sélecteur de temps en XAML comme

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

et du contrôle est

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

maintenant ressembler à:

Mais je veux formater comme:

Answer 1

Cela peut faire par la modification du modèle dans le style de sélecteur de temps comme ci-dessous

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