wpfxamlmaterial-design-in-xaml

How to reduce TextBox dimension


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}" />

enter image description here

(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:

enter image description here

how can I handle that?


Solution

  • Working with MDIX v2.4.0 (latest).

    If you look at the style on its own without any changes you get something like this: enter image description here

    There are three MDIX styles worth looking at here:

    1. MaterialDesignTextBox is the base TextBox style in MDIX.
    2. MaterialDesignFloatingHintTextBox derives from MaterialDesignTextBox and sets HintAssist.IsFloating to true. This is that floating blue "Search" text from the above image.
    3. MaterialDesignTextAreaTextBox derives from MaterialDesignFloatingHintTextBoxand 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>