WPF - 配置自定义事件以触发用户控件上的开始 Storyboard

Question

我希望有人能够在这里提供帮助，要么建议如何解决我所拥有的问题，要么提出一种更好的方法来实现我所追求的目标。

我有一个简单的自定义控件，我希望能够在其上启动/停止/暂停/恢复不透明动画。我查看了各种解决方案并认为使用 EventTrigger带定制 RoutedEvent是前进的道路。我可以获得以下内容来处理标准事件(例如 MouseDown )，但无法让我的自定义事件启动 Storyboard。

在加载事件中执行之前，我尝试在构造函数中引发事件，但两者都没有任何区别。

我认为它没有任何相关影响，但这也托管在 ElementHost 中。对于winform。

xaml:

<UserControl x:Class="Fraxinus.BedManagement.WpfControls.FraxIconX"
             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" 
             xmlns:local="clr-namespace:Fraxinus.BedManagement.WpfControls"
             mc:Ignorable="d" 
             d:DesignHeight="16" d:DesignWidth="16"
             Loaded="FraxIconX_Loaded">
    <!--Height="16" Width="16" Background="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Control}, AncestorLevel=1}}" -->
    <UserControl.Resources>
        <ResourceDictionary>
            <Border x:Key="RoundedBorderMask" Name="iconBorder" CornerRadius="4" Background="White" BorderThickness="2" Height="16" Width="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Dictionary.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Border BorderThickness="2" CornerRadius="4" Height="16" Width="16" HorizontalAlignment="Center" VerticalAlignment="Center">
        <local:FraxCanvas x:Name="fraxCanvas" Height="16" Width="16" HorizontalAlignment="Center" VerticalAlignment="Center">
            <local:FraxCanvas.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" GradientStops="{Binding GradientStops}" />
            </local:FraxCanvas.Background>
            <local:FraxCanvas.Triggers>
                <EventTrigger RoutedEvent="local:FraxCanvas.OnStartStoryboard" SourceName="fraxCanvas">
                    <BeginStoryboard x:Name="storyboard">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0.25" AutoReverse="True" Duration="0:0:1" RepeatBehavior="Forever"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </local:FraxCanvas.Triggers>
            <local:FraxCanvas.OpacityMask>
                <!--https://wpf.2000things.com/2012/05/11/556-clipping-to-a-border-using-an-opacity-mask/-->
                <VisualBrush Visual="{StaticResource RoundedBorderMask}"></VisualBrush>
            </local:FraxCanvas.OpacityMask>
            <Image HorizontalAlignment="Center" VerticalAlignment="Center" Height="16" Width="16" Source="{DynamicResource BitmapClockPng}" />
        </local:FraxCanvas>
    </Border>
</UserControl>

隐藏代码

    public partial class FraxIconX : UserControl
    {

        public GradientStopCollection GradientStops { get; set; }

        public FraxIconX() { }

        public FraxIconX(Color backColour, int width = 16, int height = 16)
        {
            Width = width;
            Height = height;
            GradientStops = new GradientStopCollection { new GradientStop(Colors.AliceBlue, 0.0), new GradientStop(Colors.Navy, 1.0) };
            Background = new SolidColorBrush(backColour);
            DataContext = this;
            InitializeComponent();
        }
        public void FraxIconX_Loaded(object sender, RoutedEventArgs args)
        {
            RaiseEvent(new RoutedEventArgs(FraxCanvas.StartStoryboardEvent));
        }
    }

FraxCanvas:

    public class FraxCanvas : Canvas
    {
        public static readonly RoutedEvent StartStoryboardEvent = EventManager.RegisterRoutedEvent("OnStartStoryboard", RoutingStrategy.Tunnel, typeof(RoutedEventHandler), typeof(FraxCanvas));

        public event RoutedEventHandler OnStartStoryboard
        {
            add
            {
                this.AddHandler(StartStoryboardEvent, value);
            }

            remove
            {
                this.RemoveHandler(StartStoryboardEvent, value);
            }
        }
    }

Answer 1

两个问题。

您正在收听 EventTrigger.SourceName="fraxCanvas" ，但该事件在其他地方引发(父 UserControl)。EventTrigger.SourceName是一个过滤器属性，它允许
专门处理特定元素的路由事件。如果不设置 EventTrigger.SourceName ,
触发器将处理指定的事件，无论
来源。

路由事件永远不会到达 FraxCanvas元素，因为 parent 提出了它。RoutingStrategy.Bubble :事件来自事件源，FraxIconX元素，对
可视化树根，例如 Window .RoutingStrategy.Tunnel :事件从树根开始，例如，Window和 停止 在事件源，FraxIconX元素。

解决方法是删除 EventTrigger.SourceName属性并将触发器移动到事件源( UserControl )或任何事件源的父元素:

<UserControl>    
  <UserControl.Triggers>
    <EventTrigger RoutedEvent="local:FraxCanvas.OnStartStoryboard">
      <BeginStoryboard x:Name="storyboard">
        <Storyboard>
          <DoubleAnimation Storyboard.TargetName="fraxCanvas" 
                           Storyboard.TargetProperty="Opacity" 
                           From="1" To="0.25" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </UserControl.Triggers>

  <Border>
    <FraxCanvas x:Name="fraxCanvas" />
  </Border>
</UserControl>