带有可选项目的透明WPF ListBox [英] Transparent WPF ListBox with selectable items

问题描述

有人可以建议我如何实现一个WPF ListBox，它(有效地)具有透明的/点击测试不可见的背景，但是其项仍然是点击测试可见的吗?

Could anyone suggest how I can implement a WPF ListBox that (effectively) has a transparent/hit-test-invisible background, but whose items are still hit-test-visible?

换句话说，我希望能够在ListBox的背景中单击以单击其下方的控件，但仍然能够选择ListBox的项目.

In other words, I'd like to be able to click - through the ListBox's background - to controls underneath it, but still be able to select the ListBox's items.

我有一个使用自定义布局面板的ListBox(这是一个ListBox，因为需要选择这些项).但是，我需要将此面板叠加在其他控件之上，以使它们仍然可以正常使用.

I have ListBox using a custom layout panel (it's a ListBox because the items need to be selectable). However, I need this panel to be overlayed on top of other controls, allowing them to still be used normally.

我尝试了Background="Transparent"和IsHitTestVisible="False"的各种组合，但我怀疑我可能走错了路线...

I've tried various combinations of Background="Transparent" and IsHitTestVisible="False" but I suspect I might be on the wrong lines...

希望这很有道理-我是WPF的新手，所以我们非常感谢您提供任何指导！谢谢.

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

推荐答案

尝试在ListeItemContainer和ListBox本身上将背景设置为"{x:Null}".

Try setting the background to "{x:Null} on the ListeItemContainer and the ListBox itself.

透明仍可进行点击测试，这就是为什么您仍对其进行点击测试的原因.

Transparent is still hit-testable, which is why you're still getting hit tests on it.

编辑

我在一个示例上运行了WPF检查器，发现默认ListBox模板中的ScrollViewer导致鼠标单击停留在ListBox中.

I ran WPF Inspector on a sample and found that the ScrollViewer in the default ListBox template was causing mouse clicks to stay in the ListBox.

这是一个不包含ScrollViewer的ListBox控件模板.它确实允许鼠标传递到列表框后面的文本框，但仍允许用户在列表框中选择项目.

Here is a ListBox control template that does not include the ScrollViewer. It does allow the mouse to pass through to the TextBox that is behind the listbox, but still allows the user to select items in the listbox.

<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>

这篇关于带有可选项目的透明WPF ListBox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！