Przycisk usuwania TextBox (mały x) niewidoczny, gdy ustawiono powiązanie tekstu

Question

Mam aplikację UWP (C#) z TextBox. Pole tekstowe jest zobowiązany do nieruchomości, dwukierunkowy: Kiedy wpisać w TextBox przycisk „usuń”

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

- mały X w prawym górnym rogu - pojawi. Kliknięcie go powoduje wyczyszczenie wartości Tekst i wartość zgodnie z oczekiwaniami.

Po zmianie właściwości tekstu tekst jest poprawnie zaktualizowany, ale przycisk usuwania nie jest wyświetlany. Czy mogę jakoś to pokazać? Albo przez właściwość, albo w jakiś sposób "odświeżając" ją?

Answer 1

Po prostu kliknij prawym przyciskiem myszy swój TextBox -> Edytuj szablon -> Edytuj kopię. Poniżej znajduje się domyślny wzięty z dokumentów, na przykład z komentarzami obok tego, co chcesz zmienić.

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

Następnie w instancji;

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

Jeśli ustawiasz bool, nie zapomnij dodać konwertera Widoczności na nim. Voila, gotowe. Mam nadzieję że to pomoże.

OH PS - Nie zapomnij dodać do niego Style="{StaticResource TheCopiedTemplateNameYouMade}", jeśli nie używasz domyślnego odniesienia do edytowanego stylu dziedziczenia.