From e1332321a5568cfc53ceac55a188cec981dcaca3 Mon Sep 17 00:00:00 2001
From: Nicolai Henriksen <nicolai.h80@gmail.com>
Date: Wed, 17 Aug 2022 02:49:49 +0200
Subject: [PATCH] Added BorderThickness attached DP for outlined date/time
 pickers (#2805)

* Added BorderThickness attached DP for outlined date/time pickers

* Added UI tests

* Fixed typos in code comment

* Increased delay in tests

Tests are running green locally, so I presume it has something to do with the delay being too short

* Fixed UI tests

Initial mouse position was on the pickers, so I added a dummy button to initially move the mouse position away from the pickers.

* Updated UI tests to test validation error scenario

Ideally I would like XAMLTest to allow me to set a ValidationError "on the fly" if possible. For now, tests are updated with a real ValidationRule and invalid values are set to provoke the validation error.
---
 MainDemo.Wpf/Pickers.xaml                     | 54 ++++++++++++++
 MaterialDesignThemes.UITests/TestBase.cs      |  4 +-
 .../WPF/DatePickers/DatePickerTests.cs        | 72 ++++++++++++++++++-
 .../WPF/TimePickers/TimePickerTests.cs        | 61 ++++++++++++++++
 .../XamlTestMixins.cs                         | 10 ++-
 ...imePickerActiveBorderThicknessConverter.cs | 24 +++++++
 MaterialDesignThemes.Wpf/DatePickerAssist.cs  | 33 +++++++++
 .../MaterialDesignTheme.DatePicker.xaml       | 36 ++++++++--
 .../MaterialDesignTheme.TimePicker.xaml       | 38 +++++++---
 MaterialDesignThemes.Wpf/TimePickerAssist.cs  | 33 +++++++++
 10 files changed, 346 insertions(+), 19 deletions(-)
 create mode 100644 MaterialDesignThemes.Wpf/Converters/OutlinedDateTimePickerActiveBorderThicknessConverter.cs
 create mode 100644 MaterialDesignThemes.Wpf/DatePickerAssist.cs
 create mode 100644 MaterialDesignThemes.Wpf/TimePickerAssist.cs

diff --git a/MainDemo.Wpf/Pickers.xaml b/MainDemo.Wpf/Pickers.xaml
index eb718f0f84..ada98ecbd5 100644
--- a/MainDemo.Wpf/Pickers.xaml
+++ b/MainDemo.Wpf/Pickers.xaml
@@ -198,6 +198,60 @@
                             materialDesign:HintAssist.HelperText="Helper text"
                             Style="{StaticResource MaterialDesignOutlinedDatePicker}"/>
                     </smtx:XamlDisplay>
+
+                    <smtx:XamlDisplay
+                        UniqueKey="pickers_unchanging_borderthickness"
+                        HorizontalAlignment="Left"
+                        Margin="0 16 0 0">
+                        <DatePicker
+                            Width="140"
+                            materialDesign:HintAssist.Hint="Pick Date"
+                            materialDesign:HintAssist.HelperText="Helper text"
+                            materialDesign:DatePickerAssist.OutlinedBorderInactiveThickness="2"
+                            materialDesign:HintAssist.FloatingOffset="0,-22"
+                            Style="{StaticResource MaterialDesignOutlinedDatePicker}"/>
+                    </smtx:XamlDisplay>
+
+                    <smtx:XamlDisplay
+                        UniqueKey="pickers_14_custom_borderthickness"
+                        HorizontalAlignment="Left"
+                        Margin="0 16 0 0">
+                        <DatePicker
+                            Width="140"
+                            materialDesign:HintAssist.Hint="Pick Date"
+                            materialDesign:HintAssist.HelperText="Helper text"
+                            materialDesign:HintAssist.FloatingOffset="0,-23"
+                            materialDesign:DatePickerAssist.OutlinedBorderInactiveThickness="3"
+                            materialDesign:DatePickerAssist.OutlinedBorderActiveThickness="3"
+                            Style="{StaticResource MaterialDesignOutlinedDatePicker}"/>
+                    </smtx:XamlDisplay>
+
+                    <smtx:XamlDisplay
+                        UniqueKey="pickers_time"
+                        HorizontalAlignment="Left"
+                        Margin="0 16 0 0">
+                        <materialDesign:TimePicker
+                            Is24Hours="True"
+                            Width="140"
+                            materialDesign:HintAssist.Hint="Pick Time"
+                            materialDesign:HintAssist.HelperText="Helper text"
+                            Style="{StaticResource MaterialDesignOutlinedTimePicker}"/>
+                    </smtx:XamlDisplay>
+
+                    <smtx:XamlDisplay
+                        UniqueKey="pickers_time_custom_borderthickness"
+                        HorizontalAlignment="Left"
+                        Margin="0 16 0 0">
+                        <materialDesign:TimePicker
+                            Is24Hours="True"
+                            Width="140"
+                            materialDesign:HintAssist.Hint="Pick Time"
+                            materialDesign:HintAssist.HelperText="Helper text"
+                            materialDesign:HintAssist.FloatingOffset="0,-23"
+                            materialDesign:TimePickerAssist.OutlinedBorderInactiveThickness="3"
+                            materialDesign:TimePickerAssist.OutlinedBorderActiveThickness="3"
+                            Style="{StaticResource MaterialDesignOutlinedTimePicker}"/>
+                    </smtx:XamlDisplay>
                 </StackPanel>
 
                 <smtx:XamlDisplay
diff --git a/MaterialDesignThemes.UITests/TestBase.cs b/MaterialDesignThemes.UITests/TestBase.cs
index 0ade0ac46f..34bd858a4d 100644
--- a/MaterialDesignThemes.UITests/TestBase.cs
+++ b/MaterialDesignThemes.UITests/TestBase.cs
@@ -24,10 +24,10 @@ protected async Task<Color> GetThemeColor(string name)
         return resource.GetAs<Color?>() ?? throw new Exception($"Failed to convert resource '{name}' to color");
     }
 
