通过绑定设置文本时，文本框删除按钮（小 x）不可见答案

【问题标题】：TextBox delete button (the little x) not visible when Text set through binding通过绑定设置文本时，文本框删除按钮（小 x）不可见
【发布时间】：2023-03-06 12:51:01
【问题描述】：

我有一个带有TextBox 的 UWP 应用 (C#)。文本框绑定到一个属性，有两种方式：

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

当我输入TextBox 时，“删除按钮”——右上角的小x——出现了。点击它会按预期清除TextBox 的文本和属性值。

当属性更改时，TextBox's 文本会正确更新，但不会出现删除按钮。我可以以某种方式使其可见吗？是通过属性还是通过某种方式“刷新”它？

【问题讨论】：

其可见性通过样式模板的 VSM 中的ButtonVisible 状态进行控制。您可以使用VisualStateManager.GoToState 方法，或者您可以直接编辑模板以使其始终可见。或模板绑定该属性并以这种方式切换它。希望我有时间整理一个例子，但没有，所以留下评论。
好的，我现在看到这是一个焦点问题，而不是绑定问题。当文本框有焦点时 x 是可见的，在我正在寻找 x 的场景中，TextBox 不再有焦点......我仍然喜欢一个如何始终显示它的示例，或者如何自己控制可见性。
哦，那真的很容易。如果您查看默认模板，看看他们如何在DeleteButton 上明确设置Visibility="Collapsed"？所以你可以删除那个和 VisualState 。或模板绑定它（我通常会使用 Tag 属性，因为它用于那种事情，然后您不必创建依赖属性）。十分简单。或者您也可以发挥创造力，自己使用this 之类的方式来实现。
对不起，我对 XAML 和模板不太熟悉，我真的可以举个例子。谢谢！
好的，我今天确实有一点时间。您只想知道去哪里/如何去删除明确设置的可见性=折叠？或者如何模板绑定该属性以从实例级别命中它？还是别的什么？

标签： c# xaml windows-10 uwp

【解决方案1】：

只需右键单击您的文本框 -> 编辑模板 -> 编辑副本。以下只是我从文档中获取的默认值，例如您要更改的内容旁边的 cmets。

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

然后在实例；

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

如果您要设置布尔值，请不要忘记在其上添加可见性转换器。瞧，完成了。希望这会有所帮助。

哦 PS - 如果您不使用默认值来引用编辑后的样式进行继承，请不要忘记添加 Style="{StaticResource TheCopiedTemplateNameYouMade}"。

【讨论】：

谢谢。就可见性而言，这有效，但现在我有另一个问题......现在，当我在控件没有焦点时单击删除按钮时，当按钮通常不可见时（但现在是）不执行清除操作。所以按下“x”的动画发生了，但文本框文本没有被清除。有什么建议吗？
为了解决这个问题，我在模板中添加了一个 Click 事件处理程序，它只调用 textbox.Focus。感谢大家的帮助！
可能只是在按钮上添加了ClickMode=Press，这很常见，但很高兴你找到了补救措施！