Skip to content

[RFC] New TextBox style #3461

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
nicolaihenriksen wants to merge 6 commits into from
Closed

[RFC] New TextBox style #3461

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
74fbbe3
WIP
nicolaihenriksen Feb 12, 2024
2d00882
Move VerticalAlignmentConverter to its own file
nicolaihenriksen Feb 16, 2024
a2236d2
New TextBox style looking very similar to the old apart from the hint…
nicolaihenriksen Feb 16, 2024
7205a85
SmartHintNew (copy) in place. Now it must be reworked to get rid of m…
nicolaihenriksen Feb 16, 2024
92a647d
Additions to SmartHint demo app page
nicolaihenriksen Feb 17, 2024
33487d1
Remove debug color from new SmartHint
nicolaihenriksen Feb 17, 2024
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
Prev Previous commit
Next Next commit
Additions to SmartHint demo app page
  • Loading branch information
@nicolaihenriksen
nicolaihenriksen committed Feb 17, 2024
commit 92a647da5f31a33c06fced8141c1e2890b58e14e
13 changes: 13 additions & 0 deletions MainDemo.Wpf/Domain/SmartHintViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ internal class SmartHintViewModel : ViewModelBase
private double _selectedFontSize = double.NaN;
private FontFamily? _selectedFontFamily = DefaultFontFamily;
private bool? controlsEnabled = true;
private int _maxLength = 50;

public IEnumerable<FloatingHintHorizontalAlignment> HorizontalAlignmentOptions { get; } = Enum.GetValues(typeof(FloatingHintHorizontalAlignment)).OfType<FloatingHintHorizontalAlignment>();
public IEnumerable<double> FloatingScaleOptions { get; } = new[] {0.25, 0.5, 0.75, 1.0};
Expand Down Expand Up @@ -235,4 +236,16 @@ public bool? ControlsEnabled
get => controlsEnabled;
set => SetProperty(ref controlsEnabled, value);
}

public bool? ShowCharacterCounter
{
get => MaxLength > 0;
set => MaxLength = value == true ? 50 : 0;
}

public int MaxLength
{
get => _maxLength;
set => SetProperty(ref _maxLength, value);
}
}
38 changes: 34 additions & 4 deletions MainDemo.Wpf/SmartHint.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,10 @@
IsEnabled="{Binding ElementName=CheckBoxTrailingIcon, Path=IsChecked}"
ItemsSource="{Binding IconSizeOptions}"
SelectedItem="{Binding SelectedTrailingIconSize, Mode=TwoWay}" />
<CheckBox x:Name="CheckBoxCharacterCounter"
Margin="20,0,0,0"
Content="CharacterCounter"
IsChecked="{Binding ShowCharacterCounter}"/>
</StackPanel>
</StackPanel>
</GroupBox>
Expand Down Expand Up @@ -255,8 +259,11 @@
<!-- Invisible controls only used to be able to fallback to default style values -->
<StackPanel Grid.Row="3" Visibility="Collapsed">
<TextBox x:Name="MaterialDesignFloatingHintTextBoxDefaults" Style="{StaticResource MaterialDesignFloatingHintTextBox}" />
<TextBox x:Name="MaterialDesignFloatingHintTextBoxNewDefaults" Style="{StaticResource MaterialDesignFloatingHintTextBoxNew}" />
<TextBox x:Name="MaterialDesignFilledTextBoxDefaults" Style="{StaticResource MaterialDesignFilledTextBox}" />
<TextBox x:Name="MaterialDesignFilledTextBoxNewDefaults" Style="{StaticResource MaterialDesignFilledTextBoxNew}" />
<TextBox x:Name="MaterialDesignOutlinedTextBoxDefaults" Style="{StaticResource MaterialDesignOutlinedTextBox}" />
<TextBox x:Name="MaterialDesignOutlinedTextBoxNewDefaults" Style="{StaticResource MaterialDesignOutlinedTextBoxNew}" />
<RichTextBox x:Name="MaterialDesignRichTextBoxDefaults" Style="{StaticResource MaterialDesignRichTextBox}" />
<PasswordBox x:Name="MaterialDesignFloatingHintPasswordBoxDefaults" Style="{StaticResource MaterialDesignFloatingHintPasswordBox}" />
<PasswordBox x:Name="MaterialDesignFilledPasswordBoxDefaults" Style="{StaticResource MaterialDesignFilledPasswordBox}" />
Expand Down Expand Up @@ -289,7 +296,12 @@
IsEnabled="{Binding ControlsEnabled}">

