Wpf 穆塞纳和穆塞莱夫_Wpf_Xaml

Wpf 穆塞纳和穆塞莱夫

wpf xaml

Wpf 穆塞纳和穆塞莱夫,wpf,xaml,Wpf,Xaml,我在WPF中有一个用户控件。我在控件中有一个按钮控件。当鼠标进入和离开控件时，我希望控件淡入淡出。问题是当鼠标进入按钮并离开控件时，它会消失。下面是代码 <UserControl x:Class="WpfPresentationEditor.PresentationWindowControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http:/

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

这就是我最终所做的，以使这项工作按预期进行

我将RouteEvent更改为UserControl.MouseEnter，而不是Mouse.MouseEnter

然后我创建了自己的用户控件，并创建了一个像这样的图像按钮

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

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

这就是我最终所做的，以使这项工作按预期进行

我将RouteEvent更改为UserControl.MouseEnter，而不是Mouse.MouseEnter

然后我创建了自己的用户控件，并创建了一个像这样的图像按钮

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

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

我将制作两个控件，一个包含除按钮以外的所有内容，另一个仅包含按钮。

然后把它们都放在一个网格中，这样它们就会互相堆叠，瞧。

我会制作两个控件，一个包含除按钮以外的所有内容，另一个只包含按钮。

然后将它们放在一个网格中，这样它们就可以互相堆叠。瞧。

我想你要么需要使用鼠标捕捉（通过代码隐藏），要么放下内部按钮，自己创建和管理按钮。因为按钮将停止鼠标事件的“冒泡”，因为它使用这些事件本身。我不是100%确定（因此我的评论），所以我很好奇是否有其他人有其他解决方案。我认为您需要使用鼠标捕捉（通过代码隐藏）或删除内部按钮，然后自己创建和管理按钮。因为按钮将停止鼠标事件的“冒泡”，因为它使用这些事件本身。我不是100%肯定这一点（因此我的评论），所以我很好奇是否有其他人有替代的解决方案。