Implemented FloatingWatermark for TimePicker and DateTimePicker

MahApps · May 30, 2016 · 0adf24e · 0adf24e
1 parent cb3700e
commit 0adf24e
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 4 deletions.
diff --git a/MahApps.Metro/Controls/Helper/TextBoxHelper.cs b/MahApps.Metro/Controls/Helper/TextBoxHelper.cs
@@ -281,12 +281,27 @@ private static void OnIsMonitoringChanged(DependencyObject d, DependencyProperty
 
                     numericUpDown.ValueChanged += OnNumericUpDownValueChaged;
                     numericUpDown.GotFocus += NumericUpDownGotFocus;
-            }
+                }
                 else
                 {
                     numericUpDown.ValueChanged -= OnNumericUpDownValueChaged;
                     numericUpDown.GotFocus -= NumericUpDownGotFocus;
-        }
+                }
+            }
+            else if (d is TimePickerBase)
+            {
+                var timePicker = d as TimePickerBase;
+                if ((bool)e.NewValue)
+                {
+                    timePicker.SelectedTimeChanged += OnTimePickerBaseSelectedTimeChanged;
+                    //timePicker.GotFocus += TimePickerBaseGotFocus;
+                }
+                else
+                {
+
+                    timePicker.SelectedTimeChanged -= OnTimePickerBaseSelectedTimeChanged;
+                    //timePicker.GotFocus -= TimePickerBaseGotFocus;
+                }
             }
         }
 
@@ -315,6 +330,11 @@ private static void PasswordChanged(object sender, RoutedEventArgs e)
             SetTextLength(sender as PasswordBox, passwordBox => passwordBox.Password.Length);
         }
 
+        private static void OnTimePickerBaseSelectedTimeChanged(object sender, RoutedEventArgs e)
+        {
+            SetTextLength(sender as TimePickerBase, timePickerBase => timePickerBase.SelectedTime.HasValue ? 1 : 0);
+        }
+
         private static void TextBoxGotFocus(object sender, RoutedEventArgs e)
         {
             ControlGotFocus(sender as TextBox, textBox => textBox.SelectAll());

diff --git a/MahApps.Metro/Themes/DateTimePicker.xaml b/MahApps.Metro/Themes/DateTimePicker.xaml
@@ -4,6 +4,10 @@
                     xmlns:converters="clr-namespace:MahApps.Metro.Converters"
                     xmlns:system="clr-namespace:System;assembly=mscorlib">
 
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Shared.xaml" />
+    </ResourceDictionary.MergedDictionaries>
+
     <converters:ClockDegreeConverter x:Key="ClockDegreeConverter" 
                                      TotalParts="60" />
     <converters:ClockDegreeConverter x:Key="HourDegreeConverter" 
@@ -132,13 +136,32 @@
                                     <ColumnDefinition />
                                     <ColumnDefinition Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}, Path=ActualHeight, Mode=OneWay}" />
                                 </Grid.ColumnDefinitions>
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition x:Name="ButtonRow" Height="*" />
+                                </Grid.RowDefinitions>
                                 <DatePickerTextBox VerticalAlignment="Center"
                                                    x:Name="DatePickerTextBox"
+                                                   Grid.Row="1"
                                                    controls:TextBoxHelper.Watermark="{TemplateBinding controls:TextBoxHelper.Watermark}"
                                                    IsReadOnly="{Binding Path=IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}"
                                                    Text="{Binding Path=SelectedTime, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TimeSpanToStringConverter}}" />
+                                <ContentControl x:Name="PART_FloatingMessageContainer"
+                                            Grid.Column="0"
+                                            Grid.Row="0"
+                                            Grid.ColumnSpan="2"
+                                            Style="{DynamicResource FloatingMessageContainerStyle}">
+                                    <TextBlock x:Name="PART_FloatingMessage"
+                                           HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                           VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                           Style="{DynamicResource MetroAutoCollapsingTextBlock}"
+                                           Foreground="{TemplateBinding Foreground}"
+                                           Text="{TemplateBinding controls:TextBoxHelper.Watermark}" />
+                                </ContentControl>
                                 <Button x:Name="PART_Button"
                                         Grid.Column="1"
