WPF 时间编辑控件的实现（TimeEditer）

一、前言

有个项目需要用到时间编辑控件，在大量搜索无果后只能自己自定义一个了。MFC中倒是有这个控件，叫CDateTimeCtrl。大概是这个样子：

二、要实现的功能

• 要实现的功能包含：
• 编辑时、分、秒（可按数字键输入编辑）
• 获取焦点后可实现递增或递减

三、WFP实现原理

四个TextBox和两个TextBlock组和，再加两个按钮应该就能组成这个控件的基本结构了。再设置焦点事件及按键事件可以实现编辑。

Xaml代码如下：

 <Style TargetType="{x:Type controls:TimeEditer}">
         <Setter Property="BorderThickness" Value="1"/>
         <Setter Property="BorderBrush" Value="#ececec"/>
         <Setter Property="Hour" Value="00"/>
         <Setter Property="Minute" Value="00"/>
         <Setter Property="Second" Value="00"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type controls:TimeEditer}">
                     <Border Background="{TemplateBinding Background}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}">
                         <Grid Margin="3 0">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="18"/>
                                 <ColumnDefinition Width="auto"/>
                                 <ColumnDefinition Width="18"/>
                                 <ColumnDefinition Width="auto"/>
                                 <ColumnDefinition Width="18"/>
                                 <ColumnDefinition Width="*"/>
                             </Grid.ColumnDefinitions>
                             <TextBox x:Name="PART_TXTHOUR" HorizontalContentAlignment="Center" Cursor="Arrow" BorderThickness="0" SelectionBrush="White" AutoWordSelection="False" Text="{Binding Hour,RelativeSource={RelativeSource TemplatedParent},StringFormat={}{0:00},UpdateSourceTrigger=PropertyChanged}" Foreground="Black" Focusable="True" IsReadOnly="True" IsReadOnlyCaretVisible="False"  VerticalAlignment="Center"/>
                             <TextBlock Text=":" VerticalAlignment="Center" Grid.Column="1"/>
                             <TextBox x:Name="PART_TXTMINUTE" HorizontalContentAlignment="Center" Cursor="Arrow" Grid.Column="2" BorderThickness="0" AutoWordSelection="False" Text="{Binding Minute,RelativeSource={RelativeSource TemplatedParent},StringFormat={}{0:00},UpdateSourceTrigger=PropertyChanged}" Foreground="Black" Focusable="True" IsReadOnly="True" IsReadOnlyCaretVisible="False" VerticalAlignment="Center"/>
                             <TextBlock Text=":" VerticalAlignment="Center" Grid.Column="3"/>
                             <TextBox x:Name="PART_TXTSECOND" HorizontalContentAlignment="Center" Cursor="Arrow" Grid.Column="4" BorderThickness="0" AutoWordSelection="False" Text="{Binding Second,RelativeSource={RelativeSource TemplatedParent},StringFormat={}{0:00},UpdateSourceTrigger=PropertyChanged}" Foreground="Black" Focusable="True" IsReadOnly="True" IsReadOnlyCaretVisible="False"  VerticalAlignment="Center"/>
                             <TextBox x:Name="PART_TXT4" Grid.Column="5" Background="Transparent" BorderThickness="0" IsReadOnly="True" AutoWordSelection="False" IsReadOnlyCaretVisible="False" Cursor="Arrow" />

                             <Grid Grid.Column="5" HorizontalAlignment="Right" x:Name="numIncrease" Visibility="{TemplateBinding NumIncreaseVisible}">
                                 <Grid.RowDefinitions>
                                     <RowDefinition/>
                                     <RowDefinition/>
                                 </Grid.RowDefinitions>
                                 <controls:ButtonEx x:Name="PART_UP" Focusable="False"  ButtonType="Icon" Icon="/BaseControl;component/Images/arrowTop.png" Width="17" Height="11" VerticalAlignment="Bottom"/>
                                 <controls:ButtonEx x:Name="PART_DOWN" Focusable="False" ButtonType="Icon" Icon="/BaseControl;component/Images/arrowBottom.png"  Width="17" Height="11" VerticalAlignment="Top" Grid.Row="1"/>
                             </Grid>
                         </Grid>
                     </Border>
                 </ControlTemplate>
            </Setter.Value>
       </Setter>
 </Style>

XAML