<!-- TextBoxNew variants -->
<TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}" Text="TextBoxNew styles" />
<StackPanel Orientation="Horizontal">
<TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}" Text="TextBoxNew styles" />
<CheckBox x:Name="TextBoxesAcceptsReturnCheckBox"
Margin="20,0,0,0"
Content="AcceptsReturn" />
</StackPanel>
<Grid HorizontalAlignment="Stretch">
<Grid.Resources>
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource MaterialDesignFloatingHintTextBoxNew}">
Expand All @@ -298,7 +310,7 @@
<Setter Property="Padding">
<Setter.Value>
<MultiBinding Converter="{StaticResource CustomPaddingConverter}">
<Binding ElementName="MaterialDesignFloatingHintTextBoxDefaults" Path="Padding" />
<Binding ElementName="MaterialDesignFloatingHintTextBoxNewDefaults" Path="Padding" />
<Binding Path="ApplyCustomPadding" />
<Binding Path="SelectedCustomPadding" />
</MultiBinding>
Expand All @@ -318,6 +330,8 @@
<Setter Property="materialDesign:TextFieldAssist.SuffixText" Value="{Binding SuffixText}" />
<Setter Property="materialDesign:TextFieldAssist.TrailingIcon" Value="{StaticResource TrailingIcon}" />
<Setter Property="materialDesign:TextFieldAssist.TrailingIconSize" Value="{Binding SelectedTrailingIconSize}" />
<Setter Property="AcceptsReturn" Value="{Binding ElementName=TextBoxesAcceptsReturnCheckBox, Path=IsChecked}" />
<Setter Property="MaxLength" Value="{Binding MaxLength}" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
Expand All @@ -332,6 +346,7 @@
<smtx:XamlDisplay Grid.Column="1" UniqueKey="textbox_floating_new_left">
<TextBox HorizontalContentAlignment="Left" />
</smtx:XamlDisplay>
<!--
<smtx:XamlDisplay Grid.Column="2" UniqueKey="textbox_floating_new_center">
<TextBox HorizontalContentAlignment="Center" />
</smtx:XamlDisplay>
Expand All @@ -341,6 +356,7 @@
<smtx:XamlDisplay Grid.Column="4" UniqueKey="textbox_floating_new_stretch">
<TextBox HorizontalContentAlignment="Stretch" />
</smtx:XamlDisplay>
-->
</Grid>
<Grid>
<Grid.Resources>
Expand All @@ -350,7 +366,7 @@
<Setter Property="Padding">
<Setter.Value>
<MultiBinding Converter="{StaticResource CustomPaddingConverter}">
<Binding ElementName="MaterialDesignFilledTextBoxDefaults" Path="Padding" />
<Binding ElementName="MaterialDesignFilledTextBoxNewDefaults" Path="Padding" />
<Binding Path="ApplyCustomPadding" />
<Binding Path="SelectedCustomPadding" />
</MultiBinding>
Expand All @@ -370,6 +386,8 @@
<Setter Property="materialDesign:TextFieldAssist.SuffixText" Value="{Binding SuffixText}" />
<Setter Property="materialDesign:TextFieldAssist.TrailingIcon" Value="{StaticResource TrailingIcon}" />
<Setter Property="materialDesign:TextFieldAssist.TrailingIconSize" Value="{Binding SelectedTrailingIconSize}" />
<Setter Property="AcceptsReturn" Value="{Binding ElementName=TextBoxesAcceptsReturnCheckBox, Path=IsChecked}" />
<Setter Property="MaxLength" Value="{Binding MaxLength}" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
Expand All @@ -384,6 +402,7 @@
<smtx:XamlDisplay Grid.Column="1" UniqueKey="textbox_filled_new_left">
<TextBox HorizontalContentAlignment="Left" />
</smtx:XamlDisplay>
<!--
<smtx:XamlDisplay Grid.Column="2" UniqueKey="textbox_filled_new_center">
<TextBox HorizontalContentAlignment="Center" />
</smtx:XamlDisplay>
Expand All @@ -393,6 +412,7 @@
<smtx:XamlDisplay Grid.Column="4" UniqueKey="textbox_filled_new_stretch">
<TextBox HorizontalContentAlignment="Stretch" />
</smtx:XamlDisplay>
-->
</Grid>
<Grid>
<Grid.Resources>
Expand All @@ -402,7 +422,7 @@
<Setter Property="Padding">
<Setter.Value>
<MultiBinding Converter="{StaticResource CustomPaddingConverter}">
<Binding ElementName="MaterialDesignOutlinedTextBoxDefaults" Path="Padding" />
<Binding ElementName="MaterialDesignOutlinedTextBoxNewDefaults" Path="Padding" />
<Binding Path="ApplyCustomPadding" />
<Binding Path="SelectedCustomPadding" />
</MultiBinding>
Expand All @@ -422,6 +442,8 @@
<Setter Property="materialDesign:TextFieldAssist.SuffixText" Value="{Binding SuffixText}" />
<Setter Property="materialDesign:TextFieldAssist.TrailingIcon" Value="{StaticResource TrailingIcon}" />
<Setter Property="materialDesign:TextFieldAssist.TrailingIconSize" Value="{Binding SelectedTrailingIconSize}" />
<Setter Property="AcceptsReturn" Value="{Binding ElementName=TextBoxesAcceptsReturnCheckBox, Path=IsChecked}" />
<Setter Property="MaxLength" Value="{Binding MaxLength}" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
Expand All @@ -436,6 +458,7 @@
<smtx:XamlDisplay Grid.Column="1" UniqueKey="textbox_outlined_new_left">
<TextBox HorizontalContentAlignment="Left" />
</smtx:XamlDisplay>
<!--
<smtx:XamlDisplay Grid.Column="2" UniqueKey="textbox_outlined_new_center">
<TextBox HorizontalContentAlignment="Center" />
</smtx:XamlDisplay>
Expand All @@ -445,6 +468,7 @@
<smtx:XamlDisplay Grid.Column="4" UniqueKey="textbox_outlined_new_stretch">
<TextBox HorizontalContentAlignment="Stretch" />
</smtx:XamlDisplay>
-->
</Grid>

