WinUI 3 XAML：如何单独调整TextBox输入区域高度避免截断

这个问题的核心是WinUI 3的TextBox默认模板中，Header区域和输入区域共享控件的总高度。当你直接设置Height属性时，是压缩整个控件的高度，而Header本身需要占用一定垂直空间（默认布局下Header加上间距大概需要20左右的高度），剩下给输入区域的空间不足，就会导致输入内容被截断。

下面提供两种可行的解决思路：

1. 微调边距和内边距（快速方案） #

通过减小Header与输入区域的间距，同时压缩输入区域的内边距，来在有限的控件高度内放下完整的输入区域。

示例代码：

<TextBox
    x:Name="MyTextBox"
    Height="45"
    Width="Stretch"
    Header="A Text Box"
    HeaderMargin="0,0,0,2" <!-- 缩小Header底部的间距，默认是8左右 -->
    Padding="8,4"/> <!-- 减小输入区域的上下内边距，默认是12左右 -->

这种方法不需要修改控件模板，适合快速调整，但自定义程度有限。

2. 修改ControlTemplate（彻底自定义方案） #

如果需要更精准地控制Header和输入区域的尺寸比例，直接修改TextBox的默认模板是最优解。你可以提取默认模板后，调整内部布局的行高、元素尺寸等参数，确保输入区域不会被压缩截断。

以下是简化后的自定义模板示例，你可以根据实际需求调整细节：

<Page.Resources>
    <Style TargetType="TextBox" x:Key="CompactTextBoxStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TextBox">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/> <!-- Header行自动适应高度 -->
                            <RowDefinition Height="*"/> <!-- 剩余空间给输入区域 -->
                        </Grid.RowDefinitions>
                        
                        <!-- Header显示区域 -->
                        <ContentPresenter x:Name="HeaderContentPresenter"
                                          Grid.Row="0"
                                          Content="{TemplateBinding Header}"
                                          ContentTemplate="{TemplateBinding HeaderTemplate}"
                                          Margin="0,0,0,3"
                                          Foreground="{ThemeResource TextControlHeaderForeground}"/>
                        
                        <!-- 输入区域边框 -->
                        <Border x:Name="BorderElement"
                                Grid.Row="1"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="{TemplateBinding CornerRadius}">
                            <!-- 输入内容区域，设置最小高度避免被过度压缩 -->
                            <ScrollViewer x:Name="ContentElement"
                                          Padding="{TemplateBinding Padding}"
                                          MinHeight="26"
                                          HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                          HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                          VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                          VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                          IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                          IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                          ZoomMode="Disabled"
                                          AutomationProperties.AccessibilityView="Raw"/>
                        </Border>

                        <!-- 保留默认模板中的占位文本、水波纹等元素（按需添加） -->
                        <ContentPresenter x:Name="PlaceholderTextContentPresenter"
                                          Grid.Row="1"
                                          Content="{TemplateBinding PlaceholderText}"
                                          Foreground="{ThemeResource TextControlPlaceholderForeground}"
                                          Margin="{TemplateBinding Padding}"
                                          IsHitTestVisible="False"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<!-- 使用自定义样式的TextBox -->
<TextBox
    x:Name="MyTextBox"
    Height="45"
    Width="Stretch"
    Header="A Text Box"
    Style="{StaticResource CompactTextBoxStyle}"
    Padding="8,2"/>

使用这个自定义模板后，你可以自由设置TextBox的总高度，输入区域会在剩余空间内保持合理的最小高度，不会被截断。

内容的提问来源于stack exchange，提问作者E. A. Bagby