Skip to content

Commit 8010f85

Browse files
spiegelpKeboo
spiegelp
authored and
Keboo
committed
Better hover and focus effects for text areas and text field boxes (#840)
* text field bottom line has 2dp height on hover * bottom line for text field box for inactive and hover * TextBox hover effect * hover and focus effects for text fields * applied new details of the Material Design specification to TextBox and PasswordBox
1 parent 67cf243 commit 8010f85

File tree

6 files changed

+409
-160
lines changed

6 files changed

+409
-160
lines changed

‎MainDemo.Wpf/TextFields.xaml‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -349,38 +349,49 @@
349349
</StackPanel>
350350
</smtx:XamlDisplay>
351351

352-
<TextBlock Grid.Row="13" Grid.Column="1" Grid.ColumnSpan="3" Style="{StaticResource MaterialDesignHeadlineTextBlock}" Margin="0,32,0,16">Text field box</TextBlock>
352+
<TextBlock Grid.Row="13" Grid.Column="1" Grid.ColumnSpan="3" Style="{StaticResource MaterialDesignHeadlineTextBlock}" Margin="0,32,0,16">Filled text field</TextBlock>
353353
<smtx:XamlDisplay Key="fields_25" Grid.Row="14" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="3">
354354
<StackPanel>
355-
<CheckBox x:Name="MaterialDesignTextFieldBoxTextBoxEnabledComboBox"
355+
<CheckBox x:Name="MaterialDesignFilledTextFieldTextBoxEnabledComboBox"
356356
IsChecked="True" Margin="0,0,0,8">Enabled</CheckBox>
357-
<TextBox Style="{StaticResource MaterialDesignTextFieldBoxTextBox}"
357+
<TextBox Style="{StaticResource MaterialDesignFilledTextFieldTextBox}"
358358
VerticalAlignment="Top" AcceptsReturn="True" TextWrapping="Wrap" MaxWidth="400" materialDesign:HintAssist.Hint="Floating hint in a box"
359-
IsEnabled="{Binding Path=IsChecked, ElementName=MaterialDesignTextFieldBoxTextBoxEnabledComboBox}" />
359+
IsEnabled="{Binding Path=IsChecked, ElementName=MaterialDesignFilledTextFieldTextBoxEnabledComboBox}" />
360360
</StackPanel>
361361
</smtx:XamlDisplay>
362362

363-
364-
<TextBlock Grid.Row="13" Grid.Column="4" Style="{StaticResource MaterialDesignHeadlineTextBlock}" Margin="32,32,0,16">Text area box</TextBlock>
363+
<TextBlock Grid.Row="13" Grid.Column="4" Style="{StaticResource MaterialDesignHeadlineTextBlock}" Margin="32,32,0,16">Outlined text field</TextBlock>
365364
<smtx:XamlDisplay Key="fields_26" Grid.Row="14" Grid.Column="4" Grid.RowSpan="2">
366365
<StackPanel>
367-
<CheckBox x:Name="MaterialDesignTextAreaTextBoxEnabledComboBox"
366+
<CheckBox x:Name="MaterialDesignOutlinedTextFieldTextBoxEnabledComboBox"
368367
IsChecked="True" Margin="32,0,0,8">Enabled</CheckBox>
369-
<TextBox Style="{StaticResource MaterialDesignTextAreaTextBox}" Margin="32,0,0,0"
368+
<TextBox Style="{StaticResource MaterialDesignOutlinedTextFieldTextBox}" Margin="32,0,0,0"
370369
VerticalAlignment="Top" Height="100" AcceptsReturn="True" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" materialDesign:HintAssist.Hint="This is a text area"
371-
IsEnabled="{Binding Path=IsChecked, ElementName=MaterialDesignTextAreaTextBoxEnabledComboBox}" />
370+
IsEnabled="{Binding Path=IsChecked, ElementName=MaterialDesignOutlinedTextFieldTextBoxEnabledComboBox}" />
371+
</StackPanel>
372+
</smtx:XamlDisplay>
373+
374+
<TextBlock Grid.Row="16" Grid.Column="1" Grid.ColumnSpan="3" Style="{StaticResource MaterialDesignHeadlineTextBlock}" Margin="0,32,0,16">Filled password field</TextBlock>
375+
<smtx:XamlDisplay Key="fields_28" Grid.Row="17" Grid.Column="1" Grid.ColumnSpan="3">
376+
<StackPanel>
377+
<CheckBox x:Name="MaterialDesignFilledPasswordFieldPasswordBoxEnabledComboBox"
378+
IsChecked="True" Margin="0,0,0,8">Enabled</CheckBox>
379+
<PasswordBox Style="{StaticResource MaterialDesignFilledPasswordFieldPasswordBox}"
380+
VerticalAlignment="Top"
381+
IsEnabled="{Binding Path=IsChecked, ElementName=MaterialDesignFilledPasswordFieldPasswordBoxEnabledComboBox}"
382+
materialDesign:HintAssist.Hint="Password" />
372383
</StackPanel>
373384
</smtx:XamlDisplay>
374385

375-
<TextBlock Grid.Row="16" Grid.Column="1" Grid.ColumnSpan="3" Style="{StaticResource MaterialDesignHeadlineTextBlock}" Margin="0,32,0,16">Password field box</TextBlock>
376-
<smtx:XamlDisplay Key="fields_28" Grid.Row="17" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="3">
386+
<TextBlock Grid.Row="16" Grid.Column="4" Style="{StaticResource MaterialDesignHeadlineTextBlock}" Margin="32,32,0,16">Outlined password field</TextBlock>
387+
<smtx:XamlDisplay Key="fields_29" Grid.Row="17" Grid.Column="4" Margin="32,0,0,0">
377388
<StackPanel>
378-
<CheckBox x:Name="MaterialDesignPasswordFieldBoxPasswordBoxEnabledComboBox"
389+
<CheckBox x:Name="MaterialDesignOutlinedPasswordFieldPasswordBoxEnabledComboBox"
379390
IsChecked="True" Margin="0,0,0,8">Enabled</CheckBox>
380-
<PasswordBox Style="{StaticResource MaterialDesignPasswordFieldBoxPasswordBox}"
391+
<PasswordBox Style="{StaticResource MaterialDesignOutlinedPasswordFieldPasswordBox}"
381392
VerticalAlignment="Top"
382-
IsEnabled="{Binding Path=IsChecked, ElementName=MaterialDesignPasswordFieldBoxPasswordBoxEnabledComboBox}"
383-
materialDesign:HintAssist.Hint="Floating hint in a password box" />
393+
IsEnabled="{Binding Path=IsChecked, ElementName=MaterialDesignOutlinedPasswordFieldPasswordBoxEnabledComboBox}"
394+
materialDesign:HintAssist.Hint="Password" />
384395
</StackPanel>
385396
</smtx:XamlDisplay>
386397
</Grid>

‎MaterialDesignThemes.Wpf/TextFieldAssist.cs‎

Lines changed: 77 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -68,35 +68,99 @@ public static Visibility GetDecorationVisibility(DependencyObject element)
6868
}
6969

