Skip to content

Text field character counter #1607

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
aubiyko wants to merge 4 commits into from
Closed

Text field character counter #1607

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6cc9fe4
Added text field character counter
aubiyko Jan 13, 2020
7fd81bf
Fixed TextBox's theme resources
aubiyko Jan 13, 2020
8ab5457
Changed character counter visibility to support focused only state
aubiyko Jan 15, 2020
6c71df7
Added character counter showcase
aubiyko Jan 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 35 additions & 24 deletions MainDemo.Wpf/TextFields.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Style="{StaticResource MaterialDesignHeadline5TextBlock}">Common Fields</TextBlock>
<materialDesign:PackIcon Grid.Row="1" Grid.Column="0" Kind="Account" Foreground="{Binding ElementName=NameTextBox, Path=BorderBrush}" />
Expand Down Expand Up @@ -159,12 +160,22 @@
materialDesign:TextFieldAssist.HasClearButton="True"
materialDesign:HintAssist.HelperText="At least 8 characters"/>
</smtx:XamlDisplay>
<smtx:XamlDisplay Key="fields_8" Grid.Row="4" Grid.Column="1">
<smtx:XamlDisplay Key="fields_33" Grid.Row="4" Grid.Column="1">
<TextBox MaxLength="10"
materialDesign:TextFieldAssist.CharacterCounterVisibility="Visible"
materialDesign:HintAssist.HelperText="Character counter" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Key="fields_34" Grid.Row="4" Grid.Column="3">
<TextBox MaxLength="10"
materialDesign:TextFieldAssist.CharacterCounterVisibility="WhenFocused"
materialDesign:HintAssist.HelperText="Focused-only counter" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Key="fields_8" Grid.Row="5" Grid.Column="1">
<TextBox materialDesign:HintAssist.Hint="Floating Hint"
Style="{StaticResource MaterialDesignFloatingHintTextBox}"
VerticalAlignment="Center" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Key="fields_9" Grid.Row="4" Grid.Column="3">
<smtx:XamlDisplay Key="fields_9" Grid.Row="5" Grid.Column="3">
<ComboBox materialDesign:HintAssist.Hint="OS"
materialDesign:TextFieldAssist.HasClearButton="True"
Style="{StaticResource MaterialDesignFloatingHintComboBox}"
Expand All @@ -177,7 +188,7 @@
</ComboBox>
</smtx:XamlDisplay>

<StackPanel Grid.Row="5" Grid.Column="4" Grid.RowSpan="3" Margin="32 16 0 0">
<StackPanel Grid.Row="6" Grid.Column="4" Grid.RowSpan="3" Margin="32 16 0 0">
<TextBlock Style="{StaticResource MaterialDesignHeadline5TextBlock}">Virtualised Comboboxes</TextBlock>
<StackPanel Orientation="Horizontal" Margin="0 12 0 0">
<smtx:XamlDisplay Key="fields_10">
Expand Down Expand Up @@ -265,7 +276,7 @@
</StackPanel>
</StackPanel>

<smtx:XamlDisplay Key="fields_16" Grid.Row="5" Grid.Column="1" Margin="0 8">
<smtx:XamlDisplay Key="fields_16" Grid.Row="6" Grid.Column="1" Margin="0 8">
<TextBox Style="{StaticResource MaterialDesignFloatingHintTextBox}"
Text="Good stuff"
VerticalAlignment="Center"
Expand All @@ -279,7 +290,7 @@
</materialDesign:HintAssist.Hint>
</TextBox>
</smtx:XamlDisplay>
<smtx:XamlDisplay Key="fields_17" Grid.Row="5" Grid.Column="3" Margin="0 8">
<smtx:XamlDisplay Key="fields_17" Grid.Row="6" Grid.Column="3" Margin="0 8">
<ComboBox materialDesign:HintAssist.Hint="Search" materialDesign:TextFieldAssist.HasClearButton="True" IsEditable="True" Style="{StaticResource MaterialDesignFloatingHintComboBox}"
materialDesign:TextFieldAssist.SuffixText="sw"
materialDesign:HintAssist.HelperText="Search one fruit" >
Expand All @@ -290,18 +301,18 @@
</ComboBox>
</smtx:XamlDisplay>

