Skip to content

Commit f1ed10c

Browse files
ButchersBoyButchersBoy
authored
Merge pull request #732 from spiegelp/TextFields
Additional styles for TextBox
2 parents b9962ed + 65ddc48 commit f1ed10c

File tree

7 files changed

+165
-32
lines changed

7 files changed

+165
-32
lines changed

‎MainDemo.Wpf/TextFields.xaml

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,10 @@
6464
<RowDefinition Height="Auto" />
6565
<RowDefinition Height="Auto" />
6666
<RowDefinition Height="Auto" />
67+
<RowDefinition Height="Auto" />
68+
<RowDefinition Height="Auto" />
69+
<RowDefinition Height="Auto" />
70+
<RowDefinition Height="Auto" />
6771
</Grid.RowDefinitions>
6872
<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Style="{StaticResource MaterialDesignHeadlineTextBlock}">Common Fields</TextBlock>
6973
<materialDesign:PackIcon Grid.Row="1" Grid.Column="0" Kind="Account" Foreground="{Binding ElementName=NameTextBox, Path=BorderBrush}" />
@@ -287,6 +291,17 @@
287291
<ComboBoxItem>Pear</ComboBoxItem>
288292
<ComboBoxItem>Orange</ComboBoxItem>
289293
</ComboBox>
290-
294+
<TextBlock Grid.Row="13" Grid.Column="1" Grid.ColumnSpan="3" Style="{StaticResource MaterialDesignHeadlineTextBlock}" Margin="0,32,0,16">Text field box</TextBlock>
295+
<CheckBox x:Name="MaterialDesignTextFieldBoxTextBoxEnabledComboBox" Grid.Row="14" Grid.Column="1" Grid.ColumnSpan="3"
296+
IsChecked="True" Margin="0,0,0,8">Enabled</CheckBox>
297+
<TextBox Grid.Row="15" Grid.Column="1" Grid.ColumnSpan="3" Style="{StaticResource MaterialDesignTextFieldBoxTextBox}"
298+
VerticalAlignment="Top" AcceptsReturn="True" TextWrapping="Wrap" MaxWidth="400" materialDesign:HintAssist.Hint="Floating hint in a box"
299+
IsEnabled="{Binding Path=IsChecked, ElementName=MaterialDesignTextFieldBoxTextBoxEnabledComboBox}" />
300+
<TextBlock Grid.Row="13" Grid.Column="5" Grid.ColumnSpan="3" Style="{StaticResource MaterialDesignHeadlineTextBlock}" Margin="32,32,0,16">Text area box</TextBlock>
301+
<CheckBox x:Name="MaterialDesignTextAreaTextBoxEnabledComboBox" Grid.Row="14" Grid.Column="5" Grid.ColumnSpan="3"
302+
IsChecked="True" Margin="32,0,0,8">Enabled</CheckBox>
303+
<TextBox Grid.Row="15" Grid.Column="5" Grid.ColumnSpan="3" Style="{StaticResource MaterialDesignTextAreaTextBox}" Margin="32,0,0,0"
304+
VerticalAlignment="Top" Height="100" AcceptsReturn="True" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" materialDesign:HintAssist.Hint="This is a text area"
305+
IsEnabled="{Binding Path=IsChecked, ElementName=MaterialDesignTextAreaTextBoxEnabledComboBox}" />
291306
</Grid>
292307
</UserControl>

‎MaterialDesignThemes.Wpf/TextFieldAssist.cs

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,38 @@ public static Visibility GetDecorationVisibility(DependencyObject element)
6767
return (Visibility)element.GetValue(DecorationVisibilityProperty);
6868
}
6969