-    protected async Task<IVisualElement<T>> LoadXaml<T>(string xaml)
+    protected async Task<IVisualElement<T>> LoadXaml<T>(string xaml, params (string namespacePrefix, Type type)[] additionalNamespaceDeclarations)
     {
         await App.InitializeWithMaterialDesign();
-        return await App.CreateWindowWith<T>(xaml);
+        return await App.CreateWindowWith<T>(xaml, additionalNamespaceDeclarations);
     }
 
     protected async Task<IVisualElement> LoadUserControl<TControl>()
diff --git a/MaterialDesignThemes.UITests/WPF/DatePickers/DatePickerTests.cs b/MaterialDesignThemes.UITests/WPF/DatePickers/DatePickerTests.cs
index 4a2331be03..1a9bf08708 100644
--- a/MaterialDesignThemes.UITests/WPF/DatePickers/DatePickerTests.cs
+++ b/MaterialDesignThemes.UITests/WPF/DatePickers/DatePickerTests.cs
@@ -1,4 +1,4 @@
-using System;
+using System;
 using System.ComponentModel;
 using System.Globalization;
 using System.Threading.Tasks;
@@ -64,5 +64,75 @@ await Wait.For(async () =>
             
             recorder.Success();
         }
+
+        [Fact]
+        [Description("Issue 2737")]
+        public async Task OutlinedDatePicker_RespectsActiveAndInactiveBorderThickness_WhenAttachedPropertiesAreSet()
+        {
+            await using var recorder = new TestRecorder(App);
+
+            // Arrange
+            var expectedInactiveBorderThickness = new Thickness(4, 3, 2, 1);
+            var expectedActiveBorderThickness = new Thickness(1, 2, 3, 4);
+            var stackPanel = await LoadXaml<StackPanel>($@"
+<StackPanel>
+    <DatePicker Style=""{{StaticResource MaterialDesignOutlinedDatePicker}}""
+      materialDesign:DatePickerAssist.OutlinedBorderInactiveThickness=""{expectedInactiveBorderThickness}""
+      materialDesign:DatePickerAssist.OutlinedBorderActiveThickness=""{expectedActiveBorderThickness}"">
+      <DatePicker.SelectedDate>
+        <Binding RelativeSource=""{{RelativeSource Self}}"" Path=""Tag"" UpdateSourceTrigger=""PropertyChanged"">
+          <Binding.ValidationRules>
+            <local:FutureDateValidationRule ValidatesOnTargetUpdated=""True""/>
+          </Binding.ValidationRules>
+        </Binding>
+      </DatePicker.SelectedDate>
+    </DatePicker>
+    <Button x:Name=""Button"" Content=""Some Button"" Margin=""0,20,0,0"" />
+</StackPanel>", ("local", typeof(FutureDateValidationRule)));
+            var datePicker = await stackPanel.GetElement<DatePicker>("/DatePicker");
+            await datePicker.SetProperty(DatePicker.SelectedDateProperty, DateTime.Now.AddDays(1));
+            var datePickerTextBox = await datePicker.GetElement<TextBox>("PART_TextBox");
+            var button = await stackPanel.GetElement<Button>("Button");
+
+            // Act
+            await button.MoveCursorTo();
+            await Task.Delay(50);   // Wait for the visual change
+            var inactiveBorderThickness = await datePickerTextBox.GetProperty<Thickness>(Control.BorderThicknessProperty);
+            await datePickerTextBox.MoveCursorTo();
+            await Task.Delay(50);   // Wait for the visual change
+            var hoverBorderThickness = await datePickerTextBox.GetProperty<Thickness>(Control.BorderThicknessProperty);
+            await datePickerTextBox.LeftClick();
+            await Task.Delay(50);   // Wait for the visual change
+            var focusedBorderThickness = await datePickerTextBox.GetProperty<Thickness>(Control.BorderThicknessProperty);
+
+            // TODO: It would be cool if a validation error could be set via XAMLTest without the need for the Binding and ValidationRules elements in the XAML above.
+            await datePicker.SetProperty(DatePicker.SelectedDateProperty, DateTime.Now);
+            await Task.Delay(50);   // Wait for the visual change
+            var withErrorBorderThickness = await datePickerTextBox.GetProperty<Thickness>(Control.BorderThicknessProperty);
+
+            // Assert
+            Assert.Equal(expectedInactiveBorderThickness, inactiveBorderThickness);
+            Assert.Equal(expectedActiveBorderThickness, hoverBorderThickness);
+            Assert.Equal(expectedActiveBorderThickness, focusedBorderThickness);
+            Assert.Equal(expectedActiveBorderThickness, withErrorBorderThickness);
+
+            recorder.Success();
+        }
+    }
+
+    public class FutureDateValidationRule : ValidationRule
+    {
+        public override ValidationResult Validate(object value, CultureInfo cultureInfo)
+        {
+            DateTime time;
+            if (!DateTime.TryParse((value ?? "").ToString(),
+                    CultureInfo.CurrentCulture,
+                    DateTimeStyles.AssumeLocal | DateTimeStyles.AllowWhiteSpaces,
+                    out time)) return new ValidationResult(false, "Invalid date");
+
+            return time.Date <= DateTime.Now.Date
+                ? new ValidationResult(false, "Future date required")
+                : ValidationResult.ValidResult;
+        }
     }
 }
