Include a Button in a TextBox
I want to add a little Button, which removes all the text in the TextBox. Is it possible to put this "Remove"-Button into the TextBox (like in the iPhone Textboxs)?
I hope after your help it looks like that:
I played something with the controltemplate but didn't get the wished re开发者_JAVA技巧sult.
One way to solve this problem could be to use negative margins of the button, but i think that isn't a clean solution.
Thank you!
Got something using interactivity, but you probably can manage without:
<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();
}
}
You could make the button only show upon TextBox-MouseOver by adding this style to it:
<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>
Assuming you don't want text or the cursor to disappear behind the button, the only clean way is to re-template the TextBox
. If you're not really fussed about that, then you could just do this:
<Grid>
<TextBox/>
<Image ... VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0 0 3 0"/>
</Grid>
You can easily derive from textbox and create your own textbox with the functionality you want.That is the flexibility that wpf provides.See the link below
http://davidowens.wordpress.com/2009/02/18/wpf-search-text-box/
精彩评论