MouseEnter和MouseLeave

Question

我在WPF中有一个用户控件。我在控件中有一个按钮控件。当鼠标进入和离开控件时，我希望控件淡入淡出。问题是，当鼠标进入按钮并离开控件时，它会淡出。下面是代码。

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

​

Answer 1

这就是我最终所做的，以使这项工作达到预期效果。

我将RoutedEvent更改为UserControl.MouseEnter而不是Mouse.MouseEnter。

然后，我创建了自己的用户控件，并创建了一个像这样的http://blogs.msdn.com/b/knom/archive/2007/10/31/wpf-control-development-3-ways-to-build-an-imagebutton.aspx图像按钮。

所以我修改后的代码现在看起来像这样……

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

​

Answer 2

我会做两个控件，一个包含除了你的按钮之外的所有东西，另一个只包含按钮。然后把它们放在一个网格中，这样它们就会堆叠在一起，瞧。