+                                        Grid.Row="0"
+                                        Grid.RowSpan="2"
                                         Style="{DynamicResource ChromelessButtonStyle}"
                                         IsTabStop="False">
                                     <Path Fill="{Binding ElementName=PART_Button, Path=Foreground, Mode=OneWay}"
@@ -167,6 +190,8 @@
                                 <Border x:Name="DisabledVisualElement"
                                         Grid.Column="0"
                                         Grid.ColumnSpan="2"
+                                        Grid.Row="0"
+                                        Grid.RowSpan="2"
                                         Background="{DynamicResource ControlsDisabledBrush}"
                                         BorderBrush="{DynamicResource ControlsDisabledBrush}"
                                         BorderThickness="{TemplateBinding BorderThickness}"
@@ -176,6 +201,7 @@
                                 <Popup x:Name="PART_Popup"
                                        Grid.Column="0"
                                        Grid.ColumnSpan="2"
+                                       Grid.Row="1"
                                        Placement="Bottom"
                                        PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                                        StaysOpen="False">
@@ -333,6 +359,20 @@
                             <Setter TargetName="StackPanel" Property="Orientation" Value="{Binding Path=Orientation, RelativeSource={RelativeSource TemplatedParent}}" />
                             <Setter TargetName="DatePickerTextBox" Property="Text" Value="{Binding Path=SelectedDate, RelativeSource={RelativeSource TemplatedParent}}" />
                         </Trigger>
+
+                        <MultiDataTrigger>
+                            <MultiDataTrigger.Conditions>
+                                <Condition Binding="{Binding Path=(controls:TextBoxHelper.UseFloatingWatermark), RelativeSource={RelativeSource Self}}" Value="True" />
+                                <Condition Binding="{Binding Path=(controls:TextBoxHelper.HasText), RelativeSource={RelativeSource Self}}" Value="True" />
+                            </MultiDataTrigger.Conditions>
+                            <MultiDataTrigger.EnterActions>
+                                <BeginStoryboard Storyboard="{StaticResource ShowFloatingMessageStoryboard}" />
+                            </MultiDataTrigger.EnterActions>
+                            <MultiDataTrigger.ExitActions>
+                                <BeginStoryboard Storyboard="{StaticResource HideFloatingMessageStoryboard}" />
+                            </MultiDataTrigger.ExitActions>
+                        </MultiDataTrigger>
+
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>

diff --git a/samples/MetroDemo/ExampleViews/DateExamples.xaml b/samples/MetroDemo/ExampleViews/DateExamples.xaml
@@ -149,7 +149,8 @@
                                                  IsEnabled="{Binding Path=IsChecked, ElementName=DateTimePickerIsEnabled, Mode=TwoWay}"
                                                  IsReadOnly="{Binding Path=IsChecked, ElementName=DateTimePickerIsReadOnly, Mode=TwoWay}"
                                                  Orientation="{Binding Path=SelectedItem, ElementName=DateTimePickerOrientation, Mode=TwoWay}"
-                                                 PickerVisibility="{Binding Path=SelectedItem, ElementName=DateTimePickerPickerVisibility, Mode=TwoWay}" />
+                                                 PickerVisibility="{Binding Path=SelectedItem, ElementName=DateTimePickerPickerVisibility, Mode=TwoWay}" 
+                                                 Controls:TextBoxHelper.UseFloatingWatermark="True"/>
                         <GroupBox Header="Current time">
                             <StackPanel>
                                 <Controls:DateTimePicker x:Name="DateTimePicker"
@@ -169,7 +170,8 @@
                                                      HandVisibility="{Binding Path=SelectedItem, ElementName=DateTimePickerHandVisibility, Mode=TwoWay}"
                                                      IsEnabled="{Binding Path=IsChecked, ElementName=DateTimePickerIsEnabled, Mode=TwoWay}"
                                                      IsReadOnly="{Binding Path=IsChecked, ElementName=DateTimePickerIsReadOnly, Mode=TwoWay}"
-                                                     PickerVisibility="{Binding Path=SelectedItem, ElementName=DateTimePickerPickerVisibility, Mode=TwoWay}" />
+                                                     PickerVisibility="{Binding Path=SelectedItem, ElementName=DateTimePickerPickerVisibility, Mode=TwoWay}"
+                                                     Controls:TextBoxHelper.UseFloatingWatermark="True"/>
                             </StackPanel>
                         </GroupBox>
                     </StackPanel>