How to trap button click event inside listbox item template

Question

I have listbox with textbox inside to display list items. I want to have editable textbox , So I put button inside listbox for selected textbox. I want to trigger button click event for that listbox but I couldn't. Here is my code:

         <ListBox HorizontalAlignment="Left" Name="ListTwo" Height="auto" Margin="134.53,15.934,0,0" VerticalAlignment="Top" Width="202.308" ItemsSource="{Binding . ,Source=CollectionUrl,BindsDirectlyToSource=True}" BorderThickness="0" >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="50" />
                    </Grid.ColumnDefinitions>
                    <RadioButton>
                        <TextBox Name="TextBoxList" Text="{Binding Path=urlString, Mode=TwoWay}" Width="150">
                            <TextBox.Style>
                                <Style TargetType="TextBox">
                                    <Style.Triggers>
                                        <Trigger Property="IsFocused" Value="True">
                                            <Setter Property="Foreground" Value="Black"/>
                                            <Setter Property="IsReadOnly" Value="False" />
                                            <Setter Property="BorderThickness" Value="0.5"/>
                                        </Trigger>
                                        <Trigger Property="IsFocused" Value="False">
                                            <Setter Property="Foreground" Value="Gray"/>
                                            <Setter Property="IsReadOnly" Value="True" />
                                            <Setter Property="BorderThickness" Value="0"/>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBox.Style>
                        </TextBox>
                    </RadioButton>
                    <Button Content="Save" Grid.Column="1" Tag="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBox}}" Click="Button_Click_2">
                        <Button.Style>
                            <Style TargetType="Button">
                                <Setter Property="Visibility" Value="Collapsed" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding ElementName=TextBoxList, Path=IsFocused}" Value="True">
                                        <Setter Property="Visibility" Value="Visible" />
                                        <Setter Property="ClickMode" Value="Press"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Button.Style>
                    </Button>
                </Grid>
            </DataTemplate>

        </ListBox.ItemTemplate>

    </ListBox>

Anyone knows how can I trap click event of button?

Answer 1

Did you try adding an event for Button in the ListBox. This will capture the event.

Button.Click="OnClick"

So like this:

<ListBox HorizontalAlignment="Left" Name="ListTwo" Height="auto" Margin="134.53,15.934,0,0" VerticalAlignment="Top" Width="202.308" ItemsSource="{Binding . ,Source=CollectionUrl,BindsDirectlyToSource=True}" BorderThickness="0" Button.Click="OnClick">

Then your event:

private void OnClick(object sender, RoutedEventArgs e)
{
    var originalSource = e.OriginalSource;
    // Do your work here
}

However, you have a second problem. Your button style is preventing your event from firing. It works without the style but doesn't fire with the style. Change the style to be on ListBoxItem.IsSelected. Then make it so if you select a TextBox the ListBoxItem is selected.

<ListBox HorizontalAlignment="Left" Name="ListTwo" Height="auto" Margin="134.53,15.934,0,0" VerticalAlignment="Top" Width="202.308" ItemsSource="{Binding . ,Source=CollectionUrl,BindsDirectlyToSource=True}" BorderThickness="0" Button.Click="OnClick">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="50" />
                </Grid.ColumnDefinitions>
                <RadioButton>
                    <TextBox Name="TextBoxList" Text="{Binding Path=urlString, Mode=TwoWay}" Width="150">
                        <TextBox.Style>
                            <Style TargetType="TextBox">
                                <Style.Triggers>
                                    <Trigger Property="IsFocused" Value="True">
                                        <Setter Property="Foreground" Value="Black"/>
                                        <Setter Property="IsReadOnly" Value="False" />
                                        <Setter Property="BorderThickness" Value="0.5"/>
                                    </Trigger>
                                    <Trigger Property="IsFocused" Value="False">
                                        <Setter Property="Foreground" Value="Gray"/>
                                        <Setter Property="IsReadOnly" Value="True" />
                                        <Setter Property="BorderThickness" Value="0"/>
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </TextBox.Style>
                    </TextBox>
                </RadioButton>
                <Button Content="Save" Grid.Column="1">
                    <Button.Style>
                        <Style TargetType="Button">
                            <Setter Property="Visibility" Value="Collapsed" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Value="True">
                                    <Setter Property="Visibility" Value="Visible" />
                                    <Setter Property="ClickMode" Value="Press"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListBoxItem}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource Self}}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(ListBoxItem.IsSelected)">
                                    <DiscreteBooleanKeyFrame KeyTime="0" Value="True"/>
                                </BooleanAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

Hope that helps.

Answer 2

You have several options to do it but I'll just give you the two best ones without using third party frameworks.

First is through System.Windows.Interactions and put it inside the TextBox. This will be handled in your ViewModel

<i:Interaction.Triggers>
            <i:EventTrigger EventName="Click" >
                <i:InvokeCommandAction Command="{Binding ClickCommand}" />
            </i:EventTrigger>
</i:Interaction.Triggers>

Second is through using EventSetter, this will be handled behind the View

<Style TargetType="ListBoxItem">
             <EventSetter Event="MouseDoubleClick" Handler="TextBoxClick"/>
</Style>