add TimePickerList

2019-05-11 19:17:10 +04:30
1 parent 3c2b045807
commit 7585d86fb5
@@ -7,6 +7,8 @@
    <controls:TransitioningContentControl>
        <StackPanel Margin="32" Orientation="Horizontal">
            <StackPanel>
+                <controls:TimeSelector Margin="10" Height="200" Width="160"/>
+                <controls:TimePickerList Width="200" Height="30" />
                <controls:TimePicker ShowClearButton="True"/>
                <controls:TimePicker Margin="0,16,0,0" IsEnabled="False"/>

@@ -0,0 +1,79 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Media;
+using System.Windows.Media.Animation;
+
+namespace HandyControl.Controls
+{
+    /// <summary>
+    /// ItemsControl扩展方法
+    /// </summary>
+    public static class ItemsControlExtensions
+    {
+        /// <summary>
+        /// 平滑滚动至指定元素
+        /// </summary>
+        /// <param name="itemsControl"></param>
+        /// <param name="item"></param>
+        public static void AnimateScrollIntoView(this ItemsControl itemsControl, object item)
+        {
+            ScrollViewer scrollViewer = FindVisualChild<ScrollViewer>(itemsControl);
+            if (scrollViewer == null)
+            {
+                return;
+            }
+
+            UIElement container = itemsControl.ItemContainerGenerator.ContainerFromItem(item) as UIElement;
+
+            if (container == null)
+            {
+                return;
+            }
+
+            int index = itemsControl.ItemContainerGenerator.IndexFromContainer(container);
+
+            //平滑滚动到元素所在位置
+            //double toValue = scrollViewer.ScrollableHeight * ((double)index / itemsControl.Items.Count);
+            //平滑滚动，将选中的元素置顶
+            double toValue = VisualTreeHelper.GetOffset(container).Y;
+
+            DoubleAnimation verticalAnimation = new DoubleAnimation();
+            verticalAnimation.From = scrollViewer.VerticalOffset;
+            verticalAnimation.To = toValue;
+            verticalAnimation.DecelerationRatio = .2;
+            verticalAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(200));
+            Storyboard storyboard = new Storyboard();
+            storyboard.Children.Add(verticalAnimation);
+            Storyboard.SetTarget(verticalAnimation, scrollViewer);
+            Storyboard.SetTargetProperty(verticalAnimation, new PropertyPath(ScrollViewerBehavior.VerticalOffsetProperty));
+            storyboard.Begin();
+        }
+
+        /// <summary>
+        /// 查找元素的子元素
+        /// </summary>
+        /// <typeparam name="T">子元素类型</typeparam>
+        /// <param name="obj"></param>
+        /// <returns></returns>
+        public static T FindVisualChild<T>(DependencyObject obj) where T : DependencyObject
+        {
+            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
+            {
+                DependencyObject child = VisualTreeHelper.GetChild(obj, i);
+                if (child != null && child is T)
+                    return (T)child;
+                else
+                {
+                    T childOfChild = FindVisualChild<T>(child);
+                    if (childOfChild != null)
+                        return childOfChild;
+                }
+            }
+            return null;
+        }
+    }
+}
@@ -0,0 +1,42 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+
+namespace HandyControl.Controls
+{
+    public class TimeButton : ListBoxItem
+    {
+        #region Private属性
+        #endregion
+
+        #region 依赖属性定义
+
+        #endregion
+
+        #region 依赖属性set get
+
+        #endregion
+
+        #region Constructors
+        static TimeButton()
+        {
+            DefaultStyleKeyProperty.OverrideMetadata(typeof(TimeButton), new FrameworkPropertyMetadata(typeof(TimeButton)));
+        }
+        #endregion
+
+        #region Override方法
+        public override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+        }
+        #endregion
+
+        #region Private方法
+
+        #endregion
+    }
+}
@@ -0,0 +1,114 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Controls.Primitives;
+
+namespace HandyControl.Controls
+{
+    public class TimePickerList : Control
+    {
+        #region Private属性
+        private TextBox PART_TextBox;
+        private TimeSelector PART_TimeSelector;
+        private Popup PART_Popup;
+        #endregion
+
+        #region 依赖属性定义
+
+        #endregion
+
+        #region 依赖属性set get
+
+        #region TimeStringFormat
+        public string TimeStringFormat
+        {
+            get { return (string)GetValue(TimeStringFormatProperty); }
+            set { SetValue(TimeStringFormatProperty, value); }
+        }
+
+        public static readonly DependencyProperty TimeStringFormatProperty =
+            DependencyProperty.Register("TimeStringFormat", typeof(string), typeof(TimePickerList), new PropertyMetadata("HH:mm:ss"));
+        #endregion
+
+        #region SelectedTime
+        public DateTime? SelectedTime
+        {
+            get { return (DateTime?)GetValue(SelectedTimeProperty); }
+            set { SetValue(SelectedTimeProperty, value); }
+        }
+
+        public static readonly DependencyProperty SelectedTimeProperty =
+            DependencyProperty.Register("SelectedTime", typeof(DateTime?), typeof(TimePickerList), new PropertyMetadata(null, SelectedTimeChangedCallback));
+
+        private static void SelectedTimeChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            TimePickerList timePicker = d as TimePickerList;
+            DateTime dt = (DateTime)e.NewValue;
+
+            timePicker.PART_TimeSelector.SelectedTime = dt;
+        }
+        #endregion
+
+        #region DropDownHeight
+
+        public double DropDownHeight
+        {
+            get { return (double)GetValue(DropDownHeightProperty); }
+            set { SetValue(DropDownHeightProperty, value); }
+        }
+
+        public static readonly DependencyProperty DropDownHeightProperty =
+            DependencyProperty.Register("DropDownHeight", typeof(double), typeof(TimePickerList), new PropertyMetadata(168d));
+
+        #endregion
+
+        #endregion
+
+        #region Constructors
+        static TimePickerList()
+        {
+            DefaultStyleKeyProperty.OverrideMetadata(typeof(TimePickerList), new FrameworkPropertyMetadata(typeof(TimePickerList)));
+        }
+        #endregion
+
+        #region Override方法
+        public override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            this.PART_TextBox = this.GetTemplateChild("PART_TextBox") as TextBox;
+            this.PART_TimeSelector = this.GetTemplateChild("PART_TimeSelector") as TimeSelector;
+            this.PART_Popup = this.GetTemplateChild("PART_Popup") as Popup;
+            if (this.PART_TimeSelector != null)
+            {
+                this.PART_TimeSelector.Owner = this;
+                this.PART_TimeSelector.SelectedTimeChanged += PART_TimeSelector_SelectedTimeChanged;
+            }
+            if (this.PART_Popup != null)
+            {
+                this.PART_Popup.Opened += PART_Popup_Opened;
+            }
+        }
+
+        private void PART_Popup_Opened(object sender, EventArgs e)
+        {
+            this.PART_TimeSelector.SetButtonSelected();
+        }
+        #endregion
+
+        #region Private方法
+        private void PART_TimeSelector_SelectedTimeChanged(object sender, RoutedPropertyChangedEventArgs<DateTime?> e)
+        {
+            if (this.PART_TextBox != null && e.NewValue != null)
+            {
+                this.PART_TextBox.Text = e.NewValue.Value.ToString(this.TimeStringFormat);
+                this.SelectedTime = e.NewValue;
+            }
+        }
+        #endregion
+    }
+}
@@ -0,0 +1,380 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Media;
+using System.Windows.Media.Animation;
+
+namespace HandyControl.Controls
+{
+    public class TimeSelector : Control
+    {
+        private ObservableCollection<TimeButton> HourButtons = new ObservableCollection<TimeButton>();
+        private ObservableCollection<TimeButton> MinuteButtons = new ObservableCollection<TimeButton>();
+        private ObservableCollection<TimeButton> SecondButtons = new ObservableCollection<TimeButton>();
+
+        #region 控件内部元素
+        private ListBox PART_Hour;
+        private ListBox PART_Minute;
+        private ListBox PART_Second;
+        #endregion
+
+        #region 私有属性
+        private int Hour = 0;
+        private int Minute = 0;
+        private int Second = 0;
+        #endregion
+
+        #region Fields
+        public TimePickerList Owner { get; set; }
+        #endregion
+
+        #region 事件定义
+
+        #region SelectedTimeChanged
+        public static readonly RoutedEvent SelectedTimeChangedEvent = EventManager.RegisterRoutedEvent("SelectedTimeChanged",
+            RoutingStrategy.Bubble, typeof(RoutedPropertyChangedEventHandler<DateTime?>), typeof(TimeSelector));
+
+        public event RoutedPropertyChangedEventHandler<DateTime?> SelectedTimeChanged
+        {
+            add
+            {
+                this.AddHandler(SelectedTimeChangedEvent, value);
+            }
+            remove
+            {
+                this.RemoveHandler(SelectedTimeChangedEvent, value);
+            }
+        }
+
+        public virtual void OnSelectedTimeChanged(DateTime? oldValue, DateTime? newValue)
+        {
+            RoutedPropertyChangedEventArgs<DateTime?> arg = new RoutedPropertyChangedEventArgs<DateTime?>(oldValue, newValue, SelectedTimeChangedEvent);
+            this.RaiseEvent(arg);
+        }
+        #endregion
+
+        #endregion
+
+        #region 依赖属性set get
+
+        #region SelectedTime
+        public DateTime? SelectedTime
+        {
+            get { return (DateTime?)GetValue(SelectedTimeProperty); }
+            set { SetValue(SelectedTimeProperty, value); }
+        }
+
+        public static readonly DependencyProperty SelectedTimeProperty =
+            DependencyProperty.Register("SelectedTime", typeof(DateTime?), typeof(TimeSelector), new PropertyMetadata(null, SelectedTimeChangedCallback));
+
+        private static void SelectedTimeChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            TimeSelector timeSelector = d as TimeSelector;
+            DateTime dt = (DateTime)e.NewValue;
+
+            timeSelector.SetButtonSelected();
+
+            timeSelector.OnSelectedTimeChanged((DateTime?)e.OldValue, (DateTime?)e.NewValue);
+        }
+
+        public void SetButtonSelected()
+        {
+            if (!this.SelectedTime.HasValue)
+            {
+                return;
+            }
+
+            this.Hour = this.SelectedTime.Value.Hour;
+            this.Minute = this.SelectedTime.Value.Minute;
+            this.Second = this.SelectedTime.Value.Second;
+
+            if (this.PART_Hour != null)
+            {
+                for (int i = 0; i < this.PART_Hour.Items.Count; i++)
+                {
+                    TimeButton timeButton = this.PART_Hour.Items[i] as TimeButton;
+                    if (Convert.ToString(timeButton.Content).Equals(Convert.ToString(this.SelectedTime.Value.Hour)))
+                    {
+                        this.PART_Hour.SelectedIndex = i;
+                        this.PART_Hour.AnimateScrollIntoView(timeButton);
+                        break;
+                    }
+                }
+            }
+
+            if (this.PART_Minute != null)
+            {
+                for (int i = 0; i < this.PART_Minute.Items.Count; i++)
+                {
+                    TimeButton timeButton = this.PART_Minute.Items[i] as TimeButton;
+                    if (Convert.ToString(timeButton.Content).Equals(Convert.ToString(this.SelectedTime.Value.Minute)))
+                    {
+                        this.PART_Minute.SelectedIndex = i;
+                        this.PART_Minute.AnimateScrollIntoView(timeButton);
+                        break;
+                    }
+                }
+            }
+
+            if (this.PART_Second != null)
+            {
+                for (int i = 0; i < this.PART_Second.Items.Count; i++)
+                {
+                    TimeButton timeButton = this.PART_Second.Items[i] as TimeButton;
+                    if (Convert.ToString(timeButton.Content).Equals(Convert.ToString(this.SelectedTime.Value.Second)))
+                    {
+                        this.PART_Second.SelectedIndex = i;
+                        this.PART_Second.AnimateScrollIntoView(timeButton);
+                        break;
+                    }
+                }
+            }
+        }
+        #endregion
+
+        #region SelectedHour
+        public int? SelectedHour
+        {
+            get { return (int?)GetValue(SelectedHourProperty); }
+            set { SetValue(SelectedHourProperty, value); }
+        }
+
+        public static readonly DependencyProperty SelectedHourProperty =
+            DependencyProperty.Register("SelectedHour", typeof(int?), typeof(TimeSelector), new PropertyMetadata(null, SelectedHourChanged));
+
+        private static void SelectedHourChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            TimeSelector timeSelector = d as TimeSelector;
+            timeSelector.Hour = e.NewValue == null ? 0 : (int)e.NewValue;
+            timeSelector.SetSelectedTime();
+        }
+        #endregion
+
+        #region SelectedMinute
+
+        public int? SelectedMinute
+        {
+            get { return (int?)GetValue(SelectedMinuteProperty); }
+            set { SetValue(SelectedMinuteProperty, value); }
+        }
+
+        public static readonly DependencyProperty SelectedMinuteProperty =
+            DependencyProperty.Register("SelectedMinute", typeof(int?), typeof(TimeSelector), new PropertyMetadata(null, SelectedMinuteChanged));
+
+        private static void SelectedMinuteChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            TimeSelector timeSelector = d as TimeSelector;
+
+            timeSelector.Minute = e.NewValue == null ? 0 : (int)e.NewValue;
+            timeSelector.SetSelectedTime();
+        }
+
+        #endregion
+
+        #region SelectedSecond
+
+        public int? SelectedSecond
+        {
+            get { return (int?)GetValue(SelectedSecondProperty); }
+            set { SetValue(SelectedSecondProperty, value); }
+        }
+
+        public static readonly DependencyProperty SelectedSecondProperty =
+            DependencyProperty.Register("SelectedSecond", typeof(int?), typeof(TimeSelector), new PropertyMetadata(null, SelectedSecondChanged));
+
+        private static void SelectedSecondChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            TimeSelector timeSelector = d as TimeSelector;
+
+            timeSelector.Second = e.NewValue == null ? 0 : (int)e.NewValue;
+            timeSelector.SetSelectedTime();
+        }
+
+        #endregion
+
+        #region ItemHeight
+        public double ItemHeight
+        {
+            get { return (double)GetValue(ItemHeightProperty); }
+            set { SetValue(ItemHeightProperty, value); }
+        }
+
+        public static readonly DependencyProperty ItemHeightProperty =
+            DependencyProperty.Register("ItemHeight", typeof(double), typeof(TimeSelector), new PropertyMetadata(28.0));
+        #endregion
+
+        #endregion
+
+        #region Constructors
+        static TimeSelector()
+        {
+            DefaultStyleKeyProperty.OverrideMetadata(typeof(TimeSelector), new FrameworkPropertyMetadata(typeof(TimeSelector)));
+        }
+        #endregion
+
+        #region Override方法
+        public override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            this.PART_Hour = this.GetTemplateChild("PART_Hour") as ListBox;
+            this.PART_Minute = this.GetTemplateChild("PART_Minute") as ListBox;
+            this.PART_Second = this.GetTemplateChild("PART_Second") as ListBox;
+
+            if (this.PART_Hour != null)
+            {
+                this.CreateHourButtons();
+                this.PART_Hour.AddHandler(ListBoxItem.MouseLeftButtonDownEvent, new RoutedEventHandler(HourButton_Click), true);
+            }
+
+            if (this.PART_Minute != null)
+            {
+                this.CreateMinuteButtons();
+                this.PART_Minute.AddHandler(ListBoxItem.MouseLeftButtonDownEvent, new RoutedEventHandler(MinuteButton_Click), true);
+            }
+
+            if (this.PART_Second != null)
+            {
+                this.CreateSecondButtons();
+                this.PART_Second.AddHandler(ListBoxItem.MouseLeftButtonDownEvent, new RoutedEventHandler(SecondButton_Click), true);
+            }
+        }
+        #endregion
+
+        #region Private方法
+
+        private void MinuteButton_Click(object sender, RoutedEventArgs e)
+        {
+            TimeButton selectedItem = this.PART_Minute.SelectedItem as TimeButton;
+            if (selectedItem == null)
+            {
+                return;
+            }
+            this.SelectedMinute = Convert.ToInt32(selectedItem.DataContext);
+            this.PART_Minute.AnimateScrollIntoView(selectedItem);
+        }
+
+        private void SecondButton_Click(object sender, RoutedEventArgs e)
+        {
+            TimeButton selectedItem = this.PART_Second.SelectedItem as TimeButton;
+            if (selectedItem == null)
+            {
+                return;
+            }
+            this.SelectedSecond = Convert.ToInt32(selectedItem.DataContext);
+            this.PART_Second.AnimateScrollIntoView(selectedItem);
+        }
+
+        private void HourButton_Click(object sender, RoutedEventArgs e)
+        {
+            TimeButton selectedItem = this.PART_Hour.SelectedItem as TimeButton;
+            if (selectedItem == null)
+            {
+                return;
+            }
+            this.SelectedHour = Convert.ToInt32(selectedItem.DataContext);
+            this.PART_Hour.AnimateScrollIntoView(selectedItem);
+        }
+
+        private void CreateHourButtons()
+        {
+            this.CreateItems(24, this.HourButtons);
+            this.CreateExtraItem(this.HourButtons);
+            this.PART_Hour.ItemsSource = this.HourButtons;
+        }
+
+        private void CreateMinuteButtons()
+        {
+            this.CreateItems(60, this.MinuteButtons);
+            this.CreateExtraItem(this.MinuteButtons);
+            this.PART_Minute.ItemsSource = this.MinuteButtons;
+        }
+
+        private void CreateSecondButtons()
+        {
+            this.CreateItems(60, this.SecondButtons);
+            this.CreateExtraItem(this.SecondButtons);
+            this.PART_Second.ItemsSource = this.SecondButtons;
+        }
+
+        private void CreateItems(int itemsCount, ObservableCollection<TimeButton> list)
+        {
+            for (int i = 0; i < itemsCount; i++)
+            {
+                TimeButton timeButton = new TimeButton();
+                timeButton.SetValue(TimeButton.HeightProperty, this.ItemHeight);
+                timeButton.SetValue(TimeButton.DataContextProperty, i);
+                timeButton.SetValue(TimeButton.ContentProperty, (i < 10) ? "0" + i : i.ToString());
+                timeButton.SetValue(TimeButton.IsSelectedProperty, false);
+                list.Add(timeButton);
+            }
+        }
+
+        private void CreateExtraItem(ObservableCollection<TimeButton> list)
+        {
+            double height = this.ItemHeight;
+            if (this.Owner != null)
+            {
+                height = this.Owner.DropDownHeight;
+            }
+            else
+            {
+                height = double.IsNaN(this.Height) ? height : this.Height;
+            }
+
+            for (int i = 0; i < (height - this.ItemHeight) / this.ItemHeight; i++)
+            {
+                TimeButton timeButton = new TimeButton();
+                timeButton.SetValue(TimeButton.HeightProperty, this.ItemHeight);
+                timeButton.SetValue(TimeButton.IsEnabledProperty, false);
+                timeButton.SetValue(TimeButton.IsSelectedProperty, false);
+                list.Add(timeButton);
+            }
+        }
+
+        private DateTime GetDateTime(int hour, int minute, int second)
+        {
+            DateTime dt = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, hour, minute, second);
+            return dt;
+        }
+
+        /// <summary>
+        /// 设置选中的时间
+        /// </summary>
+        private void SetSelectedTime()
+        {
+            DateTime dt = this.GetDateTime(this.Hour, this.Minute, this.Second);
+            this.SelectedTime = dt;
+        }
+        #endregion
+    }
+    public class ScrollViewerBehavior
+    {
+        public static DependencyProperty VerticalOffsetProperty =
+            DependencyProperty.RegisterAttached("VerticalOffset",
+                                                typeof(double),
+                                                typeof(ScrollViewerBehavior),
+                                                new UIPropertyMetadata(0.0, OnVerticalOffsetChanged));
+
+        public static void SetVerticalOffset(FrameworkElement target, double value)
+        {
+            target.SetValue(VerticalOffsetProperty, value);
+        }
+        public static double GetVerticalOffset(FrameworkElement target)
+        {
+            return (double)target.GetValue(VerticalOffsetProperty);
+        }
+        private static void OnVerticalOffsetChanged(DependencyObject target, DependencyPropertyChangedEventArgs e)
+        {
+            ScrollViewer scrollViewer = target as ScrollViewer;
+            if (scrollViewer != null)
+            {
+                scrollViewer.ScrollToVerticalOffset((double)e.NewValue);
+            }
+        }
+    }
+}
@@ -98,8 +98,12 @@
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Time\Clock\ClockRadioButton.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Time\FlipClock\FlipClock.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Time\FlipClock\FlipNumber.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Controls\Time\ItemsControlExtensions.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Time\TimeBar\SpeTextBlock.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Time\TimeBar\TimeBar.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Controls\Time\TimeButton.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Controls\Time\TimePickerList.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Controls\Time\TimeSelector.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Transfer\Transfer.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Transfer\TransferGroup.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Transfer\TransferItem.cs" />
@@ -698,6 +702,14 @@
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
    </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Themes\Styles\TimePickerList.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Themes\Styles\TimeSelector.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
    <Page Include="$(MSBuildThisFileDirectory)Themes\Styles\ToggleButton.xaml">
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
@@ -63,6 +63,8 @@
        <ResourceDictionary Source="Badge.xaml"/>
        <ResourceDictionary Source="Dialog.xaml"/>
        <ResourceDictionary Source="SideMenu.xaml"/>
