Search code examples
wpflistboxitem

Input binding for ListBox items

I have a ListBox with ItemsSource bound to a list in the view-model. I want to bind a command to a double-click event on each item with the item as a parameter.

example: 

<ListBox ItemsSource="{Binding Items}"/>

If I simply attach a command to the ListBox, I wouldn't be able to send the Item clicked as a parameter.

Example: 

<ListBox ItemsSource="{Binding Items}">
<ListBox.InputBinding>
    <MouseBinding Gesture="LeftDoubleClick" Command="MyCommand" CommandParameter="{ ?? No way to send the right item ?? }"/>
</ListBox.InputBinding>

I also try to bind it to a container in an ItemTemplate like this:

<ListBox ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.InputBindings>
                            <MouseBinding Gesture="LeftDoubleClick" Command="{Binding MyCommand}" CommandParameter="{Binding }"/>
                        </Grid.InputBindings>
                    <TextBlock Text="{Binding }"/>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>

And it worked but than the command was only invoked if you clicked inside the container. Mark here as yellow:

enter image description here

I want the command to be invoked if I click anywhere inside the item. (The area marked in blue when selecting the item).

I found some similar questions but none of them has a answer that does what I want.

How do I accomplish that?

Solution

  • Add this style 

    <Style TargetType="ListBoxItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
       <Setter Property="Padding" Value="0 0 0 0"/>
</Style>

    By default the ContentPresenter inside ListBoxItem has HorizontalAlignment="Left" and VerticalAlignment="Center".You can see the Template of ListBoxItem below

         <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border x:Name="Bd"
                            Padding="{TemplateBinding Padding}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            SnapsToDevicePixels="True">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          Content="{TemplateBinding Content}"
                                          ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="Bd" Property="Background" Value="#1F26A0DA" />
                            <Setter TargetName="Bd" Property="BorderBrush" Value="#A826A0DA" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Selector.IsSelectionActive" Value="False" />
                                <Condition Property="IsSelected" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="Bd" Property="Background" Value="#3DDADADA" />
                            <Setter TargetName="Bd" Property="BorderBrush" Value="#FFDADADA" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Selector.IsSelectionActive" Value="True" />
                                <Condition Property="IsSelected" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="Bd" Property="Background" Value="#3D26A0DA" />
                            <Setter TargetName="Bd" Property="BorderBrush" Value="#FF26A0DA" />
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="Bd" Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>