Skip to content

Commit 0df05c1

Browse files
l1pton17l1pton17
committed
Add animate underline
1 parent 265552c commit 0df05c1

7 files changed

+246
-102
lines changed

‎MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,7 @@
253253
<Compile Include="ToolTipAssist.cs" />
254254
<Compile Include="RippleAssist.cs" />
255255
<Compile Include="Ripple.cs" />
256+
<Compile Include="Underline.cs" />
256257
<Compile Include="ValidationAssist.cs" />
257258
<EmbeddedResource Include="Properties\Resources.resx">
258259
<Generator>ResXFileCodeGenerator</Generator>

‎MaterialDesignThemes.Wpf/Themes/Generic.xaml

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,59 @@
121121
</Setter.Value>
122122
</Setter>
123123
</Style>
124+
125+
<Style TargetType="{x:Type local:Underline}">
126+
<Setter Property="Background" Value="{DynamicResource PrimaryHueMidBrush}"/>
127+
<Setter Property="SnapsToDevicePixels" Value="True"/>
128+
<Setter Property="HorizontalAlignment" Value="Stretch"/>
129+
<Setter Property="VerticalAlignment" Value="Bottom"/>
130+
<Setter Property="Height" Value="2"/>
131+
<Setter Property="Template">
132+
<Setter.Value>
133+
<ControlTemplate>
134+
<ControlTemplate.Resources>
135+
<CircleEase x:Key="UnderlineEasingFunction" EasingMode="EaseOut"/>
136+
<Storyboard x:Key="ExpandUnderlineBorderStoryboard">
137+
<DoubleAnimation Storyboard.TargetName="UnderlineBorder"
138+
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
139+
Duration="0:0:0.3"
140+
EasingFunction="{StaticResource UnderlineEasingFunction}"
141+
To="1"/>
142+
</Storyboard>
143+
<Storyboard x:Key="CollapseUnderlineBorderStoryboard">
144+
<DoubleAnimation Storyboard.TargetName="UnderlineBorder"
145+
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
146+
Duration="0:0:0.3"
147+
EasingFunction="{StaticResource UnderlineEasingFunction}"
148+
To="0"/>
149+
</Storyboard>
150+
</ControlTemplate.Resources>
151+
<Border x:Name="UnderlineBorder"
152+
Background="{TemplateBinding Background}"
153+
IsHitTestVisible="False"
154+
Height="{TemplateBinding Height}"
155+
VerticalAlignment="{TemplateBinding VerticalAlignment}"
156+
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
157+
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
158+
RenderTransformOrigin="0.5,0.5">
159+
<Border.RenderTransform>
160+
<ScaleTransform ScaleX="0" ScaleY="1"/>
161+
</Border.RenderTransform>
162+
</Border>
163+
<ControlTemplate.Triggers>
164+
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsActive}" Value="True">
165+
<DataTrigger.EnterActions>
166+
<BeginStoryboard Storyboard="{StaticResource ExpandUnderlineBorderStoryboard}"/>
167+
</DataTrigger.EnterActions>
168+
<DataTrigger.ExitActions>
169+
<BeginStoryboard Storyboard="{StaticResource CollapseUnderlineBorderStoryboard}"/>
170+
</DataTrigger.ExitActions>
171+
</DataTrigger>
172+
</ControlTemplate.Triggers>
173+
</ControlTemplate>
174+
</Setter.Value>
175+
</Setter>
176+
</Style>
124177

125178
<Style TargetType="{x:Type local:MaterialDateDisplay}">
126179
<Setter Property="Background" Value="Transparent" />