70+
/// <summary>
71+
/// Controls the visbility of the text field box.
72+
/// </summary>
73+
public static readonly DependencyProperty HasTextFieldBoxProperty = DependencyProperty.RegisterAttached(
74+
"HasTextFieldBox", typeof(bool), typeof(TextFieldAssist), new PropertyMetadata(false));
75+
76+
public static void SetHasTextFieldBox(DependencyObject element, bool value)
77+
{
78+
element.SetValue(HasTextFieldBoxProperty, value);
79+
}
80+
81+
public static bool GetHasTextFieldBox(DependencyObject element)
82+
{
83+
return (bool)element.GetValue(HasTextFieldBoxProperty);
84+
}
85+
86+
/// <summary>
87+
/// Controls the visibility of the text field area box.
88+
/// </summary>
89+
public static readonly DependencyProperty HasTextAreaBoxProperty = DependencyProperty.RegisterAttached(
90+
"HasTextAreaBox", typeof(bool), typeof(TextFieldAssist), new PropertyMetadata(false));
91+
92+
public static void SetHasTextAreaBox(DependencyObject element, bool value)
93+
{
94+
element.SetValue(HasTextAreaBoxProperty, value);
95+
}
96+
97+
public static bool GetHasTextAreaBox(DependencyObject element)
98+
{
99+
return (bool)element.GetValue(HasTextAreaBoxProperty);
100+
}
101+
70102
/// <summary>
71103
/// Automatially inserts spelling suggestions into the text box context menu.
72104
/// </summary>

‎MaterialDesignThemes.Wpf/Themes/Generic.xaml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -189,12 +189,13 @@
189189
<Setter Property="IsTabStop" Value="False"/>
190190
<Setter Property="Template">
191191
<Setter.Value>
192-
<ControlTemplate>
192+
<ControlTemplate TargetType="{x:Type local:Underline}">
193193
<ControlTemplate.Resources>
194194
<CircleEase x:Key="UnderlineEasingFunction" EasingMode="EaseOut"/>
195195
</ControlTemplate.Resources>
196196
<Border x:Name="UnderlineBorder"
197197
Background="{TemplateBinding Background}"
198+
CornerRadius="{TemplateBinding CornerRadius}"
198199
IsHitTestVisible="False"
199200
Height="{TemplateBinding Height}"
200201
VerticalAlignment="{TemplateBinding VerticalAlignment}"

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,9 @@
2828
<SolidColorBrush x:Key="MaterialDesignSnackbarBackground" Color="#FFCDCDCD" po:Freeze="True" />
2929
<SolidColorBrush x:Key="MaterialDesignSnackbarMouseOver" Color="#FFB9B9BD" po:Freeze="True" />
3030
<SolidColorBrush x:Key="MaterialDesignSnackbarRipple" Color="#FF494949" po:Freeze="True" />
31+
32+
<SolidColorBrush x:Key="MaterialDesignTextFieldBoxBackground" Color="#1AFFFFFF" po:Freeze="True" /> <!-- 10% white -->
33+
<SolidColorBrush x:Key="MaterialDesignTextFieldBoxDisabledBackground" Color="#0DFFFFFF" po:Freeze="True" /> <!-- 5% white -->
34+
<SolidColorBrush x:Key="MaterialDesignTextAreaBorder" Color="#BCFFFFFF" po:Freeze="True" /> <!-- 74% white -->
35+
<SolidColorBrush x:Key="MaterialDesignTextAreaInactiveBorder" Color="#1AFFFFFF" po:Freeze="True" /> <!-- 10% white -->
3136
</ResourceDictionary>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,9 @@
2828
<SolidColorBrush x:Key="MaterialDesignSnackbarBackground" Color="#FF323232" po:Freeze="True" />
2929
<SolidColorBrush x:Key="MaterialDesignSnackbarMouseOver" Color="#FF464642" po:Freeze="True" />
3030
<SolidColorBrush x:Key="MaterialDesignSnackbarRipple" Color="#FFB6B6B6" po:Freeze="True" />
31+
32+
<SolidColorBrush x:Key="MaterialDesignTextFieldBoxBackground" Color="#0F000000" po:Freeze="True" /> <!-- 6% black -->
33+
<SolidColorBrush x:Key="MaterialDesignTextFieldBoxDisabledBackground" Color="#08000000" po:Freeze="True" /> <!-- 3% black -->
34+
<SolidColorBrush x:Key="MaterialDesignTextAreaBorder" Color="#BC000000" po:Freeze="True" /> <!-- 74% black -->
35+
<SolidColorBrush x:Key="MaterialDesignTextAreaInactiveBorder" Color="#0F000000" po:Freeze="True" /> <!-- 6% black -->
3136
</ResourceDictionary>

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

