MouseEnter and MouseLeave

I have a user control in WPF. I have a button control within the control. I want the control to fade in and out when the mouse enters and leaves the control. The p开发者_如何学JAVAroblem is when the mouse enters the button and leaves the control, it fades. Below is the code.

<UserControl x:Class="WpfPresentationEditor.PresentationWindowControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="68" d:DesignWidth="793">
<UserControl.Resources>
    <Storyboard x:Key="onMouseEnter">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BackEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="onMouseLeave">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
            <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BackEase EasingMode="EaseOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
    <EventTrigger RoutedEvent="Mouse.MouseEnter">
        <BeginStoryboard x:Name="onMouseEnter_BeginStoryBoard" Storyboard="{StaticResource onMouseEnter}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="Mouse.MouseLeave">
        <BeginStoryboard x:Name="onMouseLeave_BeginStoryBoard" Storyboard="{StaticResource onMouseLeave}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="UserControl.Loaded">
        <BeginStoryboard Storyboard="{StaticResource onMouseLeave}" />
    </EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot" Opacity=".5">
    <Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent"></Canvas>
    <Button Click="btnClose_Click" Height="44" HorizontalAlignment="Left" Name="btnClose" VerticalAlignment="Center" Width="44" Margin="12,12,0,12">
        <Button.Background>
            <ImageBrush ImageSource="images/exit.png" />
        </Button.Background>
    </Button>
</Grid>

This is what I ended up doing to make this work as desired.

I changed the RoutedEvent to UserControl.MouseEnter rather than Mouse.MouseEnter.

Then I created my own user control and created an Image button like this http://blogs.msdn.com/b/knom/archive/2007/10/31/wpf-control-development-3-ways-to-build-an-imagebutton.aspx.

So my altered code now looks like this....

<UserControl x:Class="WpfPresentationEditor.PresentationWindowControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="68" d:DesignWidth="793" xmlns:my="clr-namespace:WpfPresentationEditor">
<UserControl.Resources>
    <ImageBrush x:Key="exitImage" ImageSource="images/exit.png"/>
        <!--These are the story boards for the control-->
    <Storyboard x:Key="onMouseEnter">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BackEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="onMouseLeave">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
            <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BackEase EasingMode="EaseOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
    <EventTrigger RoutedEvent="UserControl.MouseEnter">
        <BeginStoryboard x:Name="onMouseEnter_BeginStoryBoard" Storyboard="{StaticResource onMouseEnter}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="UserControl.MouseLeave">
        <BeginStoryboard x:Name="onMouseLeave_BeginStoryBoard" Storyboard="{StaticResource onMouseLeave}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="UserControl.Loaded">
        <BeginStoryboard Storyboard="{StaticResource onMouseLeave}" />
    </EventTrigger>
</UserControl.Triggers>
<StackPanel x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  Orientation="Horizontal" Background="Black">
    <my:ImageButtonControl ButtonBase.Click="btnClose_Click" x:Name="imageButtonControl1" Width="44" Image="images/exit.png" Height="44"/>
</StackPanel>

I would make 2 controls, one containing everything but your button and another one with just the button. Then put them both in a grid so they will stack upon each other, and voila.