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?

score 2 · Answer 1 · answered Jun 04 '14 at 19:30

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>

Rhyous · Accepted Answer · 2014-06-04T20:07:37.290

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.

I want button style as I want button visible for textbox focus data-trigger. Any other way if you know. — NewInDevelopment, Jun 04 '14 at 19:52
What you are doing is impossible. The button is only visible if the TextBox IsFocused, but as soon as you try to click on the Button, the TextBox is no longer a focus. Choose a different property other than TextBox.IsFocused to use. Perhaps ListBoxItem.IsSelected or something. — Rhyous, Jun 04 '14 at 19:58
ListBoxItem.IsSelcted works, but you have to also follow this: http://stackoverflow.com/questions/2191922/select-listboxitem-if-textbox-in-itemtemplate-gets-focus — Rhyous, Jun 04 '14 at 20:05
This doesn't work for me. `Button.OnClick` appears to do nothing. — Asteroids With Wings, Feb 27 '20 at 18:17
Never mind, just learnt turning off IsHitTestVisible turns off clicks :( — Asteroids With Wings, Feb 27 '20 at 18:23

How to trap button click event inside listbox item template

2 Answers2