MouseEnter和MouseLeave

我在WPF中有一個用戶控件。我在控件中有一個按鈕控件。當鼠標進入並離開控件時，我希望控件淡入淡出。問題是當鼠標進入按鈕並離開控制時，它會消失。以下是代碼。MouseEnter和MouseLeave

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

來源

2011-09-28 Jesse Seger

我想你要麼需要使用鼠標捕獲（通過代碼隱藏），要麼刪除內部按鈕，並自己創建和管理按鈕。因爲按鈕將停止鼠標事件的「冒泡」，因爲它使用這些事件本身。我不是100％肯定（因此我的評論），所以我很好奇，如果其他人有替代解決方案。 – CodingGorilla

這是我最後做的期望，使這項工作。

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

來源

2011-09-29 15:55:15

我會做2個控件，一個包含一切，但你的按鈕和另一個只是按鈕。然後把它們放在一個網格中，這樣它們就會彼此堆疊起來，瞧。

來源

2011-09-29 16:04:32

這確實不能解決不透明動畫。 –

MouseEnter和MouseLeave

回答

相關問題