Giving a button in a textbox functionality, without using a custom control but overiding the textbox template

Question

I implemented a button into the textbox overriding the template with the code below:

<Style x:Key="{x:Type TextBox}" TargetType="{x:Type TextBoxBase}">
   <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBoxBase}">

                <Border Name="Border"
                    CornerRadius="2" 
                    Padding="2"
                    Background="{StaticResource WindowBackgroundBrush}"
                    BorderBrush="{StaticResource SolidBorderBrush}"
                    BorderThickness="1">

                    <Grid x:Name="LayoutGrid">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <ScrollViewer x:Name="PART_ContentHost" Grid.Column="0" />


                        <Button x:Name="XButton"
                                Grid.Column="2"
                                Width="25"
                                Height="25"
                                Content="X"
                                Visibility="Visible"
                                BorderBrush="Transparent"
                                Command="{Binding  ButtonClick}" />
                    </Grid>

                </Border>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The button should delete all the content in the textbox when hit. For this I would like to use the command "Command="{Binding ButtonClick}""

Can the binding be done without creating a custom control and library ? Or how can the binding or the functionality be done ?

I am using the MVVM pattern is there a way to for example use a ViewModel and create a property to bind that to ?

Answer 1

For bindings in the style like that I use AttachedCommandBehaviors "ACB"

http://marlongrech.wordpress.com/2008/12/13/attachedcommandbehavior-v2-aka-acb/

I use it for detecting clicks on items in a style that I want to detect clicks on. I haven't used it for buttons but I would think it should work just as well.

I am binding to the style's ancestor who's type is User Control this may need to be changed for your application.

You'll need to add the xmlns:acb namespace in your xaml as well see the link for details.

<ControlTemplate TargetType="{x:Type ListViewItem}">
                    <StackPanel x:Name="IconBorder"
                               acb:CommandBehavior.Event="PreviewMouseUp"
                               acb:CommandBehavior.Command="{Binding Path=DataContext.SelectedListItemSingleClickCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}"
                               acb:CommandBehavior.CommandParameter="{Binding}">
                        <DockPanel LastChildFill="False" HorizontalAlignment="Left" Width="{Binding Width, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}}">
                            <TextBlock Text="{Binding Title}"
                                       DockPanel.Dock="Left"
                                       x:Name="ListItemText" />
                            <Image x:Name="ActionIcon" 
                                   Source="{Binding Path=DataContext.SelectedListActionIcon, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}" 
                                   DockPanel.Dock="Right"
                                   acb:CommandBehavior.Event="PreviewMouseUp"
                                   acb:CommandBehavior.Command="{Binding Path=DataContext.SelectedListActionIconClickCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}"
                                   acb:CommandBehavior.CommandParameter="{Binding}">
                            </Image>
                        </DockPanel>
                        <ContentPresenter DockPanel.Dock="Left" />
                    </StackPanel>
</ControlTemplate>