7070
/// <summary>
71-
/// Controls the visbility of the text field box.
71+
/// Controls the visbility of the filled text field.
7272
/// </summary>
73-
public static readonly DependencyProperty HasTextFieldBoxProperty = DependencyProperty.RegisterAttached(
74-
"HasTextFieldBox", typeof(bool), typeof(TextFieldAssist), new PropertyMetadata(false));
73+
public static readonly DependencyProperty HasFilledTextFieldProperty = DependencyProperty.RegisterAttached(
74+
"HasFilledTextField", typeof(bool), typeof(TextFieldAssist), new PropertyMetadata(false));
7575

76-
public static void SetHasTextFieldBox(DependencyObject element, bool value)
76+
public static void SetHasFilledTextField(DependencyObject element, bool value)
7777
{
78-
element.SetValue(HasTextFieldBoxProperty, value);
78+
element.SetValue(HasFilledTextFieldProperty, value);
7979
}
8080

81-
public static bool GetHasTextFieldBox(DependencyObject element)
81+
public static bool GetHasFilledTextField(DependencyObject element)
8282
{
83-
return (bool)element.GetValue(HasTextFieldBoxProperty);
83+
return (bool)element.GetValue(HasFilledTextFieldProperty);
8484
}
8585

8686
/// <summary>
8787
/// Controls the visibility of the text field area box.
8888
/// </summary>
89-
public static readonly DependencyProperty HasTextAreaBoxProperty = DependencyProperty.RegisterAttached(
90-
"HasTextAreaBox", typeof(bool), typeof(TextFieldAssist), new PropertyMetadata(false));
89+
public static readonly DependencyProperty HasOutlinedTextFieldProperty = DependencyProperty.RegisterAttached(
90+
"HasOutlinedTextField", typeof(bool), typeof(TextFieldAssist), new PropertyMetadata(false));
9191

92-
public static void SetHasTextAreaBox(DependencyObject element, bool value)
92+
public static void SetHasOutlinedTextField(DependencyObject element, bool value)
9393
{
94-
element.SetValue(HasTextAreaBoxProperty, value);
94+
element.SetValue(HasOutlinedTextFieldProperty, value);
9595
}
9696

