Question

I created a ContentTemplate and Style for the ToggleButton which looks like the one you know from Microsoft’s WebMatrix.

However, it’s not always possible to click and the hover effect isn’t shown too.
I figured out that the click/hover area appears when I’m hovering over the icon or the text of my button.

Once hovered It’s possible to get back to right with the mouse and the hover doesn’t disappear (as it should).

Here’s the important part of the code:

            <StackPanel.Resources>
                <Style TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource NavigationButton}" />
            </StackPanel.Resources>
            <ToggleButton x:Name="_btn_Buchungen" Click="_btn_Buchungen_Click">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <Image Source="{StaticResource Buchungen}" Width="16" Height="16" />
                    <TextBlock Text="Buchungen" />
                </StackPanel>
            </ToggleButton>

The ControlTemplate and Styles:

<Style TargetType="{x:Type ToggleButton}" x:Key="NavigationButton">
            <Setter Property="Background" Value="{x:Null}" />
            <Setter Property="Height" Value="35" />
            <Setter Property="BorderBrush" Value="{x:Null}" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border Name="OuterBorder" BorderThickness="0,1,0,0" >
                            <Border Name="InnerBorder" BorderThickness="0,1,0,1" >
                                <ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center"/>
                            </Border>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Style" TargetName="InnerBorder" Value="{StaticResource ButtonInnerBHover}" />
                                <Setter Property="Style" TargetName="OuterBorder" Value="{StaticResource ButtonOuterBHover}" />
                            </Trigger>
                            <Trigger Property="IsChecked"  Value="true">
                                <Setter Property="Style" TargetName="InnerBorder" Value="{StaticResource ButtonInnerBHover}" />
                                <Setter Property="Style" TargetName="OuterBorder" Value="{StaticResource ButtonOuterBHover}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Resources>
                <Style TargetType="{x:Type TextBlock}">
                    <Setter Property="TextAlignment" Value="Left" />
                    <Setter Property="Margin" Value="10, 0,0,0" />
                    <Setter Property="Effect">
                        <Setter.Value>
                            <DropShadowEffect BlurRadius="1" Direction="270" ShadowDepth="1" Color="White" />
                        </Setter.Value>
                    </Setter>
                </Style>
                <Style TargetType="{x:Type StackPanel}">
                    <Setter Property="Margin" Value="20,0,0,0" />
                </Style>
            </Style.Resources>
        </Style>

The ToggleButton’s hover should be shown when you are mouse over the full width of the button itself and should also be clickable.

I tried t fix it with different properties like horizontal stretching and IsHitTestVisible but I didn’t get it yet. Any idea?

Already saw this thread and tried different things with the solution but couldn’t figure it out. Problem with the mouse click on toggleButton in WPF

Answer 1

Set the Background of the outermost control in the template to Transparent, that way it should hit-test, no matter what the content is.