Click on WPF Element with lower ZOrder and without using IsHitTestVisible

Question

To simplify the problem, I have the following XAML Windows :

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication1"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525"
    DataContext="{StaticResource MainViewModel}">
<Grid>
    <Button Click="Button_Click">Click Me</Button>
    <ListBox ItemsSource="{Binding Items}" Background="{x:Null}">
    </ListBox>
</Grid>
</Window>

When it runs it look like this :

What I would expect is:

I'm able to select Items ( WpfApplication1.BusinessObject )
AND also able click on the button ( as I marked Background as {x:Null} )

But I can't click on the button, only select items in the listbox. Note: If I use IsHitTestVisible, I can click on the button, but no more on the items, which makes sense. I also absolutely need to have both listbox and button taking the whole windows. Having on top the listbox and on bottom the button is not a solution.

Is there a good way to have this working ?

Thanks for your help !

You're just layering controls on top of each other. Try a stack panel or add some rows to your grid and assign the list box to one row and the button to another. — sous2817, Jul 28 '15 at 20:53

score 0 · Answer 1 · answered Jul 28 '15 at 20:50

0

you can try putting your listbox and button inside a StackPanel

also, it does not seem like your button is bound to any actions, could that be the reason : )?

answered Jul 28 '15 at 20:50

classicalConditioning

655
7
15

Thanks for your reply, it's actually bound to simple Click event. But as I mention, I want both Button & lisbox to fully fill the Windows, one on top of the other (Z-order speaking). The sample is extracted from a complex application. – Laurent Jul 29 '15 at 08:27

evanb · Answer 2 · 2015-07-28T21:11:53.540

Another option if you want the listbox sitting on top of and partially covering your button is to set `VerticalAlignment="Top" on your listbox. This will allow the listbox to grow vertically and only the height of the listbox will cover the button. However, if the listbox has a lot of items then it will completely cover the button and you will not be able to click the button.

You could always add PreviewMouseDown handler on the listbox and trigger the button click or command. That way if the listbox fills the entire window, you'll still be able to trigger the button handler.

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

Have a look at this thread: Canvas in ScrollViewer (Preview)MouseButtonDown event order

The problem is the ScrollViewer that handles mouse events. You could implement your custom ListBox template and use a custom ScrollViewer derived class with the code changes shown in the mentioned thread.

edited May 23 '17 at 11:43

Community

1
1

answered Jul 28 '15 at 21:37

dotsven

326
2
9

Thanks it points me the right direction, take inspiration from : http://stackoverflow.com/questions/31103891/click-through-listbox-to-underlying-control I remove totally the ScrollViewer and it worked. I will post the answer – Laurent Jul 29 '15 at 09:54

score 0 · Accepted Answer · edited May 23 '17 at 10:26

Thanks dotsven, setting handle=false didn't work for me, but I found this question that helped me: Click through ListBox to underlying Control. Taking inspiration from this I removed the ScrollViewer by setting a new style to my listbox and it worked :

<Style x:Key="{x:Type ListBox}" TargetType="ListBox">
    <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>

I also had to keep the background to {x:Null} :

<ListBox ItemsSource="{Binding Items}" Background="{x:Null}" Height="65" Width="242"/>

Thanks all for your help !

Click on WPF Element with lower ZOrder and without using IsHitTestVisible

4 Answers4