‎MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.ComboBox.xaml

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -185,9 +185,7 @@
185185
Text="{TemplateBinding wpf:TextFieldAssist.Hint}"
186186
Visibility="{TemplateBinding Text, Converter={StaticResource TextFieldHintVisibilityConverter}}" />
187187
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
188-
<Border BorderBrush="{DynamicResource PrimaryHueMidBrush}" BorderThickness="0 0 0 2"
189-
x:Name="focusBorder" Visibility="Hidden"
190-
Grid.ColumnSpan="2" />
188+
<wpf:Underline x:Name="Underline" Grid.ColumnSpan="2"/>
191189
</Grid>
192190
<ControlTemplate.Triggers>
193191
<Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
@@ -197,7 +195,6 @@
197195
<Setter Property="Height" TargetName="dropDownBorder" Value="95"/>
198196
</Trigger>
199197
<Trigger Property="IsKeyboardFocused" Value="True">
200-
<Setter TargetName="focusBorder" Property="Visibility" Value="Visible" />
201198
</Trigger>
202199
<MultiTrigger>
203200
<MultiTrigger.Conditions>
@@ -288,9 +285,7 @@
288285
IsHitTestVisible="False"
289286
Text="{TemplateBinding wpf:TextFieldAssist.Hint}" />
290287
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
291-
<Border BorderBrush="{DynamicResource PrimaryHueMidBrush}" BorderThickness="0 0 0 2"
292-
x:Name="focusBorder" Visibility="Hidden"
293-
Grid.ColumnSpan="2" />
288+
<wpf:Underline x:Name="Underline" Grid.ColumnSpan="2"/>
294289
</Grid>
295290
</Grid>
296291
<ControlTemplate.Triggers>
@@ -316,7 +311,6 @@
316311
<Setter Property="Height" TargetName="dropDownBorder" Value="95"/>
317312
</Trigger>
318313
<Trigger Property="IsKeyboardFocused" Value="True">
319-
<Setter TargetName="focusBorder" Property="Visibility" Value="Visible" />
320314
</Trigger>
321315
<MultiTrigger>
322316
<MultiTrigger.Conditions>
@@ -386,11 +380,9 @@
386380
Visibility="{TemplateBinding Text, Converter={StaticResource TextFieldHintVisibilityConverter}}" />
387381
<TextBox x:Name="PART_EditableTextBox" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}" Margin="{TemplateBinding Padding}" Style="{StaticResource MaterialDesignComboBoxEditableTextBox}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
388382
</Grid>
389-
</Border>
390-
<Border BorderBrush="{DynamicResource PrimaryHueMidBrush}" BorderThickness="0 0 0 2"
391-
x:Name="focusBorder" Visibility="Hidden"
392-
Grid.ColumnSpan="2" />
393-
</Grid>
383+
</Border>
384+
<wpf:Underline x:Name="Underline" Grid.ColumnSpan="2" BindIsKeyboardFocused="False"/>
385+
</Grid>
394386
<ControlTemplate.Triggers>
395387
<Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
396388
<Setter Property="Margin" TargetName="dropDownBorder" Value="5,5,5,5"/>
@@ -402,7 +394,7 @@
402394
<Setter Property="Height" TargetName="dropDownBorder" Value="95"/>
403395
</Trigger>
404396
<Trigger Property="IsKeyboardFocused" Value="True" SourceName="PART_EditableTextBox">
405-
<Setter TargetName="focusBorder" Property="Visibility" Value="Visible" />
397+
<Setter TargetName="Underline" Property="IsActive" Value="True"/>
406398
</Trigger>
407399
<MultiTrigger>
408400
<MultiTrigger.Conditions>
@@ -492,12 +484,14 @@
492484
Opacity="{Binding Path=(wpf:TextFieldAssist.HintOpacity), RelativeSource={RelativeSource TemplatedParent}}"
493485
Text="{TemplateBinding wpf:TextFieldAssist.Hint}"
494486
IsHitTestVisible="False" />
495-
<TextBox x:Name="PART_EditableTextBox" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}" Margin="{TemplateBinding Padding}" Style="{StaticResource MaterialDesignComboBoxEditableTextBox}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
487+
<TextBox x:Name="PART_EditableTextBox"
488+
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
489+
IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}" Margin="{TemplateBinding Padding}"
490+
Style="{StaticResource MaterialDesignComboBoxEditableTextBox}"
491+
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
496492
</Grid>
497493
</Border>
498-
<Border BorderBrush="{DynamicResource PrimaryHueMidBrush}" BorderThickness="0 0 0 2"
499-
x:Name="focusBorder" Visibility="Hidden"
500-
Grid.ColumnSpan="2" />
494+
<wpf:Underline x:Name="Underline" Grid.ColumnSpan="2" BindIsKeyboardFocused="False"/>
501495
</Grid>
502496
<ControlTemplate.Triggers>
503497
<Trigger Property="wpf:TextFieldAssist.IsNullOrEmpty" Value="False">
@@ -525,7 +519,7 @@
525519
<Setter Property="Height" TargetName="dropDownBorder" Value="95"/>
526520
</Trigger>
527521
<Trigger Property="IsKeyboardFocused" Value="True" SourceName="PART_EditableTextBox">
528-
<Setter TargetName="focusBorder" Property="Visibility" Value="Visible" />
522+
<Setter TargetName="Underline" Property="IsActive" Value="True"/>
529523
</Trigger>
530524
<MultiTrigger>
531525
<MultiTrigger.Conditions>

‎MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.PasswordBox.xaml

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
33
xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf">
44

