MaterialDesignInXamlToolkit
MaterialDesignInXamlToolkit copied to clipboard
Floating hint of TextBox is cut off
The floating hint of a TextBox is cut off even if it looks like there is enough space available. The hint doesn't go to the end of the TextBox either as demonstrated with the third TextBox in my example.
I'm using version 4.5.0 of MaterialDesignThemes.
Repository with example code.

<Window x:Class="MaterialDesignFloatingHintBug.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow"
Height="450"
Width="800"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
TextElement.FontWeight="Regular"
TextElement.FontSize="13"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextRenderingMode="Auto"
Background="{DynamicResource MaterialDesignPaper}"
FontFamily="{DynamicResource MaterialDesignFont}">
<Grid>
<StackPanel>
<materialDesign:Card Padding="32"
Margin="16">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<TextBox Style="{StaticResource MaterialDesignFloatingHintTextBox}"
Margin="5"
materialDesign:HintAssist.Hint="Short hint">Test Test</TextBox>
<TextBox Style="{StaticResource MaterialDesignFloatingHintTextBox}"
Grid.Row="1"
Margin="5"
materialDesign:HintAssist.Hint="A longer hint that should fit">Test Test</TextBox>
<TextBox Style="{StaticResource MaterialDesignFloatingHintTextBox}"
Grid.Row="2"
Margin="5"
materialDesign:HintAssist.Hint="A very very very long hint, so long it should not fit anymore">Test Test</TextBox>
</Grid>
</materialDesign:Card>
</StackPanel>
</Grid>
</Window>
Yes, I've noticed that too. It's been around for a while.
What I think is happening: When the hint is in resting position (not floating and inside the TextBox as placeholder), the SmartHint control is cut off. Then, when the TextBox control is focused, the SmartHint gets floated above the user input. At this moment some animations are happening, which change the scale and opacity of the SmartHint.
I got lost inside the animation code but my guess is one of following is the issue:
- The width of the SmartHint gets scaled
- There is no TextWrapping with overflow
- The ContentControl inside SmartHint does not detect more space after floating