为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

C#
白衣非少年 2022-11-21 21:24:28

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

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

http://img1.sycdn.imooc.com/637b7c1f0001c17e03550047.jpg

http://img1.sycdn.imooc.com/637b7c250001aeb503600051.jpg

查看完整描述

2 回答

?
慕娘9325324

TA贡献1491条经验 获得超4个赞

简而言之,您需要为您的 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>

//img1.sycdn.imooc.com/637b7c320001e2db06600039.jpg

请注意,我只是为它更改了MinHeight,如果你输入它,你会发现它的文字显示不完整。如果你想让它看起来更好。你需要做更多的定制。

请阅读教程:创建自定义样式控件模板以获取更多信息。


查看完整回答
反对 回复 2022-11-21
?
FFIVE

TA贡献1485条经验 获得超5个赞

这是 Windows 10 版本 1806(内部版本 17763)中的回归。以前的版本 - Fall creators update (build 16299) 没有这个问题。

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


查看完整回答
反对 回复 2022-11-21
  • 2 回答
  • 0 关注
  • 9 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信