diff --git a/MaterialDesignThemes.UITests/WPF/TimePickers/TimePickerTests.cs b/MaterialDesignThemes.UITests/WPF/TimePickers/TimePickerTests.cs
index 35b5bd09b9..e71bb7681e 100644
--- a/MaterialDesignThemes.UITests/WPF/TimePickers/TimePickerTests.cs
+++ b/MaterialDesignThemes.UITests/WPF/TimePickers/TimePickerTests.cs
@@ -1,5 +1,6 @@
 using System;
 using System.ComponentModel;
+using System.Globalization;
 using System.Threading.Tasks;
 namespace MaterialDesignThemes.UITests.WPF.TimePickers;
 
@@ -337,4 +338,64 @@ public async Task OnTimePickerHelperTextFontSize_ChangesHelperTextFontSize()
         Assert.Equal(20, fontSize);
         recorder.Success();
     }
+
+    [Fact]
+    [Description("Issue 2737")]
+    public async Task OutlinedTimePicker_RespectsActiveAndInactiveBorderThickness_WhenAttachedPropertiesAreSet()
+    {
+        await using var recorder = new TestRecorder(App);
+
+        // Arrange
+        var expectedInactiveBorderThickness = new Thickness(4, 3, 2, 1);
+        var expectedActiveBorderThickness = new Thickness(1, 2, 3, 4);
+        var stackPanel = await LoadXaml<StackPanel>($@"
+<StackPanel>
+    <materialDesign:TimePicker Style=""{{StaticResource MaterialDesignOutlinedTimePicker}}""
+      materialDesign:TimePickerAssist.OutlinedBorderInactiveThickness=""{expectedInactiveBorderThickness}""
+      materialDesign:TimePickerAssist.OutlinedBorderActiveThickness=""{expectedActiveBorderThickness}"">
+      <materialDesign:TimePicker.Text>
+        <Binding RelativeSource=""{{RelativeSource Self}}"" Path=""Tag"" UpdateSourceTrigger=""PropertyChanged"">
+          <Binding.ValidationRules>
+            <local:OnlyTenOClockValidationRule ValidatesOnTargetUpdated=""True""/>
+          </Binding.ValidationRules>
+        </Binding>
+      </materialDesign:TimePicker.Text>
+    </materialDesign:TimePicker>
+    <Button x:Name=""Button"" Content=""Some Button"" Margin=""0,20,0,0"" />
+</StackPanel>", ("local", typeof(OnlyTenOClockValidationRule)));
+        var timePicker = await stackPanel.GetElement<TimePicker>("/TimePicker");
+        await timePicker.SetProperty(TimePicker.TextProperty, "10:00");
+        var timePickerTextBox = await timePicker.GetElement<TimePickerTextBox>("/TimePickerTextBox");
+        var button = await stackPanel.GetElement<Button>("Button");
+
+        // Act
+        await button.MoveCursorTo();
+        await Task.Delay(50);   // Wait for the visual change
+        var inactiveBorderThickness = await timePickerTextBox.GetProperty<Thickness>(Control.BorderThicknessProperty);
+        await timePickerTextBox.MoveCursorTo();
+        await Task.Delay(50);   // Wait for the visual change
+        var hoverBorderThickness = await timePickerTextBox.GetProperty<Thickness>(Control.BorderThicknessProperty);
+        await timePickerTextBox.LeftClick();
+        await Task.Delay(50);   // Wait for the visual change
+        var focusedBorderThickness = await timePickerTextBox.GetProperty<Thickness>(Control.BorderThicknessProperty);
+
+        // TODO: It would be cool if a validation error could be set via XAMLTest without the need for the Binding and ValidationRules elements in the XAML above.
+        await timePicker.SetProperty(TimePicker.TextProperty, "11:00");
+        await Task.Delay(50);   // Wait for the visual change
+        var withErrorBorderThickness = await timePickerTextBox.GetProperty<Thickness>(Control.BorderThicknessProperty);
+
+        // Assert
+        Assert.Equal(expectedInactiveBorderThickness, inactiveBorderThickness);
+        Assert.Equal(expectedActiveBorderThickness, hoverBorderThickness);
+        Assert.Equal(expectedActiveBorderThickness, focusedBorderThickness);
+        Assert.Equal(expectedActiveBorderThickness, withErrorBorderThickness);
+
+        recorder.Success();
+    }
+}
+
+public class OnlyTenOClockValidationRule : ValidationRule
+{
+    public override ValidationResult Validate(object value, CultureInfo cultureInfo)
+        => value is not "10:00" ? new ValidationResult(false, "Only 10 o'clock allowed") : ValidationResult.ValidResult;
 }
