WPF-日期时间控件 DateTimePicker 的编写

    最近有一个项目中，因为数据库查询导出的问题，要频繁用到选择日期时间时间的工具，而WPF自带的控件中只有Datepicker这个控件，不足以满足功能，鉴于WPF强大的自定义控件Usercontrol的功能，我自己就简单制作了一个日期时间控件---DateTimePicker。------姜彦 20170804

 

  先给展示一下这个控件的简单情况：

 

 

思路是利用WPF自带的Calendar 做日历，然后自己再制作一个时间选择的控件，最后是把两者做到一个控件上，形成一个最终控件DateTimePicker，可是实现直接调用，或者以后再项目中直接添加，或者通过调用dll的方式使用。

 

控件的工程文件如下：

 

为了方便以后调用，我创建的是一个  WPF用户控件库，这个类型的类库，可以添加Usercontrol控件，并能最后编译生成dll。

一、控件的制作

1.DateTimePicker

   是控件的最终显示的窗体设计跟属性设计的文件

 

   DateTimePicker.xaml文件 

  View     

 1 <UserControl x:Class="Utility.Tool.Controls.View.DateTimePicker"
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 6              mc:Ignorable="d" 
 7              d:DesignHeight="25" 
 8              d:DesignWidth="150" 
 9              xmlns:my="clr-namespace:Utility.Tool.Controls.View"             
10              Loaded="UserControl_Loaded"
11              MaxWidth="150"
12              MaxHeight="25"
13              
14              >
15     
16     <Grid Height="25" Width="150">
17         
18         <Border BorderBrush="Silver" 
19                 BorderThickness="1" HorizontalAlignment="Left" 
20                 Margin="0,0,0,0" 
21                 Name="border1" 
22                 Width="150" 
23                 Height="25" 
24                 VerticalAlignment="Top"
25                 
26                 >
27          
28             <my:IconButton 
29                 x:Name="iconButton1" 
30                 Height="18" 
31                 Width="19" 
32                 HorizontalAlignment="Right"
33                 Icon="/Utility.Tool.Controls;component/Image/date.png"                 
34                 Click="iconButton1_Click"
35                 
36                 />
37             
38         </Border>
39         
40         <TextBlock 
41             Height="23" 
42             HorizontalAlignment="Left" 
43             Margin="5,5,0,0" 
44             Name="textBlock1"             
45             VerticalAlignment="Top" 
46             Text="2017/07/31 18:19:20"
47             Width="123" 
48             
49             />
50 
51         <Grid x:Name="girdChioce" 
52               Background="Transparent"
53               VerticalAlignment="Top"
54               Margin="0,258,0,40">
55             <Popup x:Name="popChioce" 
56                    PopupAnimation="Fade" 
57                    PlacementTarget="{Binding ElementName=girdChioce}" 
58                    Placement="Top"
59                    AllowsTransparency="True" 
60                    StaysOpen="False" 
61                    IsOpen="False">
62             </Popup>
63         </Grid>
64 
65     </Grid>
66 </UserControl>

View Code

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using System.Windows;
 6 using System.Windows.Controls;
 7 using System.Windows.Data;
 8 using System.Windows.Documents;
 9 using System.Windows.Input;
10 using System.Windows.Media;
11 using System.Windows.Media.Imaging;
12 using System.Windows.Navigation;
13 using System.Windows.Shapes;
14 using System.Drawing;
15 
16 namespace Utility.Tool.Controls.View
17 {
18    
19     [ToolboxBitmap(typeof(DateTimePicker), "DateTimePicker.bmp")]  
20     /// <summary>
21     /// DateTimePicker.xaml 的交互逻辑
22     /// </summary>    
23     public partial class DateTimePicker : UserControl
24     {
25         public DateTimePicker()
26         {
27             InitializeComponent();
28         }
29 
30         /// <summary>
31         /// 构造函数
32         /// </summary>
33         /// <param name="txt"></param>
34         public DateTimePicker(string txt)
35             : this()
36         {
37            // this.textBox1.Text = txt;
38         
39         }
40 
41         #region 事件
42 
43         /// <summary>
44         /// 日历图标点击事件
45         /// </summary>
46         /// <param name="sender"></param>
47         /// <param name="e"></param>
48         private void iconButton1_Click(object sender, RoutedEventArgs e)
49         {    
50             if (popChioce.IsOpen == true)
51             {
52                 popChioce.IsOpen = false;
53             }
54 
55             TDateTimeView dtView = new TDateTimeView(textBlock1.Text);// TDateTimeView  构造函数传入日期时间
56             dtView.DateTimeOK += (dateTimeStr) => //TDateTimeView 日期时间确定事件
57             {
58 
59                 textBlock1.Text = dateTimeStr;
60                 DateTime = Convert.ToDateTime(dateTimeStr);
61                 popChioce.IsOpen = false;//TDateTimeView 所在pop  关闭
62 
63             };
64 
65             popChioce.Child = dtView;
66             popChioce.IsOpen = true;
67         }
68 
69         /// <summary>
70         /// DateTimePicker 窗体登录事件
71         /// </summary>
72         /// <param name="sender"></param>
73         /// <param name="e"></param>
74         private void UserControl_Loaded(object sender, RoutedEventArgs e)
75         {
76             DateTime dt = DateTime.Now;
77             textBlock1.Text = dt.ToString("yyyy/MM/dd HH:mm:ss");//"yyyyMMddHHmmss"
78             DateTime = dt;            
79           //  DateTime = Convert.ToDateTime(textBlock1.Text);
80         }
81 
82         #endregion
83 
84         #region 属性
85 
86         /// <summary>
87         /// 日期时间
88         /// </summary>
89         public DateTime DateTime { get; set; }
90 
91         #endregion
92     }
93 }

