TextBox delete button (the little x) not visible when Text set through binding

Question

I have a UWP app (C#) with a TextBox. The textbox is bound to a property, two way:

Text="{Binding NameFilterString, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"

When I type into the TextBox the "delete button" - the little x in the right corner - appears. Clicking on it clears the TextBox's Text and the Property value, as expected.

When the property changes the TextBox's Text is correctly updated, but the delete button doesn't appear. Can I somehow make it visible? Either by a property or by somehow "refreshing" it?

Answer 1

Just right-click your TextBox -> Edit Template -> Edit a copy. Below is just a default I took from the docs for example with comments next to what you would change.

            <!-- Default style for Windows.UI.Xaml.Controls.TextBox -->
            <Style TargetType="TextBox">
        <!-- *** We add a setter for a default -->
              <Setter Property="Tag" Value="Collapsed"/>
              <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
              <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
              <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
              <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltHighBrush}" />
              <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeDisabledLowBrush}" />
              <Setter Property="SelectionHighlightColor" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
              <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
              <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
              <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
              <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
              <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
              <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
              <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}"/>
              <Setter Property="Template">
                <Setter.Value>
                  <ControlTemplate TargetType="TextBox">
                    <Grid>
                      <Grid.Resources>
                        <Style x:Name="DeleteButtonStyle" TargetType="Button">
                          <Setter Property="Template">
                            <Setter.Value>
                              <ControlTemplate TargetType="Button">
                                <Grid x:Name="ButtonLayoutGrid" BorderBrush="{ThemeResource TextBoxButtonBorderThemeBrush}"
                                                                BorderThickness="{TemplateBinding BorderThickness}"
                                                                Background="{ThemeResource TextBoxButtonBackgroundThemeBrush}">
                                  <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                      <VisualState x:Name="Normal" />
                                      <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                          <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement"
                                                                         Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                          </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                      </VisualState>
                                      <VisualState x:Name="Pressed">
                                        <Storyboard>
                                          <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid"
                                                                         Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                          </ObjectAnimationUsingKeyFrames>
                                          <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement"
                                                                         Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}" />
                                          </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                      </VisualState>
                                      <VisualState x:Name="Disabled">
                                        <Storyboard>
                                          <DoubleAnimation Storyboard.TargetName="ButtonLayoutGrid"
                                                           Storyboard.TargetProperty="Opacity"
                                                           To="0"
                                                           Duration="0" />
                                        </Storyboard>
                                      </VisualState>
                                    </VisualStateGroup>
                                  </VisualStateManager.VisualStateGroups>
                                  <TextBlock x:Name="GlyphElement"
                                              Foreground="{ThemeResource SystemControlForegroundChromeBlackMediumBrush}"
                                              VerticalAlignment="Center"
                                              HorizontalAlignment="Center"
                                              FontStyle="Normal"
                                              FontSize="12"
                                              Text="&#xE10A;"
                                              FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                              AutomationProperties.AccessibilityView="Raw"/>
                                </Grid>
                              </ControlTemplate>
                            </Setter.Value>
                          </Setter>
                        </Style>
                      </Grid.Resources>
                      <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                          <VisualState x:Name="Disabled">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter"
                                                               Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
                                                             Storyboard.TargetProperty="Background">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
                                                             Storyboard.TargetProperty="Background">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
                                                             Storyboard.TargetProperty="BorderBrush">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement"
                                                             Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledLowBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter"
                                                             Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledLowBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                          </VisualState>
                          <VisualState x:Name="Normal" />
                          <VisualState x:Name="PointerOver">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
                                                             Storyboard.TargetProperty="BorderBrush">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightChromeAltLowBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
                                                             Storyboard.TargetProperty="Opacity">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundHoverOpacity}" />
                              </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                          </VisualState>
                          <VisualState x:Name="Focused">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter"
                                                             Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlPageTextChromeBlackMediumLowBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
                                                             Storyboard.TargetProperty="Background">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundChromeWhiteBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
                                                             Storyboard.TargetProperty="Opacity">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundFocusedOpacity}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
                                                             Storyboard.TargetProperty="BorderBrush">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement"
                                                             Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundChromeBlackHighBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement"
                                                             Storyboard.TargetProperty="RequestedTheme">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Light" />
                              </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                          </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ButtonStates">    
                          <VisualState x:Name="ButtonVisible">
<!-- *** We need to ditch this default VisualState, so take what exists and swap it for this.
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeleteButton"
                                                             Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                  <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                  </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                              </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
    -->
                          </VisualState>
                          <VisualState x:Name="ButtonCollapsed" />
                        </VisualStateGroup>
                      </VisualStateManager.VisualStateGroups>
                      <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                      </Grid.ColumnDefinitions>
                      <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                      </Grid.RowDefinitions>
                      <Border x:Name="BackgroundElement"
                              Grid.Row="1"
                              Background="{TemplateBinding Background}"
                              Margin="{TemplateBinding BorderThickness}"
                              Opacity="{ThemeResource TextControlBackgroundRestOpacity}"
                              Grid.ColumnSpan="2"
                              Grid.RowSpan="1"/>
                      <Border x:Name="BorderElement"
                              Grid.Row="1"
                              BorderBrush="{TemplateBinding BorderBrush}"
                              BorderThickness="{TemplateBinding BorderThickness}"
                              Grid.ColumnSpan="2"
                              Grid.RowSpan="1"/>
                      <ContentPresenter x:Name="HeaderContentPresenter"
                                        x:DeferLoadStrategy="Lazy"
                                        Visibility="Collapsed"
                                        Grid.Row="0"
                                        Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                        Margin="0,0,0,8"
                                        Grid.ColumnSpan="2"
                                        Content="{TemplateBinding Header}"
                                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                                        FontWeight="Normal" />
                      <ScrollViewer x:Name="ContentElement"
                                    Grid.Row="1"
                                    HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                    HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                    VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                    VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                    IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                    IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                    IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                    Margin="{TemplateBinding BorderThickness}"
                                    Padding="{TemplateBinding Padding}"
                                    IsTabStop="False"
                                    AutomationProperties.AccessibilityView="Raw"
                                    ZoomMode="Disabled" />
                      <ContentControl x:Name="PlaceholderTextContentPresenter"
                                    Grid.Row="1"
                                    Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"
                                    Margin="{TemplateBinding BorderThickness}"
                                    Padding="{TemplateBinding Padding}"
                                    IsTabStop="False"
                                    Grid.ColumnSpan="2"
                                    Content="{TemplateBinding PlaceholderText}"
                                    IsHitTestVisible="False"/>
        <!-- *** Here's your culprit, notice the change to the value -->
                      <Button x:Name="DeleteButton"
                              Grid.Row="1"
                              Style="{StaticResource DeleteButtonStyle}"
                              BorderThickness="{TemplateBinding BorderThickness}"
                              Margin="{ThemeResource HelperButtonThemePadding}"
                              IsTabStop="False"
                              Grid.Column="1"
                              Visibility="{TemplateBinding Tag}"
                              FontSize="{TemplateBinding FontSize}"
                              MinWidth="34"
                              VerticalAlignment="Stretch"/>
                    </Grid>
                  </ControlTemplate>
                </Setter.Value>
              </Setter>
            </Style>

Then at the instance;

<TextBox Tag="{Binding blah}"/>

If you're setting a bool, don't forget to add a Visibility converter on it. Voila, done. Hope this helps.

OH PS - Also don't forget to add Style="{StaticResource TheCopiedTemplateNameYouMade}" to it if you're not using the default to reference the edited style for inheritance.