Inclure un Bouton dans une zone de texte

Je veux ajouter un peu de Bouton, ce qui supprime tout le texte dans la zone de texte. Est-il possible de mettre ce "Supprimer"Bouton dans la zone de texte (comme dans le iPhone Textboxs)?

J'espère que, après votre aide, ça ressemble à ça:

Inclure un Bouton dans une zone de texte

J'ai joué quelque chose avec le controltemplate mais n'a pas obtenu le résultat désiré.

Une façon de résoudre ce problème pourrait être d'utiliser des marges négatives sur le bouton, mais je pense que ce n'est pas une solution propre.

Merci!

OriginalL'auteur rakete | 2011-05-26

  1. 1

    Vous pouvez facilement tirer de zone de texte et créer votre propre zone de texte avec les fonctionnalités que vous souhaitez.C'est la flexibilité que wpf fournit.Voir le lien ci-dessous

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

    Tandis que ceci peut théoriquement répondre à la question, il serait préférable pour inclure l'essentiel des éléments de réponse ici, et de fournir le lien de référence.

    OriginalL'auteur biju

  2. 5

    Quelque chose à l'aide de l'interactivité, mais vous pouvez probablement gérer sans:

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

    Vous pourriez faire sur le bouton afficher uniquement sur la zone de texte-passage de la Souris par l'ajout de ce style:

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

    OriginalL'auteur H.B.

  3. 3

    En supposant que vous ne voulez pas de texte ou le curseur disparaît derrière le bouton, le seul moyen propre est de ré-modèle de la TextBox. Si vous n'êtes pas vraiment embêté à ce sujet, alors vous pourriez faire ceci:

    <Grid>
<TextBox/>
<Image ... VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0 0 3 0"/>
</Grid>
    Si vous décidez de re-modèle le contrôle de zone de texte, je vous recommande d'utiliser Expression Blend pour extraire le modèle de contrôle par défaut, il est plus facile de modifier l'existant que c'est pour commencer à partir de zéro!

    OriginalL'auteur Kent Boogaart