UWP 应用程序上的文本框底部边框不可见答案

【问题标题】：The text box bottom border on UWP application is not visibleUWP 应用程序上的文本框底部边框不可见
【发布时间】：2023-03-24 20:20:01
【问题描述】：

我是第一次创建 UWP 应用程序，我遇到了一个奇怪的问题，如果文本框高度小于 32（默认文本框大小），文本框的底部边框会消失。

我希望文本框的高度为 25 而不是 32。那么，我应该怎么做才能使文本框的底部边框保持不变并且文本框的大小为 25？

【问题讨论】：

标签： c# uwp uwp-xaml windows-community-toolkit

【解决方案1】：

简而言之，您需要为您的 TextBox 制作自定义样式。

步骤：转到'文档大纲->右键单击您的文本框->编辑模板->编辑副本。'

然后，找到此样式中的<Border x:Name="BorderElement"> 元素并设置您想要的MinHeight。

<Page.Resources>
    <Style x:Key="TextBoxStyle1" TargetType="TextBox">
        ...
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TextBox">
                    <Grid>
                        ...
                        <ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.ColumnSpan="2" Grid.Column="0" FontWeight="Normal" Foreground="{ThemeResource TextControlHeaderForeground}" Margin="{StaticResource TextBoxTopHeaderMargin}" Grid.Row="0" TextWrapping="Wrap" VerticalAlignment="Top" Visibility="Collapsed" x:DeferLoadStrategy="Lazy" />
                        <Border x:Name="BorderElement" MinHeight="25" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}" Grid.ColumnSpan="2" Grid.Column="0" Control.IsTemplateFocusTarget="True"  MinWidth="{ThemeResource TextControlThemeMinWidth}" Grid.RowSpan="1" Grid.Row="1" />
                        <ScrollViewer x:Name="ContentElement" AutomationProperties.AccessibilityView="Raw" Grid.Column="0" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsTabStop="False" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" ZoomMode="Disabled" />
                        <TextBlock x:Name="PlaceholderTextContentPresenter" Grid.ColumnSpan="2" Grid.Column="0" Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource Mode=TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForeground}}" IsHitTestVisible="False" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" Text="{TemplateBinding PlaceholderText}" TextWrapping="{TemplateBinding TextWrapping}" TextAlignment="{TemplateBinding TextAlignment}" />
                        <Button x:Name="DeleteButton" AutomationProperties.AccessibilityView="Raw" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1" FontSize="{TemplateBinding FontSize}" IsTabStop="False" MinWidth="34" Margin="{ThemeResource HelperButtonThemePadding}" Grid.Row="1" Style="{StaticResource DeleteButtonStyle}" VerticalAlignment="Stretch" Visibility="Collapsed" />
                        <ContentPresenter x:Name="DescriptionPresenter" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Description}" Grid.ColumnSpan="2" Grid.Column="0" Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" Grid.Row="2" x:Load="False" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>
<Grid>
    <TextBox Style="{StaticResource TextBoxStyle1}" Height="25"></TextBox>
</Grid>

请注意，我只是为它更改了MinHeight，如果你输入它，你会发现它的文本显示不完整。如果你想让它看起来更好。您需要进行更多自定义。

请阅读Tutorial: Create custom styles 和Control templates 了解更多信息。

【讨论】：

【解决方案2】：

这是 Windows 10 版本 1806（内部版本 17763）中的回归。以前的版本 - 秋季创作者更新（内部版本 16299）没有这个问题。

按照上面的建议在 TextBox 样式定义中的 Border 元素上删除 MinWidth="{ThemeResource TextControlThemeMinWidth}" 可以修复它。

【讨论】：