CODEWITHSUNDEEP
c#uwpuwp-xamlwindows-community-toolkit
Sandeep Raja
Sandeep Raja

Reputation: 47

The text box bottom border on UWP application is not visible

I am a creating a UWP application for the first time and I am encountering a weird problem where textbox's bottom border disappears if the textbox height is less than 32 (Default textbox size).

I want the textbox to be of height 25 and not 32. So, what should I do to get the bottom border of the textbox to remain and the size of textbox be 25?

Textbox when height is 25

Textbox when height greater/equal to than 32

Upvotes: 0

Views: 1557

Answers (2)

Aleksey Vlasenko
Aleksey Vlasenko

Reputation: 1088

This is a regression in Windows 10, version 1806 (build 17763). Previous version - Fall creators update (build 16299) doesn't have this issue.

Removing MinWidth="{ThemeResource TextControlThemeMinWidth}" on a Border element in TextBox style definition as suggested above fixes it.

Upvotes: 1

Xie Steven
Xie Steven

Reputation: 8591

In short, you need to make a custom style for your TextBox.

The steps: Go to 'Document Outline -> Right click your TextBox -> Edit Template -> Edit a Copy.'

Then, find the <Border x:Name="BorderElement"> element in this style and set its MinHeight that you want.

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

enter image description here

Please note that I only change the MinHeight for it, if you input in it, you will find that Its text display is incomplete. If you want to make it look better. You need to do more customization.

Please read Tutorial: Create custom styles and Control templates for more information.

Upvotes: 3

Related Questions