WPF XAML: How to fix "Value cannot be null" with custom RoutedEvent

Question

I've define a custom RoutedEvent and use it in EventTrigger. But VS keep showing error.

Event definition:

public event RoutedEventHandler Lock
{
    add { AddHandler(LockEvent, value); }
    remove { RemoveHandler(LockEvent, value); }
}
public static readonly RoutedEvent LockEvent =
    EventManager.RegisterRoutedEvent("Lock", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(MyControl));

Event usage:

<UserControl.Triggers>
    <EventTrigger RoutedEvent="{x:Static local:MyControl.LockEvent}">
        <BeginStoryboard/>
    </EventTrigger>
<UserControl.Triggers>

The code can be run but there is always a squiggly line under RoutedEvent="{x:Static local:MyControl.LockEvent}" and giving error:

Value cannot be null.
Parameter name: value

How can I fix this error? (or how to ignore it without Suppress XAML Designer errors?)

---

If I use the RoutedEvent like this: <EventTrigger RoutedEvent="local:MyControl.Lock">, another error occurs:

The event 'Lock' is not a RoutedEvent.  

And the design view crashed.

Answer 1

You reference an event like this using xmlnsAlias:ControlType.Event.

And you should add an event, compile then try and reference it.

Edit: Let's make this thing actually animate something and end to end it.

This works for me:

<UserControl x:Class="WpfApp2.UserControl1"
             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:WpfApp2"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Style>
        <Style TargetType="UserControl">
            <Setter Property="Background">
                <Setter.Value>
                    <SolidColorBrush Color="White"/>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Style>
        <UserControl.Triggers>
        <EventTrigger RoutedEvent="local:UserControl1.Lock">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation
                          To="Green" 
                          Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"
                          Duration="0:0:0.5"
                          />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        </UserControl.Triggers>
        <Grid>
        <Button Click="Button_Click" Content="Test" VerticalAlignment="Center"/>
    </Grid>
    </UserControl>

and

    public partial class UserControl1 : UserControl
    {
        public event RoutedEventHandler Lock
        {
            add { AddHandler(LockEvent, value); }
            remove { RemoveHandler(LockEvent, value); }
        }
        public static readonly RoutedEvent LockEvent =
            EventManager.RegisterRoutedEvent("Lock", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(UserControl1));
        public UserControl1()
        {
            InitializeComponent();
        }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        RoutedEventArgs args = new RoutedEventArgs(UserControl1.LockEvent);
        RaiseEvent(args);
    }

This works whatever platform I target and animates the usercontrol background to green.