2015-12-16 6 views
5

TextBoxのUWPアプリケーション(C#)があります。テキストボックスには、プロパティに双方向にバインドされます。テキストボックスの削除ボタン(小さなx)は、バインドによってテキストが設定されたときに表示されません。

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

私はTextBox「削除ボタン」に入力すると - 右隅にある小さなX - 表示されます。これをクリックすると、TextBoxのTextとPropertyの値が期待どおりにクリアされます。

プロパティが変更されたときTextBox'テキストは正しく更新されますが、削除ボタンは表示されません。どういうわけかそれを見えるようにすることはできますか?いずれかのプロパティまたは何とか "それを"爽快?

+0

可視性はスタイルテンプレートのVSMの[ButtonVisible](https://msdn.microsoft.com/en-us/library/windows/apps/mt299154.aspx)状態で制御されます。あなたは 'VisualStateManager.GoToState'メソッドを実行することができます。または、テンプレートを編集して常に可視になるようにすることもできます。またはテンプレートはそのプロパティをバインドし、そのように切り替えます。私は例を一緒に投げる時間があったが、そうしないと、コメントのままにしておきたい。 –

+0

これはフォーカス問題であり、拘束力の問題ではないことがわかりました。テキストボックスにフォーカスがあるときにxが表示され、xを探していたシナリオでTextBoxにフォーカスがなくなった...私はまだそれを表示する方法の例や自分自身の視認性を制御する方法が大好きです。 –

+1

ああ、それは本当に簡単だろう。デフォルトのテンプレートを見てみると、 'Visibility =" Collapsed "'が 'DeleteButton'に明示的に設定されている様子を見てください。それで、あなたはそのことについて、そしてVisualStateだけでも問題ありません。またはTemplateバインド(私は通常、 'Tag'プロパティにピギーバックします。なぜなら、そのようなことがあるので、依存プロパティを作成する必要はないからです)。簡単なピーシー。または、あなたは創造的であり、[this](http://stackoverflow.com/questions/27081106/clear-erase-textbox-content-with-button-click-event)のようなものであなた自身で行うことができます。 –

答えて

2

TextBox - >テンプレートの編集 - >コピーを右クリックするだけです。以下は、私がドキュメントから取ったデフォルトの例です。例えば、あなたが変更するものの隣にコメントがあります。

  <!-- 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}"/> 

ブールを設定している場合は、その上に可視性コンバータを追加することを忘れないでください。 Voila、終わった。お役に立てれば。

OH PS - デフォルトを使用して継承の編集スタイルを参照していない場合は、Style="{StaticResource TheCopiedTemplateNameYouMade}"も追加することを忘れないでください。

+0

ありがとうございます。これは可視性に関する限り動作しますが、今は別の問題があります...コントロールにフォーカスがないときに削除ボタンをクリックすると、通常はボタンが表示されない(今は)明確なアクションは実行されません。したがって、 "x"の押下のアニメーションは起こりますが、テキストボックスのテキストはクリアされません。任意のヒント? –

+0

テンプレートにClickイベントハンドラを追加したことを修正するには、単にtextbox.Focusを呼び出します。すべての助けをありがとう! –

+0

ボタンに「ClickMode = Press」を追加するだけで済むかもしれませんが、これは一般的ですが、救済策を見つけられたらうれしいです! –

関連する問題