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 的悬停，并且也应可单击。

我尝试使用不同的属性（例如水平拉伸和 IsHitTestVisible）修复它，但我还没有得到它。 有什么想法吗？

已经看到了这个帖子，并尝试了不同的解决方案，但无法弄清楚。 鼠标单击 WPF 中的切换按钮时出现问题

Answer 1

将模板中最外层控件的背景设置为透明，这样无论内容是什么，它都应该进行命中测试。