Incluir un botón en un cuadro de texto

Question

Quiero agregar un pequeño botón , que elimina todo el texto en el TextBox. ¿Es posible poner este "Remove" -Button en el TextBox (como en el iPhone Textboxs)?

Espero que después de su ayuda se ve así:

jugué algo con el ControlTemplate pero no conseguir el resultado deseado.

Una forma de resolver este problema podría ser utilizar márgenes negativos del botón, pero creo que no es una solución limpia.

¡Gracias!

Answer 1

puede derivar fácilmente de cuadro de texto y crear su propio cuadro de texto con la funcionalidad que want.That es la flexibilidad que WPF provides.See el siguiente enlace

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

Answer 2

Tienes algo usando la interactividad, pero es probable que pueda prescindir de:

<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(); 
    } 
} 

Se podría hacer que el botón sólo se muestra en Cuadro de texto-al mover el ratón mediante la adición de este estilo a la misma:

<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

Suponiendo que no desea que el texto o el cursor desaparezcan detrás del botón, la única manera limpia es volver a crear la plantilla TextBox. Si usted no está realmente exigente en cuanto a eso, entonces usted podría hacer esto:

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