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），命中测试将失败。相反，你必须使用相同的透明色。

问候，Mathias

IsMouseOver在Button中

2 个答案: