Включить кнопку в TextBox - PullRequest
Новая
       33

Включить кнопку в TextBox

5 голосов
/ 26 мая 2011

Я хочу добавить небольшую кнопку , которая удаляет весь текст в TextBox . Можно ли поместить эту кнопку «Удалить» в TextBox (как в iPhone Textboxs )?

Я надеюсь, что после вашей помощи это выглядит так:

Example

Я что-то играл с контрольной таблицей, но не получил желаемого результата.

Одним из способов решения этой проблемы может быть использование отрицательных полей кнопки, но я думаю, что это не чистое решение.

Спасибо!

Ответы [ 3 ]

5 голосов
/ 26 мая 2011

Получил что-то, используя интерактивность, но вы, вероятно, можете обойтись без: 

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

Вы можете сделать так, чтобы кнопка отображалась только в TextBox-MouseOver, добавив в нее следующий стиль: 

<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>
3 голосов
/ 26 мая 2011

Предполагая, что вы не хотите, чтобы текст или курсор исчезали за кнопкой, единственный чистый способ - повторно шаблон TextBox. Если вы на самом деле не суетитесь по этому поводу, то вы можете просто сделать это: 

<Grid>
    <TextBox/>
    <Image ... VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0 0 3 0"/>
</Grid>
1 голос
/ 26 мая 2011

Вы можете легко извлечь из текстового поля и создать собственное текстовое поле с нужной вам функциональностью. Именно такую ​​гибкость предоставляет wpf. См. Ссылку ниже

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

...