Pulsante di eliminazione TextBox (la x piccola) non visibile quando Testo impostato tramite associazione

Ho un'app UWP (C#) con un TextBox. La casella di testo è legato a una proprietà, a due vie:Pulsante di eliminazione TextBox (la x piccola) non visibile quando Testo impostato tramite associazione

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

Quando digito nel TextBox il tasto "delete" - la piccola x nell'angolo a destra - appare. Facendo clic si cancella il testo di TextBox e il valore della proprietà, come previsto.

Quando la proprietà cambia il TextBox' s Il testo viene aggiornato correttamente, ma il pulsante Elimina non viene visualizzato. Posso in qualche modo renderlo visibile? O da una proprietà o in qualche modo "rinfrescante"?

fonte

2015-12-16 David Božjak

La visibilità è controllata tramite lo stato [ButtonVisible] (https://msdn.microsoft.com/en-us/library/windows/apps/mt299154.aspx) nel VSM del modello di stile. Si potrebbe fare un metodo 'VisualStateManager.GoToState', o si potrebbe semplicemente andare a modificare il modello in modo che sia sempre visibile. Oppure il modello lega quella proprietà e la attiva in quel modo. Vorrei avere il tempo di mettere insieme un esempio, ma non farlo, quindi ho appena lasciato un commento. –

Ok, ora vedo che questo è un problema di messa a fuoco, non un problema di rilegatura. La x è visibile quando la casella di testo ha lo stato attivo, e nello scenario che stavo cercando x il TextBox non aveva più il focus ... Mi piacerebbe comunque un esempio di come mostrarlo sempre, o come controllare da solo la visibilità. –

Oh sarebbe davvero facile. Se vai a guardare il modello di default vedi come hanno 'Visibility =" Collapsed "' impostato esplicitamente su 'DeleteButton'? Quindi potresti solo del that e il VisualState per quella materia. Oppure Template bind (di solito mi occupo della proprietà 'Tag' dato che è lì per quel genere di cose e quindi non devi creare una proprietà di dipendenza). Vai tranquillo. Oppure potresti essere creativo e farlo da solo con qualcosa come [this] (http://stackoverflow.com/questions/27081106/clear-erase-textbox-content-with-button-click-event). –

Basta fare clic con il pulsante destro del mouse su TextBox -> Modifica modello -> Modifica una copia. Di seguito è riportato solo un valore predefinito che ho preso dai documenti, ad esempio con commenti accanto a ciò che avresti modificato.

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

Quindi all'istanza;

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

Se si imposta un bool, non dimenticare di aggiungere un convertitore Visibility su di esso. Voilà, fatto. Spero che questo ti aiuti.

OH PS - Inoltre, non dimenticare di aggiungere Style="{StaticResource TheCopiedTemplateNameYouMade}" ad esso se non si utilizza l'impostazione predefinita per fare riferimento allo stile modificato per l'ereditarietà.

fonte

2015-12-18 14:58:23

Grazie per questo. Funziona per quanto riguarda la visibilità, ma ora ho un altro problema ... Ora, quando clicco sul pulsante Elimina quando il controllo non ha il focus, quando il pulsante normalmente non sarà visibile (ma ora lo è) il l'azione chiara non viene eseguita. Quindi l'animazione della pressione della "x" avviene, ma il testo della casella di testo non viene cancellato. Qualche consiglio? –

Per risolvere il problema ho aggiunto un gestore di eventi Click nel modello, che chiama semplicemente textbox.Focus. Grazie per tutto l'aiuto! –

Potrebbe aver appena aggiunto "ClickMode = Press' al pulsante, è comune, ma felice di aver trovato un rimedio! –

Pulsante di eliminazione TextBox (la x piccola) non visibile quando Testo impostato tramite associazione

risposta

Problemi correlati