+        <ResourceDictionary Source="TimeSelector.xaml"/>
+        <ResourceDictionary Source="TimePickerList.xaml"/>
    </ResourceDictionary.MergedDictionaries>

 </ResourceDictionary>
@@ -0,0 +1,88 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="clr-namespace:HandyControl.Controls">
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="../Basic/Geometries.xaml"/>
+        <ResourceDictionary Source="TextBox.xaml"/>
+    </ResourceDictionary.MergedDictionaries>
+
+
+    <ControlTemplate x:Key="DropDownButtonTemplate" TargetType="{x:Type ToggleButton}">
+        <Grid VerticalAlignment="Stretch" Background="Transparent">
+            <Path x:Name="path" Width="14" VerticalAlignment="Center" Fill="#9EA7B4"
+                  Stretch="Uniform" Margin="5,0" Data="{StaticResource ClockGeometry}"/>
+        </Grid>
+        <ControlTemplate.Triggers>
+            <Trigger Property="IsMouseOver" Value="True">
+                <Setter Property="Cursor" Value="Hand" />
+                <Setter TargetName="path" Property="Fill" Value="{DynamicResource PrimaryBrush}" />
+            </Trigger>
+            <Trigger Property="IsChecked" Value="True">
+                <Setter TargetName="path" Property="Fill" Value="{DynamicResource PrimaryBrush}" />
+            </Trigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+
+    <Style TargetType="{x:Type controls:TimePickerList}">
+        <Setter Property="BorderBrush" Value="{DynamicResource SecondaryRegionBrush}" />
+        <Setter Property="Background" Value="{DynamicResource RegionBrush}" />
+        <Setter Property="controls:BorderElement.CornerRadius" Value="4"/>
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="SnapsToDevicePixels" Value="True" />
+        <Setter Property="UseLayoutRounding" Value="True" />
+        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Padding" Value="5,0" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type controls:TimePickerList}">
+                    <Border x:Name="Root"
+                            CornerRadius="{Binding Path=(controls:BorderElement.CornerRadius),RelativeSource={RelativeSource TemplatedParent}}"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
+                            UseLayoutRounding="{TemplateBinding UseLayoutRounding}">
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="auto" />
+                            </Grid.ColumnDefinitions>
+
+                            <Popup x:Name="PART_Popup"
+                                   MinWidth="{Binding Path=ActualWidth,
+                                                      ElementName=Root}"
+                                   Height="{TemplateBinding DropDownHeight}" AllowsTransparency="True"
+                                   IsOpen="{Binding Path=IsChecked,
+                                                    ElementName=PART_ToggleButton}"
+                                   Placement="Bottom"
+                                   PlacementTarget="{Binding ElementName=Root}"
+                                   StaysOpen="False" VerticalOffset="1">
+                                <controls:TimeSelector x:Name="PART_TimeSelector" />
+                            </Popup>
+                            <controls:WatermarkTextBox CaretBrush="{TemplateBinding Foreground}" x:Name="PART_TextBox" Focusable="{TemplateBinding Focusable}" Grid.Column="0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                     Padding="{TemplateBinding Padding}" FontFamily="{TemplateBinding FontFamily}"/>
+                            <ToggleButton x:Name="PART_ToggleButton" Grid.Column="1"
+                                          
+                                          Template="{StaticResource DropDownButtonTemplate}"/>
+                        </Grid>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter Property="BorderBrush" Value="#5CADFF" />
+                            <Setter TargetName="PART_TimeSelector" Property="BorderBrush" Value="{DynamicResource PrimaryBrush}" />
+                        </Trigger>
+                        <MultiTrigger>
+                            <MultiTrigger.Conditions>
+                                <Condition Property="IsKeyboardFocused" Value="True" />
+                                <Condition Property="IsMouseOver" Value="False" />
+                            </MultiTrigger.Conditions>
+                            <Setter Property="BorderBrush" Value="{DynamicResource PrimaryBrush}" />
+                        </MultiTrigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>
@@ -0,0 +1,89 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="clr-namespace:HandyControl.Controls">
+    <SolidColorBrush x:Key="Item.MouseOver.Background" Color="#F3F3F3" />
+
+    <Style x:Key="ItemStyle" TargetType="{x:Type controls:TimeButton}">
+        <Setter Property="Background" Value="{DynamicResource RegionBrush}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Padding" Value="0,5" />
+        <Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type controls:TimeButton}">
+                    <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"
+                            SnapsToDevicePixels="True" UseLayoutRounding="True">
+                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
+                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter Property="Background" Value="{DynamicResource SecondaryRegionBrush}" />
+                            <Setter Property="Cursor" Value="Hand" />
+                        </Trigger>
+                        <Trigger Property="IsSelected" Value="True">
+                            <Setter Property="Foreground" Value="White"/>
+                            <Setter Property="Background" Value="{DynamicResource PrimaryBrush}" />
+                            <Setter Property="FontWeight" Value="Bold" />
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="TimeItemsStyle" TargetType="{x:Type ListBox}">
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="ItemContainerStyle" Value="{StaticResource ItemStyle}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type ListBox}">
+                    <Border Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
+                            UseLayoutRounding="{TemplateBinding UseLayoutRounding}">
+                        <ScrollViewer x:Name="PART_ScrollViewer">
+                            <ItemsPresenter />
+                        </ScrollViewer>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style TargetType="{x:Type controls:TimeSelector}">
+        <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="Background" Value="#FFFFFF" />
+        <Setter Property="SnapsToDevicePixels" Value="True" />
+        <Setter Property="UseLayoutRounding" Value="True" />
+        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type controls:TimeSelector}">
+                    <Border Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
+                            UseLayoutRounding="{TemplateBinding UseLayoutRounding}">
+                        <UniformGrid Rows="1">
+                            <ListBox x:Name="PART_Hour" Style="{StaticResource TimeItemsStyle}" />
+                            <ListBox x:Name="PART_Minute" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1,0,0,0"
+                                     Style="{StaticResource TimeItemsStyle}" />
+                            <ListBox x:Name="PART_Second" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1,0,0,0"
+                                     Style="{StaticResource TimeItemsStyle}" />
+                        </UniformGrid>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>