<!-- TextBox variants -->
Expand Down Expand Up @@ -479,6 +503,8 @@
<Setter Property="materialDesign:TextFieldAssist.SuffixText" Value="{Binding SuffixText}" />
<Setter Property="materialDesign:TextFieldAssist.TrailingIcon" Value="{StaticResource TrailingIcon}" />
<Setter Property="materialDesign:TextFieldAssist.TrailingIconSize" Value="{Binding SelectedTrailingIconSize}" />
<Setter Property="AcceptsReturn" Value="{Binding ElementName=TextBoxesAcceptsReturnCheckBox, Path=IsChecked}" />
<Setter Property="MaxLength" Value="{Binding MaxLength}" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
Expand Down Expand Up @@ -531,6 +557,8 @@
<Setter Property="materialDesign:TextFieldAssist.SuffixText" Value="{Binding SuffixText}" />
<Setter Property="materialDesign:TextFieldAssist.TrailingIcon" Value="{StaticResource TrailingIcon}" />
<Setter Property="materialDesign:TextFieldAssist.TrailingIconSize" Value="{Binding SelectedTrailingIconSize}" />
<Setter Property="AcceptsReturn" Value="{Binding ElementName=TextBoxesAcceptsReturnCheckBox, Path=IsChecked}" />
<Setter Property="MaxLength" Value="{Binding MaxLength}" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
Expand Down Expand Up @@ -583,6 +611,8 @@
<Setter Property="materialDesign:TextFieldAssist.SuffixText" Value="{Binding SuffixText}" />
<Setter Property="materialDesign:TextFieldAssist.TrailingIcon" Value="{StaticResource TrailingIcon}" />
<Setter Property="materialDesign:TextFieldAssist.TrailingIconSize" Value="{Binding SelectedTrailingIconSize}" />
<Setter Property="AcceptsReturn" Value="{Binding ElementName=TextBoxesAcceptsReturnCheckBox, Path=IsChecked}" />
<Setter Property="MaxLength" Value="{Binding MaxLength}" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
Expand Down