Question

I have an usercontrol in silverlight that I’m trying to convert to custom control.
The usercontrol is working.
The customcontrol is working BUT has its storyboard not working.

the control is :

public class MyControl : Control
{
    public MyControl()
    {
        DefaultStyleKey = typeof(MyControl);
    }

    public static readonly DependencyProperty IsStartingProperty = DependencyProperty.Register("IsStarting", typeof(bool), typeof(MyControl), new PropertyMetadata(new PropertyChangedCallback(OnIsStartingChanged)));

    private static void OnIsStartingChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
    {
        MyControl control = obj as MyControl;
        if (control != null && control._layoutRoot != null && control._storyboard != null)
        {
            if ((bool)e.NewValue)
            {
                control._layoutRoot.Visibility = Visibility.Visible;
                control._storyboard.Begin();
            }
            else
            {
                control._layoutRoot.Visibility = Visibility.Collapsed;
                control._storyboard.Stop();
            }
        }
    }

    private Canvas _layoutRoot;
    private Storyboard _storyboard;

    public override void OnApplyTemplate()
    {
        _layoutRoot = GetTemplateChild("LayoutRoot") as Canvas;
        _storyboard = GetTemplateChild("IndicatorStoryboard") as Storyboard;
        base.OnApplyTemplate();
    }

    public bool IsStarting
    {
        get { return (bool)GetValue(IsStartingProperty); }
        set { SetValue(IsStartingProperty, value); }
    }
}

On debug, no error on control._storyboard.Begin();, but I can’t see the animation …

Does someone has an idea ? How to work with storyboard ?

Thanks in advance for any help

EDIT : Full source sample is available : http://vpclip.virtua-peanuts.net/WindowsPhoneApplication1.zip

Answer 1

If you set IsBusy to true in your button click handler you will see the animation does work. The problem is you are setting it to true before it has loaded so _layoutRoot and _storyboard are null and the animation never begins.

public class CustomBusyControl : Control
{
    public CustomBusyControl()
    {
        DefaultStyleKey = typeof(CustomBusyControl);
        Loaded += (s,e) => ToggleBusy(this);
    }

    public static readonly DependencyProperty IsBusyProperty = DependencyProperty.Register("IsBusy", typeof(bool), typeof(CustomBusyControl), new PropertyMetadata(new PropertyChangedCallback(OnIsBusyChanged)));

    private static void OnIsBusyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
    {
        ToggleBusy(obj as CustomBusyControl);
    }

    private static void ToggleBusy(CustomBusyControl control)
    {
        if (control != null && control._layoutRoot != null && control._storyboard != null)
        {
            if ((bool)control.IsBusy)
            {
                control._layoutRoot.Visibility = Visibility.Visible;
                control._storyboard.Begin();
            }
            else
            {
                control._layoutRoot.Visibility = Visibility.Collapsed;
                control._storyboard.Stop();
            }
        }
    }

    private Canvas _layoutRoot;
    private Storyboard _storyboard;

    public override void OnApplyTemplate()
    {
        _layoutRoot = GetTemplateChild("LayoutRoot") as Canvas;
        Debug.Assert(_layoutRoot != null, "LayoutRoot is null");
        _storyboard = GetTemplateChild("IndicatorStoryboard") as Storyboard;
        base.OnApplyTemplate();
    }

    public bool IsBusy
    {
        get { return (bool)GetValue(IsBusyProperty); }
        set { SetValue(IsBusyProperty, value); }
    }
}