WPF ListBoxItem ControlTemplate splits some MouseDown / Selection

Question

I have a problem with ListBoxItem s. I'm trying to make all the controls in a ListBoxItem also select it, so clicking on TextBox , Label , etc. Select ListBoxItem . Pretty simple.

I also modify the ListBoxItem template to change the visualization of the selection, highlighting the background to just draw a border. Also pretty simple.

However, the combination of these two causes causes some really annoying problems with MouseDown and PreviewMouseDown , especially in my case with respect to the Label in the Grid , which creates a “void” occupied by the Grid space.

Using snoop, I see the PreviewMouseDown event, stopping at the ScrollViewer inside the ListBox , and not coming to the ListBoxItem .

XAML:

 <Window x:Class="ListBoxClickThroughTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Width="525" Height="350"> <Grid> <ListBox ItemsSource="{Binding Items}" SelectionMode="Single"> <ListBox.ItemTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Label Name="VerySuperLongLabel" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" Content="VerySuperLongLabel" Padding="0" /> <TextBox Name="Textbox1" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" HorizontalContentAlignment="Right" Text="Textbox1 Text" /> <Label Name="ShortLabel" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Content="ShortLabel" Padding="0" /> <TextBox Name="Textbox2" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" HorizontalContentAlignment="Right" Text="Textbox2 Text" /> </Grid> </DataTemplate> </ListBox.ItemTemplate> <ListBox.ItemContainerStyle> <Style TargetType="{x:Type ListBoxItem}"> <EventSetter Event="PreviewMouseDown" Handler="ListBoxItem_PreviewMouseDown" /> <EventSetter Event="MouseDown" Handler="ListBoxItem_PreviewMouseDown" /> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ListBoxItem}"> <Border x:Name="Bd" BorderThickness="1"> <ContentPresenter /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="true"> <Setter TargetName="Bd" Property="BorderBrush" Value="Gray" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </ListBox.ItemContainerStyle> </ListBox> </Grid> </Window> 

Code for:

 using System.Collections.Generic; using System.Windows; using System.Windows.Controls; using System.Windows.Input; namespace ListBoxClickThroughTest { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { Items = new List<string>() { "1", "2" }; InitializeComponent(); DataContext = this; } public List<string> Items { get; set; } private void ListBoxItem_PreviewMouseDown(object sender, MouseButtonEventArgs e) { var listBoxItem = (ListBoxItem)sender; listBoxItem.IsSelected = true; } } } 

However, if I remove the Template installer, everything will be fine. Is there any magic in the template that I am missing? I tried renaming the border to "Bd", as it was called the default border of the template, but no luck. Any ideas?

Answer 1

If you change the horizontal alignment of the labels from “Left” to “Stretch”, this will fix the problem and keep the visual formatting the same.

Mousedown events only work in areas where elements exist. Having the marks in the horizontal alignment "left", you create the "void" that you mentioned, where at this level there is no element. To visually see the difference, try temporarily setting the background property of the shortcut elements, which gives you problems, and you will see that the element does not extend completely to the text field.