diff --git a/MaterialDesignThemes.UITests/XamlTestMixins.cs b/MaterialDesignThemes.UITests/XamlTestMixins.cs
index f5203542bd..c0b9752607 100644
--- a/MaterialDesignThemes.UITests/XamlTestMixins.cs
+++ b/MaterialDesignThemes.UITests/XamlTestMixins.cs
@@ -3,6 +3,7 @@
 using System.Threading.Tasks;
 using System.Windows.Controls;
 using MaterialDesignColors;
+using MaterialDesignThemes.UITests.WPF.DatePickers;
 using MaterialDesignThemes.Wpf;
 using XamlTest;
 
@@ -40,14 +41,21 @@ await app.Initialize(applicationResourceXaml,
                 Assembly.GetExecutingAssembly().Location);
         }
 
-        public static async Task<IVisualElement<T>> CreateWindowWith<T>(this IApp app, string xaml)
+        public static async Task<IVisualElement<T>> CreateWindowWith<T>(this IApp app, string xaml, params (string namespacePrefix, Type type)[] additionalNamespaceDeclarations)
         {
+            var extraNamespaceDeclarations = new StringBuilder("");
+            foreach ((string namespacePrefix, Type type) in additionalNamespaceDeclarations)
+            {
+                extraNamespaceDeclarations.AppendLine($@"xmlns:{namespacePrefix}=""clr-namespace:{type.Namespace};assembly={type.Assembly.GetName().Name}""");
+            }
+
             string windowXaml = @$"<Window
         xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
         xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""
         xmlns:d=""http://schemas.microsoft.com/expression/blend/2008""
         xmlns:mc=""http://schemas.openxmlformats.org/markup-compatibility/2006""
         xmlns:materialDesign=""http://materialdesigninxaml.net/winfx/xaml/themes""
+        {extraNamespaceDeclarations}
         mc:Ignorable=""d""
         Height=""800"" Width=""1100""
         TextElement.Foreground=""{{DynamicResource MaterialDesignBody}}""
diff --git a/MaterialDesignThemes.Wpf/Converters/OutlinedDateTimePickerActiveBorderThicknessConverter.cs b/MaterialDesignThemes.Wpf/Converters/OutlinedDateTimePickerActiveBorderThicknessConverter.cs
new file mode 100644
index 0000000000..90fa1d5b24
--- /dev/null
+++ b/MaterialDesignThemes.Wpf/Converters/OutlinedDateTimePickerActiveBorderThicknessConverter.cs
@@ -0,0 +1,24 @@
+using System.Globalization;
+using System.Windows.Data;
+
+namespace MaterialDesignThemes.Wpf.Converters;
+
+public class OutlinedDateTimePickerActiveBorderThicknessConverter : IMultiValueConverter
+{
+    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
+    {
+        if (values.Length == 2
+            && values[0] is Thickness baseThickness
+            && values[1] is Thickness thicknessToSubtract)
+        {
+            var thickness = new Thickness(baseThickness.Left - thicknessToSubtract.Left,
+                baseThickness.Top - thicknessToSubtract.Top,
+                baseThickness.Right - thicknessToSubtract.Right,
+                baseThickness.Bottom - thicknessToSubtract.Bottom);
+            return thickness;
+        }
+        return default(Thickness);
+    }
+
+    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) => throw new NotImplementedException();
+}
\ No newline at end of file
diff --git a/MaterialDesignThemes.Wpf/DatePickerAssist.cs b/MaterialDesignThemes.Wpf/DatePickerAssist.cs
new file mode 100644
index 0000000000..5729032aae
--- /dev/null
+++ b/MaterialDesignThemes.Wpf/DatePickerAssist.cs
@@ -0,0 +1,33 @@
+namespace MaterialDesignThemes.Wpf;
+
+public static class DatePickerAssist
+{
+    private static Thickness DefaultOutlinedBorderInactiveThickness { get; } = new(1);
+    private static Thickness DefaultOutlinedBorderActiveThickness { get; } = new(2);
+
+    public static readonly DependencyProperty OutlinedBorderInactiveThicknessProperty = DependencyProperty.RegisterAttached(
+        "OutlinedBorderInactiveThickness", typeof(Thickness), typeof(DatePickerAssist), new FrameworkPropertyMetadata(DefaultOutlinedBorderInactiveThickness, FrameworkPropertyMetadataOptions.Inherits));
+
+    public static void SetOutlinedBorderInactiveThickness(DependencyObject element, Thickness value)
+    {
+        element.SetValue(OutlinedBorderInactiveThicknessProperty, value);
+    }
+
+    public static Thickness GetOutlinedBorderInactiveThickness(DependencyObject element)
+    {
+        return (Thickness) element.GetValue(OutlinedBorderInactiveThicknessProperty);
+    }
+
+    public static readonly DependencyProperty OutlinedBorderActiveThicknessProperty = DependencyProperty.RegisterAttached(
+        "OutlinedBorderActiveThickness", typeof(Thickness), typeof(DatePickerAssist), new FrameworkPropertyMetadata(DefaultOutlinedBorderActiveThickness, FrameworkPropertyMetadataOptions.Inherits));
+
+    public static void SetOutlinedBorderActiveThickness(DependencyObject element, Thickness value)
+    {
+        element.SetValue(OutlinedBorderActiveThicknessProperty, value);
+    }
+
+    public static Thickness GetOutlinedBorderActiveThickness(DependencyObject element)
+    {
+        return (Thickness) element.GetValue(OutlinedBorderActiveThicknessProperty);
+    }
+}
\ No newline at end of file
diff --git a/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.DatePicker.xaml b/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.DatePicker.xaml
index e258e470a5..0da4fd8e8a 100644
--- a/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.DatePicker.xaml
+++ b/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.DatePicker.xaml
@@ -17,6 +17,7 @@
     <converters:MathConverter x:Key="MathMultiplyConverter" Operation="Multiply" />
     <converters:FloatingHintOffsetCalculationConverter x:Key="FloatingHintOffsetCalculationConverter" />
     <converters:PickerInnerPaddingConverter x:Key="PickerInnerPaddingConverter" />