<materialDesign:PackIcon Grid.Row="6" Grid.Column="0" Kind="Key"
<materialDesign:PackIcon Grid.Row="7" Grid.Column="0" Kind="Key"
Margin="0 12 0 0"
Foreground="{Binding ElementName=FloatingPasswordBox, Path=BorderBrush}" />
<smtx:XamlDisplay Key="fields_18" Grid.Row="6" Grid.Column="1" Margin="0 12 0 0">
<smtx:XamlDisplay Key="fields_18" Grid.Row="7" Grid.Column="1" Margin="0 12 0 0">
<PasswordBox x:Name="FloatingPasswordBox"
materialDesign:HintAssist.Hint="Floating Password"
materialDesign:HintAssist.Foreground="Green"
materialDesign:TextFieldAssist.UnderlineBrush="Green"
Style="{StaticResource MaterialDesignFloatingHintPasswordBox}" />
</smtx:XamlDisplay>

<smtx:XamlDisplay Key="fields_19" Grid.Row="6" Grid.Column="3">
<smtx:XamlDisplay Key="fields_19" Grid.Row="7" Grid.Column="3">
<TextBox materialDesign:HintAssist.Hint="Large Font"
materialDesign:TextFieldAssist.TextBoxViewMargin="1 0 1 0"
materialDesign:HintAssist.FloatingScale="0.50"
Expand All @@ -310,10 +321,10 @@
FontSize="24"/>
</smtx:XamlDisplay>

<TextBlock Grid.Row="7" Grid.Column="1" Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
<TextBlock Grid.Row="8" Grid.Column="1" Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
Margin="0 48 0 0">DataTemplate Test</TextBlock>

<smtx:XamlDisplay Key="fields_20" Grid.Row="8" Grid.Column="1" Grid.ColumnSpan="3" Margin="0 12 0 0" HorizontalAlignment="Left">
<smtx:XamlDisplay Key="fields_20" Grid.Row="9" Grid.Column="1" Grid.ColumnSpan="3" Margin="0 12 0 0" HorizontalAlignment="Left">
<ContentControl Content="{Binding DemoItem}">
<ContentControl.ContentTemplate>
<DataTemplate DataType="domain:DemoItem">
Expand All @@ -327,9 +338,9 @@
</ContentControl.ContentTemplate>
</ContentControl>
</smtx:XamlDisplay>
<TextBlock Grid.Row="9" Grid.Column="1" Grid.ColumnSpan="2" Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
<TextBlock Grid.Row="10" Grid.Column="1" Grid.ColumnSpan="2" Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
Margin="0 16 0 0">DataTemplateSelector Test</TextBlock>
<smtx:XamlDisplay Key="fields_21" Grid.Row="10" Grid.Column="1" Grid.ColumnSpan="3" Margin="0 12 0 0" HorizontalAlignment="Left">
<smtx:XamlDisplay Key="fields_21" Grid.Row="11" Grid.Column="1" Grid.ColumnSpan="3" Margin="0 12 0 0" HorizontalAlignment="Left">
<ContentControl Content="{Binding DemoItem}">
<ContentControl.ContentTemplateSelector>
<domain1:SimpleDataTemplateSelector>
Expand All @@ -347,9 +358,9 @@
</ContentControl.ContentTemplateSelector>
</ContentControl>
</smtx:XamlDisplay>
<TextBlock Grid.Row="9" Grid.Column="4" Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
<TextBlock Grid.Row="10" Grid.Column="4" Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
Margin="0 48 0 0">Tight Space Validation</TextBlock>
<StackPanel Orientation="Horizontal" Grid.Row="10" Grid.Column="4">
<StackPanel Orientation="Horizontal" Grid.Row="11" Grid.Column="4">
<smtx:XamlDisplay Key="fields_22" HorizontalAlignment="Left">
<TextBox Width="20"
materialDesign:ValidationAssist.UsePopup="True"
Expand Down Expand Up @@ -380,7 +391,7 @@
</TextBox>
</smtx:XamlDisplay>
</StackPanel>
<smtx:XamlDisplay Key="fields_23" Grid.Row="11" Grid.Column="4" Grid.RowSpan="2" HorizontalAlignment="Left">
<smtx:XamlDisplay Key="fields_23" Grid.Row="12" Grid.Column="4" Grid.RowSpan="2" HorizontalAlignment="Left">
<StackPanel>
<CheckBox x:Name="DisplaySelectedItemCheckBox"
IsThreeState="False"
Expand All @@ -395,7 +406,7 @@
</StackPanel>
</smtx:XamlDisplay>

