按钮中的IsMouseOver

Question

我正在创建一个带有向下箭头的按钮：

alt text http://www.robbertdam.nl/share/so/1.png

箭头实际上是一个按钮中的一个按钮。

当鼠标位于我用红点指出的位置时，它看起来像这样(这很好)：

alt text http://www.robbertdam.nl/share/so/3.png

内部按钮正常亮起。但是当它稍微向上时，它看起来像下面的图片(不好，内部按钮没有被选中)：

alt text http://www.robbertdam.nl/share/so/2.png

这似乎与父按钮上的画笔(透明度等)有关。有人能给我解释一下这个系统是怎么工作的吗？(或者给我一些关于这方面的文档)。是否有一种方法可以强制内部按钮捕获所有鼠标事件？

完整代码如下：

主代码：

<WrapPanel>
    <Button Height="40" Template="{StaticResource GlassButton}" >
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Column="0" Margin="5,0,5,0" Text="Button with down arrow" Foreground="White" VerticalAlignment="Center" />
            <Button Grid.Column="2" Template="{StaticResource TransparantGlassButton}" Height="40" VerticalAlignment="Center">
                <Path Margin="5,0,5,0" x:Name="Arrow" Grid.Column="1" Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z" />
            </Button>
        </Grid>
    </Button>

</WrapPanel>

资源：

​

<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Animations.xaml"/>
    <ResourceDictionary Source="Brushes.xaml"/>
</ResourceDictionary.MergedDictionaries>

<ControlTemplate x:Key="GlassButton" TargetType="{x:Type ButtonBase}">
    <Border BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
        <Border x:Name="border" Background="{StaticResource ButtonBaseBrush}" BorderBrush="{StaticResource ButtonInnerBorderBrush}" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.507*"/>
                    <RowDefinition Height="0.493*"/>
                </Grid.RowDefinitions>
                <Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4" Background="{StaticResource ButtonLitBrush}" />
                <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/>
                <Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0" Background="{StaticResource ButtonGlowOverlay}" />
            </Grid>
        </Border>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Opacity" TargetName="shine" Value="0.4"/>
            <Setter Property="Background" TargetName="border" Value="#DCE38819"/>
            <Setter Property="Visibility" TargetName="glow" Value="Hidden"/>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}"/>
            </Trigger.ExitActions>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" TargetName="border" Value="Gray"/>
            <Setter Property="Opacity" TargetName="content" Value="0.5"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate x:Key="TransparantGlassButton" TargetType="{x:Type ButtonBase}">
    <Border>
        <Border x:Name="border" Background="Transparent" BorderBrush="{StaticResource ButtonInnerBorderBrush}">
            <Grid>
                <Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" CornerRadius="0,4,4,0" BorderBrush="WhiteSmoke" BorderThickness="1,0,0,0" Background="{StaticResource ButtonLitBrush}" />
                <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" />
                <Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="0,4,4,0" Background="Transparent" />
            </Grid>
        </Border>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Opacity" TargetName="shine" Value="0.4"/>
            <Setter Property="Background" TargetName="border" Value="#DCE38819"/>
            <Setter Property="Visibility" TargetName="glow" Value="Hidden"/>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}"/>
            </Trigger.ExitActions>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" TargetName="border" Value="Gray"/>
            <Setter Property="Opacity" TargetName="content" Value="0.5"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate x:Key="TransparantGlassButton2" TargetType="{x:Type ButtonBase}">
    <Border>
        <Border x:Name="border" Background="Transparent" BorderBrush="{StaticResource ButtonInnerBorderBrush}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.507*"/>
                    <RowDefinition Height="0.493*"/>
                </Grid.RowDefinitions>
                <Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="0,4,4,0" BorderBrush="WhiteSmoke" BorderThickness="1,0,0,0" Background="{StaticResource ButtonLitBrush}" />
                <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/>
                <Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" Grid.RowSpan="2" CornerRadius="0,4,4,0" Background="Transparent" />
            </Grid>
        </Border>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Opacity" TargetName="shine" Value="0.4"/>
            <Setter Property="Background" TargetName="border" Value="#DCE38819"/>
            <Setter Property="Visibility" TargetName="glow" Value="Hidden"/>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}"/>
            </Trigger.ExitActions>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" TargetName="border" Value="Gray"/>
            <Setter Property="Opacity" TargetName="content" Value="0.5"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

​

Answer 1

你的“闪亮”Border正在覆盖按钮。只需在上面添加IsHitTestVisible="False"，它就会工作，我在XamlPad中检查过了。

Answer 2

我不确定这是否有帮助，因为你似乎使用了透明的背景。但我注意到，如果UI元素没有颜色(null)，命中测试将失败。取而代之的是你必须使用同样的透明颜色。

问候你，马蒂亚斯