+    <converters:OutlinedDateTimePickerActiveBorderThicknessConverter x:Key="OutlinedDateTimePickerActiveBorderThicknessConverter" />
 
     <Style x:Key="MaterialDesignDatePickerTextBox" TargetType="{x:Type DatePickerTextBox}">
         <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}" />
@@ -264,7 +265,7 @@
                         </Trigger>
                         <Trigger Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True">
                             <Setter Property="VerticalContentAlignment" Value="Top" />
-                            <Setter Property="BorderThickness" Value="1" />
+                            <Setter Property="BorderThickness" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:DatePickerAssist.OutlinedBorderInactiveThickness)}" />
                             <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignTextAreaBorder}" />
                             <Setter Property="Padding" Value="16 16 12 16" />
                             <Setter TargetName="Underline" Property="Visibility" Value="Collapsed" />
@@ -359,8 +360,15 @@
                                 <Condition Property="IsKeyboardFocused" Value="True" />
                                 <Condition Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True" />
                             </MultiTrigger.Conditions>
-                            <Setter TargetName="border" Property="Margin" Value="-1" />
-                            <Setter Property="BorderThickness" Value="2" />
+                            <Setter TargetName="border" Property="Margin">
+                                <Setter.Value>
+                                    <MultiBinding Converter="{StaticResource OutlinedDateTimePickerActiveBorderThicknessConverter}">
+                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:DatePickerAssist.OutlinedBorderInactiveThickness)" />
+                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:DatePickerAssist.OutlinedBorderActiveThickness)" />
+                                    </MultiBinding>
+                                </Setter.Value>
+                            </Setter>
+                            <Setter Property="BorderThickness" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:DatePickerAssist.OutlinedBorderActiveThickness)}" />
                             <Setter Property="BorderBrush" Value="{Binding Path=(wpf:TextFieldAssist.UnderlineBrush), RelativeSource={RelativeSource Self}}" />
                         </MultiTrigger>
                         <MultiTrigger>