cs代码如下：

 public class TimeEditer : Control
     {
         static TimeEditer()
         {
             DefaultStyleKeyProperty.OverrideMetadata(typeof(TimeEditer), new FrameworkPropertyMetadata(typeof(TimeEditer)));
         }

         private TextBox currentTextBox;
         private Button btnUp;
         private Button btnDown;
         private TextBox txt1;
         private TextBox txt2;
         private TextBox txt3;
         private TextBox txt4;

         public TimeEditer()
         {
             var newTime = DateTime.Now.AddMinutes();
             Hour = newTime.Hour;
             Minute= newTime.Minute;
             Second= newTime.Second;
         }

         public override void OnApplyTemplate()
         {
             base.OnApplyTemplate();
             btnUp =Template.FindName("PART_UP",this) as Button;
             btnDown = Template.FindName("PART_DOWN", this) as Button;
             txt1 = Template.FindName("PART_TXTHOUR", this) as TextBox;
             txt2 = Template.FindName("PART_TXTMINUTE", this) as TextBox;
             txt3 = Template.FindName("PART_TXTSECOND", this) as TextBox;
             txt4 = Template.FindName("PART_TXT4", this) as TextBox;

             txt1.GotFocus += TextBox_GotFocus;
             txt2.GotFocus += TextBox_GotFocus;
             txt3.GotFocus += TextBox_GotFocus;
             txt1.LostFocus += TextBox_LostFocus;
             txt2.LostFocus += TextBox_LostFocus;
             txt3.LostFocus += TextBox_LostFocus;
             txt1.KeyDown += Txt1_KeyDown;
             txt2.KeyDown += Txt1_KeyDown;
             txt3.KeyDown += Txt1_KeyDown;

             txt4.GotFocus += TextBox2_GotFocus;
             txt4.LostFocus += TextBox2_LostFocus;

             this.GotFocus += UserControl_GotFocus;
             this.LostFocus += UserControl_LostFocus;

             this.Repeater(btnUp, (t, num, reset) =>
             {
                 if (reset && t.Interval == )
                     t.Interval = ;
                 Dispatcher.Invoke(new Action(() =>
                 {
                     if (currentTextBox.Name == "PART_TXTHOUR")
                     {
                         int.TryParse(currentTextBox.Text, out int numResult);
                         numResult += num;
                         if (numResult >= )
                             numResult = ;
                         if (numResult < )
                             numResult = ;
                         currentTextBox.Text = numResult.ToString("");
                     }
                     else if (currentTextBox.Name == "PART_TXTMINUTE")
                     {
                         int.TryParse(currentTextBox.Text, out int numResult);
                         numResult += num;
                         if (numResult >= )
                             numResult = ;
                         if (numResult < )
                             numResult = ;
                         currentTextBox.Text = numResult.ToString("");
                     }
                     else if (currentTextBox.Name == "PART_TXTSECOND")
                     {
                         int.TryParse(currentTextBox.Text, out int numResult);
                         numResult += num;
                         if (numResult >= )
                             numResult = ;
                         if (numResult < )
                             numResult = ;
                         currentTextBox.Text = numResult.ToString("");
                     }
                 }));

             }, );
             this.Repeater(btnDown, (t, num, reset) =>
             {
                 if (reset && t.Interval == )
                     t.Interval = ;
                 Dispatcher.Invoke(new Action(() =>
                 {
                     if (currentTextBox.Name == "PART_TXTHOUR")
                     {
                         int.TryParse(currentTextBox.Text, out int numResult);
                         numResult += num;
                         if (numResult >= )
                             numResult = ;
                         if (numResult < )
                             numResult = ;
                         currentTextBox.Text = numResult.ToString("");
                     }
                     else if (currentTextBox.Name == "PART_TXTMINUTE")
                     {
                         int.TryParse(currentTextBox.Text, out int numResult);
                         numResult += num;
                         if (numResult >= )
                             numResult = ;
                         if (numResult < )
                             numResult = ;
                         currentTextBox.Text = numResult.ToString("");
                     }
                     else if (currentTextBox.Name == "PART_TXTSECOND")
                     {
                         int.TryParse(currentTextBox.Text, out int numResult);
                         numResult += num;
                         if (numResult >= )
                             numResult = ;
                         if (numResult < )
                             numResult = ;
                         currentTextBox.Text = numResult.ToString("");
                     }
                 }));

             }, -);
         }
         private void TextBox_GotFocus(object sender, RoutedEventArgs e)
         {
             var textBox = sender as TextBox;
             textBox.Background = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#0078d7"));
             textBox.Foreground = new SolidColorBrush(Colors.White);
             currentTextBox = textBox;

         }

         private void TextBox_LostFocus(object sender, RoutedEventArgs e)
         {
             var textBox = sender as TextBox;
             textBox.Background = new SolidColorBrush(Colors.Transparent);
             textBox.Foreground = new SolidColorBrush(Colors.Black);
             int.TryParse(currentTextBox.Text, out int numResult);
             currentTextBox.Text = numResult.ToString("");
         }

         private void UserControl_LostFocus(object sender, RoutedEventArgs e)
         {
             this.BorderBrush = new SolidColorBrush(Color.FromArgb(, , , ));
             NumIncreaseVisible = Visibility.Collapsed;
         }

         private void UserControl_GotFocus(object sender, RoutedEventArgs e)
         {
             this.BorderBrush = new SolidColorBrush(Color.FromArgb(, , , ));
             NumIncreaseVisible = Visibility.Visible;
         }

         private void TextBox2_GotFocus(object sender, RoutedEventArgs e)
         {
             txt3.Focus();
         }

         private void TextBox2_LostFocus(object sender, RoutedEventArgs e)
         {

         }

         public void Repeater(Button btn, Action<Timer, int, bool> callBack, int num, int interval = )
         {
             var timer = new Timer { Interval = interval };
             timer.Elapsed += (sender, e) =>
             {
                 callBack?.Invoke(timer, num, true);
             };
             btn.PreviewMouseLeftButtonDown += (sender, e) =>
             {
                 callBack?.Invoke(timer, num, false);
                 timer.Start();
             };
             btn.PreviewMouseLeftButtonUp += (sender, e) =>
             {
                 timer.Interval = ;
                 timer.Stop();
             };
         }

         private void Txt1_KeyDown(object sender, KeyEventArgs e)
         {
             int.TryParse(currentTextBox.Text, out int numResult);

             if ((int)e.Key >=  && (int)e.Key <= )
             {

                 if (currentTextBox.Text.Length == )
                 {
                     int.TryParse(currentTextBox.Text + ((int)e.Key - ).ToString(), out int preNumResult);
                     if (currentTextBox.Name == "PART_TXTHOUR")
                     {
                         if (preNumResult >= )
                         {
                             return;
                         }
                     }
                     else if (currentTextBox.Name == "PART_TXTMINUTE")
                     {
                         if (preNumResult >= )
                         {
                             return;
                         }
                     }
                     else if (currentTextBox.Name == "PART_TXTSECOND")
                     {
                         if (preNumResult >= )
                         {
                             return;
                         }
                     }

                     currentTextBox.Text += ((int)e.Key - ).ToString();
                 }
                 else
                 {
                     currentTextBox.Text = ((int)e.Key - ).ToString();
                 }
             }

             if ((int)e.Key >=  && (int)e.Key <= )
             {

                 if (currentTextBox.Text.Length == )
                 {
                     int.TryParse(currentTextBox.Text + ((int)e.Key - ).ToString(), out int preNumResult);
                     if (currentTextBox.Name == "PART_TXTHOUR")
                     {
                         if (preNumResult >= )
                         {
                             return;
                         }
                     }
                     else if (currentTextBox.Name == "PART_TXTMINUTE")
                     {
                         if (preNumResult >= )
                         {
                             return;
                         }
                     }
                     else if (currentTextBox.Name == "PART_TXTSECOND")
                     {
                         if (preNumResult >= )
                         {
                             return;
                         }
                     }
                     currentTextBox.Text += ((int)e.Key - ).ToString();
                 }
                 else
                 {
                     currentTextBox.Text = ((int)e.Key - ).ToString();
                 }
             }

         }

         public int Hour
         {
             get { return (int)GetValue(HourProperty); }
             set { SetValue(HourProperty, value); }
         }

         // Using a DependencyProperty as the backing store for Hour.  This enables animation, styling, binding, etc...
         public static readonly DependencyProperty HourProperty =
             DependencyProperty.Register("Hour", typeof(int), typeof(TimeEditer), new PropertyMetadata(DateTime.Now.Hour));

         public int Minute
         {
             get { return (int)GetValue(MinuteProperty); }
             set { SetValue(MinuteProperty, value); }
         }

         // Using a DependencyProperty as the backing store for Minute.  This enables animation, styling, binding, etc...
         public static readonly DependencyProperty MinuteProperty =
             DependencyProperty.Register("Minute", typeof(int), typeof(TimeEditer), new PropertyMetadata(DateTime.Now.Minute));

         public int Second
         {
             get { return (int)GetValue(SecondProperty); }
             set { SetValue(SecondProperty, value); }
         }

         // Using a DependencyProperty as the backing store for Second.  This enables animation, styling, binding, etc...
         public static readonly DependencyProperty SecondProperty =
             DependencyProperty.Register("Second", typeof(int), typeof(TimeEditer), new PropertyMetadata(DateTime.Now.Second));

         public Visibility NumIncreaseVisible
         {
             get { return (Visibility)GetValue(NumIncreaseVisibleProperty); }
             set { SetValue(NumIncreaseVisibleProperty, value); }
         }

         // Using a DependencyProperty as the backing store for NumIncreaseVisible.  This enables animation, styling, binding, etc...
         public static readonly DependencyProperty NumIncreaseVisibleProperty =
             DependencyProperty.Register("NumIncreaseVisible", typeof(Visibility), typeof(TimeEditer), new PropertyMetadata(Visibility.Collapsed));

 }

查看代码

四、实现效果（可双向绑定）

五、小结

实现的过程还是比较曲折的，需要了解TextBox相关属性，刚开始不清楚走了很多弯路，相关属性可以在这里查看https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.controls.textbox?view=netframework-4.8 。另外一个就是实现数字递增递减的方案，刚开始始终没法实现快速递增和递减，只能开线程匀速增减，还很慢，太快的话又会影响单次点击的效果。最后是使用Timmer控件，通过修改Interval实现了，哈哈。

源码放git了：

https://github.com/cmfGit/TimeEditer.git