<smtx:XamlDisplay Key="fields_24" Grid.Row="13" Grid.Column="4" Grid.RowSpan="2" HorizontalAlignment="Left">
<smtx:XamlDisplay Key="fields_24" Grid.Row="14" Grid.Column="4" Grid.RowSpan="2" HorizontalAlignment="Left">
<StackPanel>
<CheckBox x:Name="ClassicModeCheckBox"
IsThreeState="False" IsChecked="True"
Expand All @@ -410,8 +421,8 @@
</StackPanel>
</smtx:XamlDisplay>

<TextBlock Grid.Row="13" Grid.Column="1" Grid.ColumnSpan="3" Style="{StaticResource MaterialDesignHeadline5TextBlock}" Margin="0,32,0,16">Filled text field</TextBlock>
<smtx:XamlDisplay Key="fields_25" Grid.Row="14" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="3">
<TextBlock Grid.Row="14" Grid.Column="1" Grid.ColumnSpan="3" Style="{StaticResource MaterialDesignHeadline5TextBlock}" Margin="0,32,0,16">Filled text field</TextBlock>
<smtx:XamlDisplay Key="fields_25" Grid.Row="15" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="3">
<StackPanel>
<CheckBox x:Name="MaterialDesignFilledTextFieldTextBoxEnabledComboBox"
IsChecked="True" Margin="0,0,0,8">Enabled</CheckBox>
Expand All @@ -421,8 +432,8 @@
</StackPanel>
</smtx:XamlDisplay>

<TextBlock Grid.Row="15" Grid.Column="4" Style="{StaticResource MaterialDesignHeadline5TextBlock}" Margin="32,32,0,16">Outlined text field</TextBlock>
<smtx:XamlDisplay Key="fields_26" Grid.Row="16" Grid.Column="4" Grid.RowSpan="2">
<TextBlock Grid.Row="16" Grid.Column="4" Style="{StaticResource MaterialDesignHeadline5TextBlock}" Margin="32,32,0,16">Outlined text field</TextBlock>
<smtx:XamlDisplay Key="fields_26" Grid.Row="17" Grid.Column="4" Grid.RowSpan="2">
<StackPanel>
<CheckBox x:Name="MaterialDesignOutlinedTextFieldTextBoxEnabledComboBox"
IsChecked="True" Margin="32,0,0,8">Enabled</CheckBox>
Expand All @@ -432,8 +443,8 @@
</StackPanel>
</smtx:XamlDisplay>

<TextBlock Grid.Row="16" Grid.Column="1" Grid.ColumnSpan="3" Style="{StaticResource MaterialDesignHeadline5TextBlock}" Margin="0,32,0,16">Filled password field</TextBlock>
<smtx:XamlDisplay Key="fields_28" Grid.Row="17" Grid.Column="1" Grid.ColumnSpan="3">
<TextBlock Grid.Row="17" Grid.Column="1" Grid.ColumnSpan="3" Style="{StaticResource MaterialDesignHeadline5TextBlock}" Margin="0,32,0,16">Filled password field</TextBlock>
<smtx:XamlDisplay Key="fields_28" Grid.Row="18" Grid.Column="1" Grid.ColumnSpan="3">
<StackPanel>
<CheckBox x:Name="MaterialDesignFilledPasswordFieldPasswordBoxEnabledComboBox"
IsChecked="True" Margin="0,0,0,8">Enabled</CheckBox>
Expand All @@ -444,8 +455,8 @@
</StackPanel>
</smtx:XamlDisplay>