@@ -400,8 +408,15 @@
                                 <Condition Property="IsMouseOver" Value="True" />
                                 <Condition Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True" />
                             </MultiTrigger.Conditions>
-                            <Setter TargetName="border" Property="Margin" Value="-1" />
-                            <Setter Property="BorderThickness" Value="2" />
+                            <Setter TargetName="border" Property="Margin">
+                                <Setter.Value>
+                                    <MultiBinding Converter="{StaticResource OutlinedDateTimePickerActiveBorderThicknessConverter}">
+                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:DatePickerAssist.OutlinedBorderInactiveThickness)" />
+                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:DatePickerAssist.OutlinedBorderActiveThickness)" />
+                                    </MultiBinding>
+                                </Setter.Value>
+                            </Setter>
+                            <Setter Property="BorderThickness" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:DatePickerAssist.OutlinedBorderActiveThickness)}" />
                         </MultiTrigger>
 
                         <!-- Validation.HasError -->
@@ -414,8 +429,15 @@
                                 <Condition Property="Validation.HasError" Value="True" />
                                 <Condition Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True" />
                             </MultiTrigger.Conditions>
-                            <Setter TargetName="border" Property="Margin" Value="-1" />
-                            <Setter Property="BorderThickness" Value="2" />
+                            <Setter TargetName="border" Property="Margin">
+                                <Setter.Value>
+                                    <MultiBinding Converter="{StaticResource OutlinedDateTimePickerActiveBorderThicknessConverter}">
+                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:DatePickerAssist.OutlinedBorderInactiveThickness)" />
+                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:DatePickerAssist.OutlinedBorderActiveThickness)" />
+                                    </MultiBinding>
+                                </Setter.Value>
+                            </Setter>
+                            <Setter Property="BorderThickness" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:DatePickerAssist.OutlinedBorderActiveThickness)}" />
                             <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignValidationErrorBrush}" />
                         </MultiTrigger>
                     </ControlTemplate.Triggers>