5+
<ResourceDictionary.MergedDictionaries>
6+
<ResourceDictionary Source="MaterialDesignTheme.ValidationErrorTemplate.xaml" />
7+
</ResourceDictionary.MergedDictionaries>
8+
59
<Style x:Key="MaterialDesignPasswordBox" TargetType="{x:Type PasswordBox}">
610
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"/>
711
<Setter Property="FontFamily" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.FontFamily)}"/>
@@ -13,36 +17,37 @@
1317
<Setter Property="CaretBrush" Value="{Binding RelativeSource={RelativeSource Self}, Path=BorderBrush}"/>
1418
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
1519
<Setter Property="HorizontalContentAlignment" Value="Left"/>
20+
<Setter Property="VerticalContentAlignment" Value="Center"/>
1621
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
1722
<Setter Property="AllowDrop" Value="true"/>
1823
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
1924
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
2025
<Setter Property="wpf:PasswordFieldAssist.Managed" Value="{Binding RelativeSource={RelativeSource Self}}" />
21-
<Setter Property="Validation.ErrorTemplate">
22-
<Setter.Value>
23-
<ControlTemplate>
24-
<StackPanel>
25-
<AdornedElementPlaceholder />
26-
<TextBlock FontSize="10" Foreground="#f44336" Text="{Binding Path=[0].ErrorContent}" />
27-
</StackPanel>
28-
</ControlTemplate>
29-
</Setter.Value>
30-
</Setter>
26+
<Setter Property="Validation.ErrorTemplate" Value="{StaticResource MaterialDesignValidationErrorTemplate}"/>
3127
<Setter Property="Template">
3228
<Setter.Value>
3329
<ControlTemplate TargetType="{x:Type PasswordBox}">
34-
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"
35-
Padding="0 4 0 4" VerticalAlignment="Center">
36-
<Grid>
37-
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"
38-
TextElement.FontFamily="Times New Roman" />
39-
<TextBlock Text="{Binding Path=(wpf:TextFieldAssist.Hint), RelativeSource={RelativeSource TemplatedParent}}"
40-
Visibility="{Binding Path=(wpf:PasswordFieldAssist.HintVisibility), RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
41-
Margin="1 0 1 0"
42-
x:Name="Hint"
43-
Opacity="{Binding Path=(wpf:TextFieldAssist.HintOpacity), RelativeSource={RelativeSource TemplatedParent}}" />
44-
</Grid>
45-
</Border>
30+
<Grid VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
31+
<Border x:Name="border"
32+
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
33+
Background="{TemplateBinding Background}"
34+
SnapsToDevicePixels="True"
35+
Padding="0 4 0 4" VerticalAlignment="Center">
36+
<Grid Margin="{TemplateBinding Padding}">
37+
<ScrollViewer x:Name="PART_ContentHost"
38+
Focusable="false"
39+
HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"
40+
TextElement.FontFamily="Times New Roman" />
41+
<TextBlock Text="{Binding Path=(wpf:TextFieldAssist.Hint), RelativeSource={RelativeSource TemplatedParent}}"
42+
Visibility="{Binding Path=(wpf:PasswordFieldAssist.HintVisibility), RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
43+
Margin="1 0 1 0"
44+
IsHitTestVisible="False"
45+
x:Name="Hint"
46+
Opacity="{Binding Path=(wpf:TextFieldAssist.HintOpacity), RelativeSource={RelativeSource TemplatedParent}}" />
47+
</Grid>
48+
</Border>
49+
<wpf:Underline x:Name="Underline"/>
50+
</Grid>
4651
<ControlTemplate.Triggers>
4752
<Trigger Property="IsEnabled" Value="false">
4853
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
@@ -51,12 +56,11 @@
5156
<Setter Property="BorderBrush" Value="{DynamicResource PrimaryHueMidBrush}"/>
5257
</Trigger>
5358
<Trigger Property="IsKeyboardFocused" Value="true">
54-
<Setter TargetName="border" Property="Padding" Value="0 4 0 3"/>
55-
<Setter Property="BorderThickness" Value="0 0 0 2"/>
5659
<Setter Property="BorderBrush" Value="{DynamicResource PrimaryHueMidBrush}"/>
5760
</Trigger>
5861
<Trigger Property="Validation.HasError" Value="true">
59-
<Setter Property="BorderBrush" Value="#f44336"/>
62+
<Setter Property="BorderBrush" Value="{DynamicResource ValidationErrorBrush}"/>
63+
<Setter TargetName="Underline" Property="Background" Value="{DynamicResource ValidationErrorBrush}"/>
6064
</Trigger>
6165
</ControlTemplate.Triggers>
6266
</ControlTemplate>

0 commit comments

Comments
 (0)