ToggleButton悬停并单击行为

时间:2012-01-17 10:28:05

标签: wpf xaml styles controls controltemplate

我为ToggleButton创建了一个ContentTemplate和Style,它看起来就像你从微软的WebMatrix那里知道的那样。

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

Hover and click don't work

Hover and click work

一旦徘徊,可以用鼠标回到右边,悬停不会消失(应该如此)。

以下是代码的重要部分:

            <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,但我还没有得到它。 有什么想法吗?

已经看过这个帖子并尝试了不同的解决方案,但无法弄明白。 Problem with the mouse click on toggleButton in WPF

1 个答案:

答案 0 :(得分:5)

将模板中最外层控件的Background设置为Transparent,无论内容是什么,都应该按照测试方式进行测试。