Lines changed: 95 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<Setter Property="BorderThickness" Value="0 0 0 1"/>
1616
<Setter Property="wpf:TextFieldAssist.TextBoxViewMargin" Value="0 0 0 0" />
1717
<Setter Property="Background" Value="Transparent"/>
18-
<Setter Property="CaretBrush" Value="{Binding RelativeSource={RelativeSource Self}, Path=BorderBrush}"/>
18+
<Setter Property="CaretBrush" Value="{DynamicResource PrimaryHueMidBrush}"/>
1919
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
2020
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
2121
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
@@ -50,35 +50,39 @@
5050
<Setter Property="Template">
5151
<Setter.Value>
5252
<ControlTemplate TargetType="{x:Type TextBox}">
53-
<Grid>
54-
<Border x:Name="border"
55-
BorderBrush="{TemplateBinding BorderBrush}"
56-
BorderThickness="{TemplateBinding BorderThickness}"
57-
Background="{TemplateBinding Background}"
58-
SnapsToDevicePixels="True"
59-
Padding="0 4 0 4">
60-
<Grid Margin="{TemplateBinding Padding}"
61-
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
62-
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
63-
<ScrollViewer x:Name="PART_ContentHost" Focusable="false"
64-
HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"
65-
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
66-
UseLayoutRounding="{TemplateBinding UseLayoutRounding}"
67-
/>
68-
<wpf:SmartHint x:Name="Hint"
69-
Hint="{Binding Path=(wpf:HintAssist.Hint), RelativeSource={RelativeSource TemplatedParent}}"
70-
HintProxy="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static converters:HintProxyFabricConverter.Instance}}"
71-
FontSize="{TemplateBinding FontSize}"
72-
Padding="{TemplateBinding Padding}"
73-
HintOpacity="{Binding Path=(wpf:HintAssist.HintOpacity), RelativeSource={RelativeSource TemplatedParent}}"
74-
UseFloating="{Binding Path=(wpf:HintAssist.IsFloating), RelativeSource={RelativeSource TemplatedParent}}"
75-
FloatingScale="{Binding Path=(wpf:HintAssist.FloatingScale), RelativeSource={RelativeSource TemplatedParent}}"
76-
FloatingOffset="{Binding Path=(wpf:HintAssist.FloatingOffset), RelativeSource={RelativeSource TemplatedParent}}"
77-
/>
78-
</Grid>
79-
</Border>
80-
<wpf:Underline x:Name="Underline" Visibility="{Binding Path=(wpf:TextFieldAssist.DecorationVisibility), RelativeSource={RelativeSource TemplatedParent}}"/>
81-
</Grid>
53+
<Border x:Name="textFieldBoxBorder"
54+
SnapsToDevicePixels="True">
55+
<Grid>
56+
<Border x:Name="border"
57+
BorderBrush="{TemplateBinding BorderBrush}"
58+
BorderThickness="{TemplateBinding BorderThickness}"
59+
Background="{TemplateBinding Background}"
60+
SnapsToDevicePixels="True"
61+
Padding="0 4 0 4">
62+
<Grid x:Name="textFieldGrid"
63+
Margin="{TemplateBinding Padding}"
64+
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
65+
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
66+
<ScrollViewer x:Name="PART_ContentHost" Focusable="false"
67+
HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"
68+
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
69+
UseLayoutRounding="{TemplateBinding UseLayoutRounding}"
70+
/>
71+
<wpf:SmartHint x:Name="Hint"
72+
Hint="{Binding Path=(wpf:HintAssist.Hint), RelativeSource={RelativeSource TemplatedParent}}"
73+
HintProxy="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static converters:HintProxyFabricConverter.Instance}}"
74+
FontSize="{TemplateBinding FontSize}"
75+
Padding="{TemplateBinding Padding}"
76+
HintOpacity="{Binding Path=(wpf:HintAssist.HintOpacity), RelativeSource={RelativeSource TemplatedParent}}"
77+
UseFloating="{Binding Path=(wpf:HintAssist.IsFloating), RelativeSource={RelativeSource TemplatedParent}}"
78+
FloatingScale="{Binding Path=(wpf:HintAssist.FloatingScale), RelativeSource={RelativeSource TemplatedParent}}"
79+
FloatingOffset="{Binding Path=(wpf:HintAssist.FloatingOffset), RelativeSource={RelativeSource TemplatedParent}}"
80+
/>
81+
</Grid>
82+
</Border>
83+
<wpf:Underline x:Name="Underline" Visibility="{Binding Path=(wpf:TextFieldAssist.DecorationVisibility), RelativeSource={RelativeSource TemplatedParent}}"/>
84+
</Grid>
85+
</Border>
8286
<ControlTemplate.Triggers>
8387
<MultiTrigger>
8488
<MultiTrigger.Conditions>
@@ -91,8 +95,35 @@
9195
<Trigger Property="wpf:HintAssist.IsFloating" Value="True">
9296
<Setter TargetName="border" Property="Margin" Value="0 12 0 0" />
9397
</Trigger>
98+
<Trigger Property="wpf:TextFieldAssist.HasTextFieldBox" Value="True">
99+
<Setter Property="VerticalContentAlignment" Value="Top" />
100+
<Setter TargetName="textFieldBoxBorder" Property="Background" Value="{DynamicResource MaterialDesignTextFieldBoxBackground}" />
101+
<Setter TargetName="textFieldBoxBorder" Property="CornerRadius" Value="4" />
102+
<Setter TargetName="textFieldBoxBorder" Property="Padding" Value="0,8,0,0" />
103+
<Setter TargetName="textFieldGrid" Property="Margin" Value="16,0,16,0" />
104+
<Setter TargetName="border" Property="BorderThickness" Value="0" />
105+
<Setter TargetName="Underline" Property="CornerRadius" Value="0,0,4,4" />
106+
<Setter TargetName="Hint" Property="Margin" Value="0,0,0,16" />
107+
<Setter TargetName="PART_ContentHost" Property="Margin" Value="0,8,0,8" />
108+
</Trigger>
109+
<Trigger Property="wpf:TextFieldAssist.HasTextAreaBox" Value="True">
110+
<Setter Property="VerticalContentAlignment" Value="Top" />
111+
<Setter TargetName="textFieldBoxBorder" Property="Background" Value="Transparent" />
112+
<Setter TargetName="textFieldBoxBorder" Property="CornerRadius" Value="4" />
113+
<Setter TargetName="textFieldBoxBorder" Property="BorderThickness" Value="1" />
114+
<Setter TargetName="textFieldBoxBorder" Property="BorderBrush" Value="{DynamicResource MaterialDesignTextAreaBorder}" />
115+
<Setter TargetName="textFieldBoxBorder" Property="Padding" Value="0,8,0,0" />
116+
<Setter TargetName="textFieldBoxBorder" Property="Margin" Value="-1" />
117+
<Setter TargetName="textFieldGrid" Property="Margin" Value="16,0,16,0" />
118+
<Setter TargetName="border" Property="BorderThickness" Value="0" />
119+
<Setter TargetName="Underline" Property="Visibility" Value="Collapsed" />
120+
<Setter TargetName="Hint" Property="Margin" Value="0,0,0,16" />
121+
<Setter TargetName="PART_ContentHost" Property="Margin" Value="0,8,0,8" />
122+
</Trigger>
94123
<Trigger Property="IsEnabled" Value="false">
95124
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
125+
<Setter TargetName="textFieldBoxBorder" Property="Background" Value="{DynamicResource MaterialDesignTextFieldBoxDisabledBackground}" />
126+
<Setter TargetName="textFieldBoxBorder" Property="BorderBrush" Value="{DynamicResource MaterialDesignTextAreaInactiveBorder}" />
96127
</Trigger>
97128
<Trigger Property="IsMouseOver" Value="true">
98129
<Setter Property="BorderBrush" Value="{DynamicResource PrimaryHueMidBrush}"/>
@@ -104,6 +135,32 @@
104135
<Setter Property="BorderBrush" Value="{DynamicResource ValidationErrorBrush}"/>
105136
<Setter TargetName="Underline" Property="Background" Value="{DynamicResource ValidationErrorBrush}"/>
106137
</Trigger>
138+
<MultiTrigger>
139+
<MultiTrigger.Conditions>
140+
<Condition Property="IsMouseOver" Value="True" />
141+
<Condition Property="wpf:TextFieldAssist.HasTextAreaBox" Value="True" />
142+
</MultiTrigger.Conditions>
143+
<Setter TargetName="textFieldBoxBorder" Property="Margin" Value="-2" />
144+
<Setter TargetName="textFieldBoxBorder" Property="BorderThickness" Value="2" />
145+
</MultiTrigger>
146+
<MultiTrigger>
147+
<MultiTrigger.Conditions>
148+
<Condition Property="IsKeyboardFocused" Value="True" />
149+
<Condition Property="wpf:TextFieldAssist.HasTextAreaBox" Value="True" />
150+
</MultiTrigger.Conditions>
151+
<Setter TargetName="textFieldBoxBorder" Property="Margin" Value="-2" />
152+
<Setter TargetName="textFieldBoxBorder" Property="BorderThickness" Value="2" />
153+
<Setter TargetName="textFieldBoxBorder" Property="BorderBrush" Value="{DynamicResource PrimaryHueMidBrush}" />
154+
</MultiTrigger>
155+
<MultiTrigger>
156+
<MultiTrigger.Conditions>
157+
<Condition Property="Validation.HasError" Value="True" />
158+
<Condition Property="wpf:TextFieldAssist.HasTextAreaBox" Value="True" />
159+
</MultiTrigger.Conditions>
160+
<Setter TargetName="textFieldBoxBorder" Property="Margin" Value="-2" />
161+
<Setter TargetName="textFieldBoxBorder" Property="BorderThickness" Value="2" />
162+
<Setter TargetName="textFieldBoxBorder" Property="BorderBrush" Value="{DynamicResource ValidationErrorBrush}" />
163+
</MultiTrigger>
107164
</ControlTemplate.Triggers>
108165
</ControlTemplate>
109166
</Setter.Value>
@@ -123,4 +180,12 @@
123180
<Setter Property="wpf:HintAssist.IsFloating" Value="True"/>
124181
</Style>
125182

183+
<Style x:Key="MaterialDesignTextFieldBoxTextBox" TargetType="{x:Type TextBox}" BasedOn="{StaticResource MaterialDesignFloatingHintTextBox}">
184+
<Setter Property="wpf:TextFieldAssist.HasTextFieldBox" Value="True" />
185+
</Style>
186+
187+
<Style x:Key="MaterialDesignTextAreaTextBox" TargetType="{x:Type TextBox}" BasedOn="{StaticResource MaterialDesignFloatingHintTextBox}">
188+
<Setter Property="wpf:TextFieldAssist.HasTextAreaBox" Value="True" />
189+
</Style>
190+
126191
</ResourceDictionary>

0 commit comments

Comments
 (0)