如何减少文本框尺寸

Question

我正在使用 MDIX 框架，它提供了一个名为 MaterialDesignTextFieldBoxTextBox 的 Style 资源。当我应用该样式时，我会得到一个非常大的维度 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>

这样 hint 就会消失：

我该如何处理？

Answer 1

使用 MDIX v2.4.0（最新）。

如果您在没有任何更改的情况下单独查看样式，您会得到如下内容：

这里有三种 MDIX 风格值得一看：

MaterialDesignTextBox 是 MDIX 中的 base TextBox style。
MaterialDesignFloatingHintTextBox 派生自 MaterialDesignTextBox 和 sets HintAssist.IsFloating to true。这是上图中的浮动蓝色 "Search" 文本。
MaterialDesignTextAreaTextBox 派生自 MaterialDesignFloatingHintTextBox 和 sets TextFieldAssist.HasTextAreaBox to true。

手动将高度设置得较短的最大问题是文本框周围的灰色区域。当您设置 TextFieldAssist.HasTextAreaBox=true 时，它会打开。这个区域简直就是一个border control when that property gets set to true, it 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>

如何减少文本框尺寸

How to reduce TextBox dimension

wpf

xaml

material-design-in-xaml