I'm using the MDIX
framework which provide a Style
resource called MaterialDesignTextFieldBoxTextBox
. When I apply that style I'll get a very big dimension for the TextBox
:
<TextBox materialDesign:HintAssist.Hint="Search" Style="{StaticResource MaterialDesignTextFieldBoxTextBox}" />
(I don't know why the image doesn't appear.)
Anyway, I want to reduce the height of that control. I tried using this code:
<TextBox materialDesign:HintAssist.Hint="{DynamicResource search}">
<TextBox.Resources>
<Style TargetType="TextBox" BasedOn="{StaticResource MaterialDesignTextFieldBoxTextBox}">
<Setter Property="Height" Value="30" />
</Style>
</TextBox.Resources>
</TextBox>
with this the hint
will disappear:
how can I handle that?
Working with MDIX v2.4.0 (latest).
If you look at the style on its own without any changes you get something like this:
There are three MDIX styles worth looking at here:
MaterialDesignTextBox
is the base TextBox style in MDIX.MaterialDesignFloatingHintTextBox
derives from MaterialDesignTextBox
and sets HintAssist.IsFloating
to true. This is that floating blue "Search" text from the above image.MaterialDesignTextAreaTextBox
derives from MaterialDesignFloatingHintTextBox
and sets TextFieldAssist.HasTextAreaBox
to true. The biggest issue with manually setting the height to be shorter is that gray area around the text box. That is turned on when you set TextFieldAssist.HasTextAreaBox=true
. This area is simply a border control when that property gets set to true, it sets several properties on that border. Specifically note the margin and padding setters. These are all making assumptions about a particular minimum size.
The other issue is the HintAssist.IsFloating=true
. When you set this it allocates some of the space around the text box for displaying the hint.
With both of these properties enabled, you will not be able to reduce the size of the text box down to 30 and still have all of those features work. You can simply turn them, off but at that point you are left with the base MaterialDesignTextBox
style.
I think something like this is what you want.
<TextBox materialDesign:HintAssist.Hint="Search">
<TextBox.Resources>
<Style TargetType="TextBox" BasedOn="{StaticResource MaterialDesignTextBox}">
<Setter Property="Height" Value="30" />
</Style>
</TextBox.Resources>
</TextBox>
If you want to enable the floating hint or the text area border you will need to increase the height.
EDIT: If you want to simulate the look of the the the text area border you can wrap the TextBox in a border like this:
<Border CornerRadius="4" Background="{DynamicResource MaterialDesignTextFieldBoxBackground}" Padding="0,0,0,4">
<TextBox materialDesign:HintAssist.Hint="Search">
<TextBox.Resources>
<Style TargetType="TextBox" BasedOn="{StaticResource MaterialDesignTextBox}">
<Setter Property="Height" Value="30" />
</Style>
</TextBox.Resources>
</TextBox>
</Border>