Transparent WPF ListBox with selectable items

Question

Can anyone suggest how I can implement a WPF ListBox that (efficiently) has a transparent / hit-test-invisible background, but whose objects are still viewable?

In other words, I would like to be able to click through the background of the ListBox - to control it below, but still be able to select ListBox items.

I have a ListBox using a custom layout panel (this is a ListBox because items must be selected). However, I need this panel to be overlaid on top of the other controls, allowing them to continue to be used in normal mode.

I tried various combinations of Background="Transparent" and IsHitTestVisible="False" , but I suspect I might be wrong ...

Hope this makes sense - I'm new to WPF, so any guidance would be appreciated! Thanks.

Answer 1

Try setting the background to "{x: Null] in the ListeItemContainer and the ListBox itself.

Transparent is still available for testing, so you still get kick tests.

EDIT

I ran WPF Inspector on the sample and found that the ScrollViewer in the ListBox template by default caused mouse clicks to remain in the ListBox.

Here is a ListBox management template that does not include ScrollViewer. This allows the mouse to jump to the TextBox, which is located behind the list, but still allows the user to select items in the list.

 <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Window.Resources> <SolidColorBrush x:Key="ListBorder" Color="#828790"/> <Style x:Key="ListBoxStyle1" TargetType="{x:Type ListBox}"> <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/> <Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/> <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> <Setter Property="ScrollViewer.CanContentScroll" Value="true"/> <Setter Property="Stylus.IsFlicksEnabled" Value="False"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ListBox}"> <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="true"> <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> </Trigger> <Trigger Property="IsGrouping" Value="true"> <Setter Property="ScrollViewer.CanContentScroll" Value="false"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <Grid Width="100"> <TextBox TextWrapping="Wrap">I'm in the background. I'm in the background. I'm in the backgroun.</TextBox> <ListBox Background="{x:Null}" Style="{StaticResource ListBoxStyle1}"> <ListBoxItem Margin="10" Background="#999">Hello</ListBoxItem> <ListBoxItem Margin="10" Background="#999">Hello</ListBoxItem> <ListBoxItem Margin="10" Background="#999">Hello</ListBoxItem> <ListBoxItem Margin="10" Background="#999">Hello</ListBoxItem> </ListBox> </Grid> </Window>