wpf - ToggleButton 悬停和单击行为

Question

我为 ToggleButton 创建了一个 ContentTemplate 和 Style，它看起来就像你从 Microsoft 的 WebMatrix 中知道的那样。

但是，并非总是可以单击，也不会显示悬停效果。
我发现当我将鼠标悬停在按钮的图标或文本上时会出现单击/悬停区域。





悬停后可以用鼠标返回到右侧，并且悬停不会消失(应该如此)。

这是代码的重要部分:

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

ControlTemplate 和样式:

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

当您将鼠标悬停在按钮本身的整个宽度上时，应该会显示 ToggleButton 的悬停，并且还应该是可点击的。

我尝试使用不同的属性(如水平拉伸(stretch)和 IsHitTestVisible)来修复它，但我还没有得到它。 任何的想法？

已经看到这个线程并尝试了不同的解决方案，但无法弄清楚。 Problem with the mouse click on toggleButton in WPF

Answer 1

设置Background模板中最外层的控件到 Transparent ，这样无论内容是什么，它都应该进行 HitTest 。