Cs Code

 

2.IconButton

   是控件中使用到的一个类button的按钮，可以自定义图片的按钮

  View   

 

 1 <UserControl x:Class="Utility.Tool.Controls.View.IconButton"
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 6              mc:Ignorable="d" 
 7              d:DesignHeight="32" 
 8              d:DesignWidth="32"
 9              
10              >
11     <UserControl.Resources>
12         <Style x:Key="ButtonEmptyStyle" TargetType="{x:Type Button}">
13             <Setter Property="HorizontalContentAlignment" Value="Left"/>
14             <Setter Property="HorizontalAlignment" Value="Stretch"/>
15             <Setter Property="Template">
16                 <Setter.Value>
17                     <ControlTemplate TargetType="{x:Type Button}">
18                         <Border x:Name="ButtonBorder"
19                                 CornerRadius="3"
20                                 BorderThickness="1"
21                                 SnapsToDevicePixels="True"
22                                 BorderBrush="Transparent"
23                                 Background="{TemplateBinding Background}"
24                                 Margin="0">
25                             <Grid>
26                                 <ContentPresenter/>
27                             </Grid>
28                         </Border>
29                         <ControlTemplate.Triggers>
30                             <Trigger Property="IsPressed" Value="true">
31                                 <Setter TargetName="ButtonBorder" 
32                                         Property="Opacity" 
33                                         Value="0.5">
34                                 </Setter>
35                             </Trigger>
36                         </ControlTemplate.Triggers>
37                     </ControlTemplate>
38                 </Setter.Value>
39             </Setter>
40         </Style>
41     </UserControl.Resources>
42 
43     <Button x:Name="button"
44             Background="Transparent"
45             Style="{StaticResource ButtonEmptyStyle}"
46             Padding="0"
47             Focusable="False"
48             FocusVisualStyle="{x:Null}">
49         <!--ContextMenu="{StaticResource EmerWorkContextMenu}"-->
50         <Grid>
51             <Image x:Name="icon"/>
52         </Grid>
53     </Button>
54 </UserControl>

View Code

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using System.Windows;
 6 using System.Windows.Controls;
 7 using System.Windows.Data;
 8 using System.Windows.Documents;
 9 using System.Windows.Input;
10 using System.Windows.Media;
11 using System.Windows.Media.Imaging;
12 using System.Windows.Navigation;
13 using System.Windows.Shapes;
14 
15 namespace Utility.Tool.Controls.View
16 {
17 
18     [System.ComponentModel.DesignTimeVisible(false)]//在工具箱中 隐藏该窗体 20170804 姜彦
19     public partial class IconButton : UserControl
20     {
21         public IconButton()
22         {
23             InitializeComponent();
24 
25             this.button.Click += delegate
26             {
27                 RoutedEventArgs newEvent = new RoutedEventArgs(IconButton.ClickEvent, this);
28                 this.RaiseEvent(newEvent);
29             };
30         }
31 
32         #region 图标
33         public static readonly DependencyProperty IconProperty =
34             DependencyProperty.Register("Icon",
35             typeof(string),
36             typeof(IconButton),
37             new PropertyMetadata(string.Empty, OnIconChanged));
38         public string Icon
39         {
40             set { SetValue(IconProperty, value); }
41             get { return (string)GetValue(IconProperty); }
42         }
43         private static void OnIconChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
44         {
45             IconButton btn = obj as IconButton;
46             if (btn == null)
47             {
48                 return;
49             }
50             btn.icon.Source = new BitmapImage(new Uri((string)args.NewValue, UriKind.Relative));
51         }
52         #endregion
53 
54         #region 命令
55 
56         public static readonly DependencyProperty CommandProperty =
57             DependencyProperty.Register("Command",
58             typeof(ICommand),
59             typeof(IconButton),
60             new PropertyMetadata(null, OnSelectCommandChanged));
61         public ICommand Command
62         {
63             set { SetValue(CommandProperty, value); }
64             get { return (ICommand)GetValue(CommandProperty); }
65         }
66         private