先看效果
不想自己撸代码的可以使用免费的XiaFControl控件库,在nuget包中搜索XiaFControl。各种控件都有哦!
示例代码:
github示例demo代码https://github.com/LiuliuMao/XiaFControl
gitee示例demo代码https://gitee.com/lm961031/xia-fcontrol
QQ交流群:371769310
下面直接上代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
namespace LAP_A.Resource.Controller
{
public class DateTimePicker : Control
{
List<int> hours, mins, secs;
ListBox con_hours, con_mins, con_secs;
Calendar calendar;
ToggleButton toggle;
Button btnOk;
static DateTimePicker()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(DateTimePicker), new FrameworkPropertyMetadata(typeof(DateTimePicker)));
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
hours = new List<int>();
mins = new List<int>();
secs = new List<int>();
con_hours = GetTemplateChild("PART_hours") as ListBox;
con_mins = GetTemplateChild("PART_mins") as ListBox;
con_secs = GetTemplateChild("PART_secs") as ListBox;
calendar = GetTemplateChild("PART_calendar") as Calendar;
btnOk = GetTemplateChild("PART_Confirm") as Button;
toggle = GetTemplateChild("PART_togg") as ToggleButton;
for (int i = 0; i < 60; i++)
{
if (i < 24)
{
hours.Add(i);
}
mins.Add(i);
secs.Add(i);
}
con_hours.ItemsSource = hours;
con_mins.ItemsSource = mins;
con_secs.ItemsSource = secs;
btnOk.Click -= BtnOk_Click;
btnOk.Click += BtnOk_Click;
}
private void BtnOk_Click(object sender, RoutedEventArgs e)
{
DateTime? time = calendar.SelectedDate;
if (time == null)
time = DateTime.Today;
var span = new TimeSpan();
if (con_hours.SelectedItem is int hour)
{
span+=new TimeSpan(hour,0,0);
}
if (con_mins.SelectedItem is int mins)
{
span+=new TimeSpan(0,mins,0);
}
if (con_secs.SelectedItem is int sec)
{
span+=new TimeSpan(0,0,sec);
}
EditTimeValue = time+span;
toggle.IsChecked = false;
}
public DateTime? EditTimeValue
{
get { return (DateTime)GetValue(EditTimeValueProperty); }
set
{
SetValue(EditTimeValueProperty, value);
DisPlayValue = value?.ToString("yyyy-MM-dd HH:mm:ss");
}
}
// Using a DependencyProperty as the backing store for EditTimeValue. This enables animation, styling, binding, etc...
public static readonly DependencyProperty EditTimeValueProperty =
DependencyProperty.Register("EditTimeValue", typeof(DateTime), typeof(DateTimePicker), new PropertyMetadata(DateTime.Now));
public string DisPlayValue
{
get { return (string)GetValue(DisPlayValueProperty); }
set { SetValue(DisPlayValueProperty, value); }
}
// Using a DependencyProperty as the backing store for DisPlayValue. This enables animation, styling, binding, etc...
public static readonly DependencyProperty DisPlayValueProperty =
DependencyProperty.Register("DisPlayValue", typeof(string), typeof(DateTimePicker), new PropertyMetadata(default));
}
}
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:con="clr-namespace:LAP_A.Resource.Controller">
<Style TargetType="con:DateTimePicker">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="Gray" BorderThickness="2" CornerRadius="5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="30"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Text="{Binding RelativeSource={RelativeSource AncestorType=con:DateTimePicker}, Path=DisPlayValue,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" BorderBrush="Transparent" BorderThickness="0"></TextBox>
<ToggleButton x:Name="PART_togg" Grid.Column="1" Background="Transparent" BorderThickness="0" Margin="2">
<Image Source="/Resource/Images/datetime.png"/>
</ToggleButton>
<Popup StaysOpen="False" IsOpen="{Binding ElementName=PART_togg, Path=IsChecked,Mode=TwoWay}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition MinWidth="180"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Calendar x:Name="PART_calendar" BorderBrush="Transparent" Margin="0,-3,0,-3" Background="White" BorderThickness="0"></Calendar>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="60"></ColumnDefinition>
<ColumnDefinition MinWidth="60"></ColumnDefinition>
<ColumnDefinition MinWidth="60"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ListBox MaxHeight="192" BorderThickness="0" x:Name="PART_hours" Grid.Column="0" Background="White">
</ListBox>
<ListBox MaxHeight="192" BorderThickness="0" x:Name="PART_mins" Grid.Column="1" Background="White">
</ListBox>
<ListBox MaxHeight="192" BorderThickness="0" x:Name="PART_secs" Grid.Column="2" Background="White">
</ListBox>
</Grid>
<Button x:Name="PART_Confirm" Content="确定" Background="{DynamicResource Light}" Foreground="White" BorderBrush="Transparent" BorderThickness="0" Grid.Row="1" Grid.ColumnSpan="2"></Button>
</Grid>
</Popup>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>