Hi everyone. I have a textbox with a placeholder and a button inside. I'd like to add an ellipsis at the end of the placeholder text but before the button. If the placeholder text is longer than the area available, the ellipsis must be added. The image attached shows the placeholder and a red button. The ellipsis must be on the left side of the button. Obs: I have to deal with different languages and different letter symbols. The expected result in the perfect world: or something like this, disregarding the button:

Add ellipsis in placeholder UWP

Accepted answer

Junjie Zhu - MSFT 14,751 Microsoft Vendor

Welcome to Microsoft Q&A!

or something like this, disregarding the button:

For this effect, you only need to add TextTrimming="CharacterEllipsis" to the PlaceholderTextContentPresenter in the Textbox style.

1.Open the xaml designer, find your Textbox, right click it. User's image

2.Select Edit Template -> Edit a Copy.

User's image

3.Name it and click OK.

4.Find <TextBlock x:Name="PlaceholderTextContentPresenter"... , add TextTrimming="CharacterEllipsis"

5.Use this new style in your TextBox.

...
<TextBlock x:Name="PlaceholderTextContentPresenter" 
           Grid.ColumnSpan="2" Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource Mode=TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForeground}}" 
           IsHitTestVisible="False" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" 
           Grid.Row="1" TextAlignment="{TemplateBinding TextAlignment}" TextWrapping="{TemplateBinding TextWrapping}" 
           Text="{TemplateBinding PlaceholderText}"
           TextTrimming="CharacterEllipsis"/>
...
<TextBox Style="{StaticResource TextBoxPlaceholderStyle}" PlaceholderText="A text box that demonstrates TextWrapping, TextAlignment, MaxLength, and AcceptsReturn"  
 Width="300"/>

Could you please provide the code of how you add a button to the textbox? Maybe I can help you achieve the expected effect.

Thank you.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Anderson Rodrigues Cavalcante 271 Reputation points

2024-03-15T15:53:11.41+00:00

Hi @Junjie Zhu - MSFT , thanks for your answer. I'll try p create a test application and pass the code.

But, my Visual Studio is unabling the option to Edit a Copy. Soon I'll answer again. Thanks.

Anderson Rodrigues Cavalcante 271

Resolved:

<Page.Resources>

   <Style x:Key="TextBoxStyle1" TargetType="TextBox">

       <Setter Target="FontFamily" Value="Segoe UI" />

       <Setter Property="Foreground" Value="#cacacc" />

       <Setter Property="FontSize" Value="12" />

       <Setter Property="BorderThickness" Value="1" />

       <Setter Property="TextAlignment" Value="Center" />

       <Setter Property="FontWeight" Value="SemiBold" />

       <Setter Property="HorizontalAlignment" Value="Center" />

       <Setter Property="VerticalAlignment" Value="Center" />

       <Setter Property="Padding" Value="0,0,0,4" />

       <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />

       <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />

       <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />

       <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />

       <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />

       <Setter Property="UseSystemFocusVisuals" Value="False" />

       <Setter Property="Template">

           <Setter.Value>

               <ControlTemplate TargetType="TextBox">

                   <Grid Height="{TemplateBinding Height}">

                       <Grid.ColumnDefinitions>

                           <ColumnDefinition Width="*" />

                           <ColumnDefinition Width="Auto" />

                           <ColumnDefinition Width="Auto" />

                       </Grid.ColumnDefinitions>

                       <Grid.RowDefinitions>

                           <RowDefinition Height="Auto" />

                           <RowDefinition Height="*" />

                       </Grid.RowDefinitions>

                       <Border

                           x:Name="BorderElement"

                           Grid.Row="1"

                           Grid.RowSpan="1"

                           Grid.ColumnSpan="3"

                           Height="{TemplateBinding Height}"

                           Background="{TemplateBinding Background}"

                           BorderBrush="#8b8b8c"

                           BorderThickness="2"

                           CornerRadius="18" />

                       <ContentPresenter

                           x:Name="HeaderContentPresenter"

                           Grid.Row="0"

                           Grid.ColumnSpan="3"

                           Margin="0,0,0,8"

                           x:DeferLoadStrategy="Lazy"

                           Content="{TemplateBinding Header}"

                           ContentTemplate="{TemplateBinding HeaderTemplate}"

                           FontWeight="Normal"

                           Foreground="{ThemeResource TextControlHeaderForeground}"

                           TextWrapping="Wrap"

                           Visibility="Collapsed" />

                       <ScrollViewer

                           x:Name="ContentElement"

                           Grid.Row="1"

                           Height="{TemplateBinding Height}"

                           Margin="{TemplateBinding Margin}"

                           Padding="20,9,3,8"

                           AutomationProperties.AccessibilityView="Raw"

                           FontWeight="SemiBold"

                           HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"

                           HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"

                           IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"

                           IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"

                           IsTabStop="False"

                           IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"

                           VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"

                           VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"

                           ZoomMode="Disabled" />

                       <TextBlock

                           x:Name="PlaceholderTextContentPresenter"

                           Grid.Row="1"

                           Grid.ColumnSpan="3"

                           Padding="20,8,50,8"

                           VerticalAlignment="Center"

                           FontFamily="SegoeUI-Semibold"

                           FontSize="14"

                           FontWeight="SemiBold"

                           IsHitTestVisible="False"

                           Text="{TemplateBinding PlaceholderText}"

                           TextTrimming="CharacterEllipsis" />

                       <Button

                           x:Name="QueryButton"

                           Grid.Row="1"

                           Grid.Column="1"

                           Width="30"

                           Height="30"

                           Margin="16,0,12,0"

                           VerticalAlignment="Center"

                           HorizontalContentAlignment="Center"

                           VerticalContentAlignment="Center"

                           Background="red"

                           BorderThickness="{TemplateBinding BorderThickness}"

                           Content="A"

                           FontSize="10"

                           IsTabStop="False" />

                   </Grid>

               </ControlTemplate>

           </Setter.Value>

       </Setter>

   </Style>

</Page.Resources>

   <TextBox

       x:Name="Txt"

       Width="300"

       HorizontalContentAlignment="Left"

       Background="#89898c"

       BorderBrush="#89898c"

       PlaceholderText="hahaha hehehe hahaha hohoho hihi"

       Style="{StaticResource TextBoxStyle1}"

       TextAlignment="Left" />

</StackPanel>

Add ellipsis in placeholder UWP

0 additional answers