Question

I m creating a button with a down arrow:

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

The arrow is actually a button within a button.

When the mouse is at the location I pointed out with a red dot it looks like this (which is good):

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

The inner button lights up okay. But when going slightly up it looks like the following picture (not good, the inner-button is not selected):

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

It appears that this has to do with brushes on the parent button (transparency, etc.). Can anyone explain me how this system works? (or point me to some documentation about this). I there a way I can force the inner-button to capture all mouse events?

Complete code follows:

Main code:

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

Resources:

<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

Your "shine" Border is covering the button. Simply add IsHitTestVisible="False" on it and it will work, I checked that in XamlPad.

Answer 2

I m not sure this helps since you seem to use a transparent background. But I noticed that a hit test will fail if the UI element has no color (null). Instead you have to use same transparent color.

Regards, Mathias

友情链接