97-
public static bool GetHasTextAreaBox(DependencyObject element)
97+
public static bool GetHasOutlinedTextField(DependencyObject element)
9898
{
99-
return (bool)element.GetValue(HasTextAreaBoxProperty);
99+
return (bool)element.GetValue(HasOutlinedTextFieldProperty);
100+
}
101+
102+
/// <summary>
103+
/// Controls the corner radius of the surrounding box.
104+
/// </summary>
105+
public static readonly DependencyProperty TextFieldCornerRadiusProperty = DependencyProperty.RegisterAttached(
106+
"TextFieldCornerRadius", typeof(CornerRadius), typeof(TextFieldAssist), new PropertyMetadata(new CornerRadius(0.0)));
107+
108+
public static void SetTextFieldCornerRadius(DependencyObject element, CornerRadius value)
109+
{
110+
element.SetValue(TextFieldCornerRadiusProperty, value);
111+
}
112+
113+
public static CornerRadius GetTextFieldCornerRadius(DependencyObject element)
114+
{
115+
return (CornerRadius)element.GetValue(TextFieldCornerRadiusProperty);
116+
}
117+
118+
/// <summary>
119+
/// Controls the corner radius of the bottom line of the surroundig box.
120+
/// </summary>
121+
public static readonly DependencyProperty UnderlineCornerRadiusProperty = DependencyProperty.RegisterAttached(
122+
"UnderlineCornerRadius", typeof(CornerRadius), typeof(TextFieldAssist), new PropertyMetadata(new CornerRadius(0.0)));
123+
124+
public static void SetUnderlineCornerRadius(DependencyObject element, CornerRadius value)
125+
{
126+
element.SetValue(UnderlineCornerRadiusProperty, value);
127+
}
128+
129+
public static CornerRadius GetUnderlineCornerRadius(DependencyObject element)
130+
{
131+
return (CornerRadius)element.GetValue(UnderlineCornerRadiusProperty);
132+
}
133+
134+
/// <summary>
135+
/// Controls the highlighting style of a text box.
136+
/// </summary>
137+
public static readonly DependencyProperty NewSpecHighlightingEnabledProperty = DependencyProperty.RegisterAttached(
138+
"NewSpecHighlightingEnabled", typeof(bool), typeof(TextFieldAssist), new PropertyMetadata(false));
139+
140+
public static void SetNewSpecHighlightingEnabled(DependencyObject element, bool value)
141+
{
142+
element.SetValue(NewSpecHighlightingEnabledProperty, value);
143+
}
144+
145+
public static bool GetNewSpecHighlightingEnabled(DependencyObject element)
146+
{
147+
return (bool)element.GetValue(NewSpecHighlightingEnabledProperty);
148+
}
149+
150+
/// <summary>
151+
/// Enables a ripple effect on focusing the text box.
152+
/// </summary>
153+
public static readonly DependencyProperty RippleOnFocusEnabledProperty = DependencyProperty.RegisterAttached(
154+
"RippleOnFocusEnabled", typeof(bool), typeof(TextFieldAssist), new PropertyMetadata(false));
155+
156+
public static void SetRippleOnFocusEnabled(DependencyObject element, bool value)
157+
{
158+
element.SetValue(RippleOnFocusEnabledProperty, value);
159+
}
160+
161+
public static bool GetRippleOnFocusEnabled(DependencyObject element)
162+
{
163+
return (bool)element.GetValue(RippleOnFocusEnabledProperty);
100164
}
101165

102166
/// <summary>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
<SolidColorBrush x:Key="MaterialDesignSnackbarRipple" Color="#FF494949" po:Freeze="True" />
3131

3232
<SolidColorBrush x:Key="MaterialDesignTextFieldBoxBackground" Color="#1AFFFFFF" po:Freeze="True" /> <!-- 10% white -->
33+
<SolidColorBrush x:Key="MaterialDesignTextFieldBoxHoverBackground" Color="#1FFFFFFF" po:Freeze="True" /> <!-- 12% white -->
3334
<SolidColorBrush x:Key="MaterialDesignTextFieldBoxDisabledBackground" Color="#0DFFFFFF" po:Freeze="True" /> <!-- 5% white -->
3435
<SolidColorBrush x:Key="MaterialDesignTextAreaBorder" Color="#BCFFFFFF" po:Freeze="True" /> <!-- 74% white -->
3536
<SolidColorBrush x:Key="MaterialDesignTextAreaInactiveBorder" Color="#1AFFFFFF" po:Freeze="True" /> <!-- 10% white -->

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
<SolidColorBrush x:Key="MaterialDesignSnackbarRipple" Color="#FFB6B6B6" po:Freeze="True" />
3131

3232
<SolidColorBrush x:Key="MaterialDesignTextFieldBoxBackground" Color="#0F000000" po:Freeze="True" /> <!-- 6% black -->
33+
<SolidColorBrush x:Key="MaterialDesignTextFieldBoxHoverBackground" Color="#14000000" po:Freeze="True" /> <!-- 8% black -->
3334
<SolidColorBrush x:Key="MaterialDesignTextFieldBoxDisabledBackground" Color="#08000000" po:Freeze="True" /> <!-- 3% black -->
3435
<SolidColorBrush x:Key="MaterialDesignTextAreaBorder" Color="#BC000000" po:Freeze="True" /> <!-- 74% black -->
3536
<SolidColorBrush x:Key="MaterialDesignTextAreaInactiveBorder" Color="#0F000000" po:Freeze="True" /> <!-- 6% black -->

0 commit comments

Comments
 (0)