如何减少TextBox维度

Question

我正在使用MDIX框架，该框架提供名为Style的{​​{1}}资源。当我应用这种风格时，我会为MaterialDesignTextFieldBoxTextBox获得一个非常大的维度：

TextBox

（我不知道为什么图像不会出现。）

无论如何，我想减少那个控件的高度。我尝试使用此代码：

<TextBox materialDesign:HintAssist.Hint="Search" Style="{StaticResource MaterialDesignTextFieldBoxTextBox}" />

这样 <TextBox materialDesign:HintAssist.Hint="{DynamicResource search}"> <TextBox.Resources> <Style TargetType="TextBox" BasedOn="{StaticResource MaterialDesignTextFieldBoxTextBox}"> <Setter Property="Height" Value="30" /> </Style> </TextBox.Resources> </TextBox> 将消失：

我该怎么处理？

Answer 1

使用MDIX v2.4.0（最新版）。

如果您自己查看样式而不做任何更改，您会得到以下内容：

有三种MDIX样式值得一看：

1. MaterialDesignTextBox是MDIX中的base TextBox style。
2. MaterialDesignFloatingHintTextBox派生自MaterialDesignTextBox和sets HintAssist.IsFloating to true。这是从上图中浮动的蓝色“搜索”文字。
3. MaterialDesignTextAreaTextBox派生自MaterialDesignFloatingHintTextBox和sets TextFieldAssist.HasTextAreaBox to true。

手动将高度设置得更短的最大问题是文本框周围的灰色区域。设置TextFieldAssist.HasTextAreaBox=true时会启用此功能。当该属性设置为true时，此区域只是border control，sets several properties on that border。特别注意边距和填充设置器。这些都是关于特定最小尺寸的假设。 另一个问题是HintAssist.IsFloating=true。当您在文本框周围设置它allocates some of the space以显示提示时。

启用这两个属性后，您将无法将文本框的大小减小到30并仍然可以使用所有这些功能。您可以简单地关闭它们，但此时您将保留基础MaterialDesignTextBox样式。

我觉得这样的事情就是你想要的。

<TextBox materialDesign:HintAssist.Hint="Search">
    <TextBox.Resources>
        <Style TargetType="TextBox" BasedOn="{StaticResource MaterialDesignTextBox}">
            <Setter Property="Height" Value="30" />
        </Style>
    </TextBox.Resources>
</TextBox>

如果要启用浮动提示或文本区域边框，则需要增加高度。

修改 如果要模拟文本区域边框的外观，可以将TextBox包装在这样的边框中：

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