在TextBox中添加一个按钮

Question

我想添加一个小的“按钮”，用于删除文本框中的所有文本。是否可以将此“删除”按钮放入文本框中（就像在 iPhone文本框 中一样）？

我希望您的帮助后它看起来像这样：

我尝试使用控件模板进行操作，但没有得到所需的结果。

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

谢谢！

- rakete

Answer 1

你可能已经使用了交互功能，但你也可以不用它:

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

- H.B.

Answer 2

假设您不希望文本或光标消失在按钮后面，唯一干净的方法是重新设计 TextBox 模板。如果您并不太关心这个问题，那么可以直接这样做：

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

- Kent Boogaart

---

如果您决定重新设计TextBox控件，我建议使用Expression Blend提取默认控件模板，这比从头开始编辑更容易！ - TabbyCool

Answer 3

你可以轻松地从文本框中派生出自己想要的功能，并创建自己的文本框。这就是WPF提供的灵活性。请参见下面的链接。

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

- biju

---

虽然这个回答从理论上回答了问题，但最好包含回答的关键部分并提供链接供参考。 - NullUserException