How can I bring a Button in a custom control “to the front”?

Question

In a custom control I have as the content a stackpanel (horizontal) en in it, a Textblock and a Button.

The custom control works and the result is a rectangle which is my local:DropDownToggleButton.
This reactangle is divided into two sub-rectangles: on to the left is just the <TextBlock Text="Test"part and to the right is the button <Button x:Name="ButtonTest which is stretched to fill the height of the rectangle.

However when I click in the upper-right part of the rectangle, the local:DropDownToggleButton itself receives the event and not the button that is also present there. It is as if the Button only responds to mouse events received by the Textblock in the content of the button. How can I make the whole area of the button responsive to mouse clicks?

The custom control reacts on the Clicked or PreviewMouseDown event of the button. Both events have the same problem. Also adding Panel.ZIndex="1"doesn't help.

<local:DropDownToggleButton ToolTip="Show" DropDownButton="{Binding ElementName=ButtonTest}"
    VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" Padding="0" BorderThickness="0"
     Style="{StaticResource {x:Static ToolBar.ToggleButtonStyleKey}}">
    <local:DropDownToggleButton.DropDownMenu>
        <ContextMenu>
            <ContextMenu.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Background="WhiteSmoke"></StackPanel>
                </ItemsPanelTemplate>
            </ContextMenu.ItemsPanel>
            <ContextMenu.ItemContainerStyle>
                <Style TargetType="{x:Type MenuItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type MenuItem}">
                                <TextBlock Padding="6" Text="{TemplateBinding Header}" Background="{TemplateBinding Background}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Margin" Value="0"/>
                    <Style.Triggers>
                        <Trigger Property="TextBlock.IsMouseOver" Value="True">
                            <Setter Property="Background" Value="{StaticResource mouseover}"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ContextMenu.ItemContainerStyle>
            <MenuItem Header="Test 1" />
            <MenuItem Header="Test 2"/>
        </ContextMenu>
    </local:DropDownToggleButton.DropDownMenu>
    <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
        <TextBlock Text="Test" VerticalAlignment="Center"/>
        <Button x:Name="ButtonTest" ToolTip="Other" Padding="0" Margin="0" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <ContentPresenter/>
                </ControlTemplate>
            </Button.Template>
            <TextBlock FontSize="16" FontFamily="Marlett" Text="6" VerticalAlignment="Center" />
        </Button>
    </StackPanel>
</local:DropDownToggleButton>

ndonohoe ndonohoe · Accepted Answer · 2014-11-24T16:39:28

The reason the button does not react is because you have taken away most of what you would expect a button to have, your button template is just the ContentPresenter, so the button is literally only the textblock. Try

        <ControlTemplate TargetType="Button">
            <Border Background="Transparent">
                <ContentPresenter/>
            </Border>
        </ControlTemplate>

How can I bring a Button in a custom control “to the front”?

1 Answers