diff --git a/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TimePicker.xaml b/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TimePicker.xaml
index f77f7264d7..91e6e272e1 100644
--- a/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TimePicker.xaml
+++ b/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TimePicker.xaml
@@ -1,4 +1,4 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf"
                     xmlns:converters="clr-namespace:MaterialDesignThemes.Wpf.Converters">
@@ -14,6 +14,7 @@
     <converters:MathConverter x:Key="MathMultiplyConverter" Operation="Multiply" />
     <converters:FloatingHintOffsetCalculationConverter x:Key="FloatingHintOffsetCalculationConverter" />
     <converters:PickerInnerPaddingConverter x:Key="PickerInnerPaddingConverter" />
+    <converters:OutlinedDateTimePickerActiveBorderThicknessConverter x:Key="OutlinedDateTimePickerActiveBorderThicknessConverter" />
 
     <Style x:Key="MaterialDesignTimePickerTextBox" TargetType="{x:Type wpf:TimePickerTextBox}">
         <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}" />
@@ -261,7 +262,7 @@
                         </Trigger>
                         <Trigger Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True">
                             <Setter Property="VerticalContentAlignment" Value="Top" />
-                            <Setter Property="BorderThickness" Value="1" />
+                            <Setter Property="BorderThickness" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:TimePickerAssist.OutlinedBorderInactiveThickness)}" />
                             <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignTextAreaBorder}" />
                             <Setter Property="Padding" Value="16 16 12 16" />
                             <Setter TargetName="Underline" Property="Visibility" Value="Collapsed" />
@@ -356,8 +357,15 @@
                                 <Condition Property="IsKeyboardFocused" Value="True" />
                                 <Condition Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True" />
                             </MultiTrigger.Conditions>
-                            <Setter TargetName="border" Property="Margin" Value="-1" />
-                            <Setter Property="BorderThickness" Value="2" />
+                            <Setter TargetName="border" Property="Margin">
+                                <Setter.Value>
+                                    <MultiBinding Converter="{StaticResource OutlinedDateTimePickerActiveBorderThicknessConverter}">
+                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:TimePickerAssist.OutlinedBorderInactiveThickness)" />
+                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:TimePickerAssist.OutlinedBorderActiveThickness)" />
+                                    </MultiBinding>
+                                </Setter.Value>
+                            </Setter>
+                            <Setter Property="BorderThickness" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:TimePickerAssist.OutlinedBorderActiveThickness)}" />
                             <Setter Property="BorderBrush" Value="{Binding Path=(wpf:TextFieldAssist.UnderlineBrush), RelativeSource={RelativeSource Self}}" />
                         </MultiTrigger>
                         <MultiTrigger>
