在文本框中包含一个按钮

Question

我想添加一点按钮，它删除TextBox中的所有文本。是否有可能把这个“删除”按钮到文本框中（如iPhone文本框）？

我希望你的帮助后，它看起来就像是：

我玩的东西与控件模板，但没有得到所希望的结果。

解决此问题的一种方法可能是使用按钮的负边距，但我认为这不是一个干净的解决方案。

谢谢！

Answer 1

您可以轻松地从文本框派生，并与功能创建自己的文本框，你want.That是WPF provides.See灵活性下面

http://davidowens.wordpress.com/2009/02/18/wpf-search-text-box/

Answer 2

了一些使用交互性，但你可能可以管理，而不：

<LinearGradientBrush x:Key="TextBoxBorder" EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0"> 
    <GradientStop Color="#ABADB3" Offset="0.05" /> 
    <GradientStop Color="#E2E3EA" Offset="0.07" /> 
    <GradientStop Color="#E3E9EF" Offset="1" /> 
</LinearGradientBrush> 
<Style x:Key="ExtendedTextBoxTemplate" BasedOn="{x:Null}" TargetType="{x:Type TextBox}"> 
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" /> 
    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" /> 
    <Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}" /> 
    <Setter Property="BorderThickness" Value="1" /> 
    <Setter Property="Padding" Value="1" /> 
    <Setter Property="AllowDrop" Value="true" /> 
    <Setter Property="FocusVisualStyle" Value="{x:Null}" /> 
    <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst" /> 
    <Setter Property="Stylus.IsFlicksEnabled" Value="False" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TextBox}"> 
       <!-- Here i just wrap the content in a grid and place a button on the right, needs to be styled though --> 
       <Grid> 
        <Microsoft_Windows_Themes:ListBoxChrome x:Name="Bd" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}" 
          Background="{TemplateBinding Background}" 
          RenderMouseOver="{TemplateBinding IsMouseOver}" 
          RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true"> 
         <ScrollViewer x:Name="PART_ContentHost" 
           SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> 
        </Microsoft_Windows_Themes:ListBoxChrome> 
        <Button Content="X" HorizontalAlignment="Right"> 
         <i:Interaction.Triggers> 
          <i:EventTrigger EventName="Click"> 
           <ta:ClearTextAction 
             Target="{Binding RelativeSource={RelativeSource TemplatedParent}}" /> 
          </i:EventTrigger> 
         </i:Interaction.Triggers> 
        </Button> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Background" TargetName="Bd" 
           Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" /> 
         <Setter Property="Foreground" 
           Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

class ClearTextAction : TriggerAction<Button> 
{ 
    public static readonly DependencyProperty TargetProperty = 
      DependencyProperty.Register("Target", typeof(TextBox), typeof(ClearTextAction), new UIPropertyMetadata(null)); 
    public TextBox Target 
    { 
     get { return (TextBox)GetValue(TargetProperty); } 
     set { SetValue(TargetProperty, value); } 
    } 

    protected override void Invoke(object parameter) 
    { 
     Target.Clear(); 
    } 
} 

你可以使按钮只有在文本框，鼠标悬停显示加入这种风格给它：

<Button.Style> 
    <Style TargetType="{x:Type Button}"> 
     <Setter Property="Visibility" Value="Hidden" /> 
     <Style.Triggers> 
      <DataTrigger 
        Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsMouseOver}" 
        Value="True"> 
       <Setter Property="Visibility" Value="Visible" /> 
      </DataTrigger> 
     </Style.Triggers> 
    </Style> 
</Button.Style> 

Answer 3

假设您不希望文本或光标在按钮后面消失，唯一干净的方法是重新设置TextBox。如果你不是真的大惊小怪，那么你可能只是这样做：

<Grid> 
    <TextBox/> 
    <Image ... VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0 0 3 0"/> 
</Grid>