<TextBlock Grid.Row="18" Grid.Column="4" Style="{StaticResource MaterialDesignHeadline5TextBlock}" Margin="32,32,0,16">Outlined password field</TextBlock>
<smtx:XamlDisplay Key="fields_29" Grid.Row="19" Grid.Column="4" Margin="32,0,0,0">
<TextBlock Grid.Row="19" Grid.Column="4" Style="{StaticResource MaterialDesignHeadline5TextBlock}" Margin="32,32,0,16">Outlined password field</TextBlock>
<smtx:XamlDisplay Key="fields_29" Grid.Row="20" Grid.Column="4" Margin="32,0,0,0">
<StackPanel>
<CheckBox x:Name="MaterialDesignOutlinedPasswordFieldPasswordBoxEnabledComboBox"
IsChecked="True" Margin="0,0,0,8">Enabled</CheckBox>
Expand Down
23 changes: 23 additions & 0 deletions MaterialDesignThemes.Wpf/CharacterCounterVisibility.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
using System.Windows.Controls;

namespace MaterialDesignThemes.Wpf
{
/// <summary>
/// Specifies the display state of the text field's character counter.
/// </summary>
public enum CharacterCounterVisibility
{
/// <summary>
/// Do not display.
/// </summary>
Collapsed,
/// <summary>
/// Display if both <see cref="TextBox.MaxLength"/> is non-zero and it's focused.
/// </summary>
WhenFocused,
/// <summary>
/// Display if <see cref="TextBox.MaxLength"/> is non-zero.
/// </summary>
Visible
}
}
22 changes: 19 additions & 3 deletions MaterialDesignThemes.Wpf/TextFieldAssist.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,15 +308,15 @@ private static void TextBoxOnContextMenuClosing(object sender, ContextMenuEventA
private static void RemoveSpellingSuggestions(ContextMenu menu)
{
foreach (FrameworkElement item in (from item in menu.Items.OfType<FrameworkElement>()
where ReferenceEquals(item.Tag, typeof(Spelling))
select item).ToList())
where ReferenceEquals(item.Tag, typeof(Spelling))
select item).ToList())
{
menu.Items.Remove(item);
}
}

/// <summary>
/// Controls the visbility of the clear button.
/// Controls the visibility of the clear button.
/// </summary>
public static readonly DependencyProperty HasClearButtonProperty = DependencyProperty.RegisterAttached(
"HasClearButton", typeof(bool), typeof(TextFieldAssist), new PropertyMetadata(false, HasClearButtonChanged));
Expand Down Expand Up @@ -383,6 +383,22 @@ public static string GetSuffixText(DependencyObject element)
return (string)element.GetValue(SuffixTextProperty);
}

/// <summary>
/// Controls the visibility of the character counter.
/// </summary>
public static readonly DependencyProperty CharacterCounterVisibilityProperty = DependencyProperty.RegisterAttached(
"CharacterCounterVisibility", typeof(CharacterCounterVisibility), typeof(TextFieldAssist), new PropertyMetadata(CharacterCounterVisibility.Collapsed));

public static void SetCharacterCounterVisibility(DependencyObject element, CharacterCounterVisibility value)
{
element.SetValue(CharacterCounterVisibilityProperty, value);
}

public static bool GetCharacterCounterVisibility(DependencyObject element)
{
return (bool)element.GetValue(CharacterCounterVisibilityProperty);
}

#region Methods

/// <summary>
Expand Down
Loading