@@ -397,8 +405,15 @@
                                 <Condition Property="IsMouseOver" Value="True" />
                                 <Condition Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True" />
                             </MultiTrigger.Conditions>
-                            <Setter TargetName="border" Property="Margin" Value="-1" />
-                            <Setter Property="BorderThickness" Value="2" />
+                            <Setter TargetName="border" Property="Margin">
+                                <Setter.Value>
+                                    <MultiBinding Converter="{StaticResource OutlinedDateTimePickerActiveBorderThicknessConverter}">
+                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:TimePickerAssist.OutlinedBorderInactiveThickness)" />
+                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:TimePickerAssist.OutlinedBorderActiveThickness)" />
+                                    </MultiBinding>
+                                </Setter.Value>
+                            </Setter>
+                            <Setter Property="BorderThickness" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:TimePickerAssist.OutlinedBorderActiveThickness)}" />
                         </MultiTrigger>
 
                         <!-- Validation.HasError -->
@@ -411,8 +426,15 @@
                                 <Condition Property="Validation.HasError" Value="True" />
                                 <Condition Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True" />
                             </MultiTrigger.Conditions>
-                            <Setter TargetName="border" Property="Margin" Value="-1" />
-                            <Setter Property="BorderThickness" Value="2" />
+                            <Setter TargetName="border" Property="Margin">
+                                <Setter.Value>
+                                    <MultiBinding Converter="{StaticResource OutlinedDateTimePickerActiveBorderThicknessConverter}">
+                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:TimePickerAssist.OutlinedBorderInactiveThickness)" />
+                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:TimePickerAssist.OutlinedBorderActiveThickness)" />
+                                    </MultiBinding>
+                                </Setter.Value>
+                            </Setter>
+                            <Setter Property="BorderThickness" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:TimePickerAssist.OutlinedBorderActiveThickness)}" />
                             <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignValidationErrorBrush}" />
                         </MultiTrigger>
                     </ControlTemplate.Triggers>
diff --git a/MaterialDesignThemes.Wpf/TimePickerAssist.cs b/MaterialDesignThemes.Wpf/TimePickerAssist.cs
new file mode 100644
index 0000000000..470a6f4573
--- /dev/null
+++ b/MaterialDesignThemes.Wpf/TimePickerAssist.cs
@@ -0,0 +1,33 @@
+namespace MaterialDesignThemes.Wpf;
+
+public static class TimePickerAssist
+{
+    private static Thickness DefaultOutlinedBorderInactiveThickness { get; } = new(1);
+    private static Thickness DefaultOutlinedBorderActiveThickness { get; } = new(2);
+
+    public static readonly DependencyProperty OutlinedBorderInactiveThicknessProperty = DependencyProperty.RegisterAttached(
+        "OutlinedBorderInactiveThickness", typeof(Thickness), typeof(TimePickerAssist), new FrameworkPropertyMetadata(DefaultOutlinedBorderInactiveThickness, FrameworkPropertyMetadataOptions.Inherits));
+
+    public static void SetOutlinedBorderInactiveThickness(DependencyObject element, Thickness value)
+    {
+        element.SetValue(OutlinedBorderInactiveThicknessProperty, value);
+    }
+
+    public static Thickness GetOutlinedBorderInactiveThickness(DependencyObject element)
+    {
+        return (Thickness)element.GetValue(OutlinedBorderInactiveThicknessProperty);
+    }
+
+    public static readonly DependencyProperty OutlinedBorderActiveThicknessProperty = DependencyProperty.RegisterAttached(
+        "OutlinedBorderActiveThickness", typeof(Thickness), typeof(TimePickerAssist), new FrameworkPropertyMetadata(DefaultOutlinedBorderActiveThickness, FrameworkPropertyMetadataOptions.Inherits));
+
+    public static void SetOutlinedBorderActiveThickness(DependencyObject element, Thickness value)
+    {
+        element.SetValue(OutlinedBorderActiveThicknessProperty, value);
+    }
+
+    public static Thickness GetOutlinedBorderActiveThickness(DependencyObject element)
+    {
+        return (Thickness)element.GetValue(OutlinedBorderActiveThicknessProperty);
+    }
+}
\ No newline at end of file