Question

I’ve spent all day trying to figure out why this user control crashes VS2010 (Windows Phone 7.1 development). Application runs this control with no problem, but when I go to design mode in MainPage.xaml – VS crash.

<UserControl x:Class="blabla.Controls.Tile"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}">

    <UserControl.Resources>
        <Storyboard x:Name="SwitchSidesAnimation">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="FrontSide">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="90"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="90"/>
                <EasingDoubleKeyFrame x:Name="MoveThisForPause1" KeyTime="0:0:6" Value="-90"/>
                <EasingDoubleKeyFrame x:Name="MoveThisForPause2" KeyTime="0:0:6.2" Value="-90"/>
                <EasingDoubleKeyFrame x:Name="MoveThisForPause3" KeyTime="0:0:6.4" Value="0"/>
                <EasingDoubleKeyFrame x:Name="MoveThisForPause4" KeyTime="0:0:12" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="BackSide">
                <EasingDoubleKeyFrame KeyTime="0" Value="-90"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-90"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
                <EasingDoubleKeyFrame x:Name="MoveThisForPause5" KeyTime="0:0:6" Value="0"/>
                <EasingDoubleKeyFrame x:Name="MoveThisForPause6" KeyTime="0:0:6.2" Value="90"/>
                <EasingDoubleKeyFrame x:Name="MoveThisForPause7" KeyTime="0:0:6.4" Value="90"/>
                <EasingDoubleKeyFrame x:Name="MoveThisForPause8" KeyTime="0:0:12" Value="90"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="FrontSide">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.4">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame x:Name="MoveThisForPause9" KeyTime="0:0:6">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame x:Name="MoveThisForPause10" KeyTime="0:0:6.4">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame x:Name="MoveThisForPause11" KeyTime="0:0:12">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="FrontSide">
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
                <EasingDoubleKeyFrame x:Name="MoveThisForPause12" KeyTime="0:0:6" Value="0"/>
                <EasingDoubleKeyFrame x:Name="MoveThisForPause13" KeyTime="0:0:6.2" Value="0"/>
                <EasingDoubleKeyFrame x:Name="MoveThisForPause14" KeyTime="0:0:6.4" Value="0"/>
                <EasingDoubleKeyFrame x:Name="MoveThisForPause15" KeyTime="0:0:12" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>

        <!-- Front side -->
        <Grid x:Name="FrontSide" Grid.Column="0" Grid.Row="0"
              Background="{Binding FrontBackground}">
            <Image Source="{Binding FrontImage}" />
        </Grid>
        <!-- /Front side -->

        <!-- Back side -->
        <Grid x:Name="BackSide" Grid.Column="0" Grid.Row="0"
              Background="{Binding BackBackground}">
            <Grid.Projection>
                <PlaneProjection RotationX="-90" />
            </Grid.Projection>
            <Image Source="{Binding BackImage}" />
        </Grid>
        <!-- /Back side -->
    </Grid>
</UserControl>

And now the code.

namespace blabla.Controls
{
    public partial class Tile : UserControl
    {
        /// <summary>
        /// Defines if the tile has two sides.
        /// </summary>
        public bool IsTwoSided
        {
            get { return (bool)GetValue(IsTwoSidedProperty); }
            set
            {
                SetValue(IsTwoSidedProperty, value);

                this.startAnimations();
            }
        }

        /// <summary>
        /// Image that will be displayed on front side.
        /// </summary>
        public BitmapImage FrontImage
        {
            get { return (BitmapImage)GetValue(FrontImageProperty); }
            set { SetValue(FrontImageProperty, value); }
        }

        /// <summary>
        /// Image that ill be displayed on back side.
        /// </summary>
        public BitmapImage BackImage
        {
            get { return (BitmapImage)GetValue(BackImageProperty); }
            set { SetValue(BackImageProperty, value); }
        }

        /// <summary>
        /// Brush that will be used as background for front side.
        /// </summary>
        public Brush FrontBackground
        {
            get { return (Brush)GetValue(FrontBackgroundProperty); }
            set { SetValue(FrontBackgroundProperty, value); }
        }

        /// <summary>
        /// Brush that will be used as background for back side.
        /// </summary>
        public Brush BackBackground
        {
            get { return (Brush)GetValue(BackBackgroundProperty); }
            set { SetValue(BackBackgroundProperty, value); }
        }

        ///////////////////////////////////////////////////////////////////////////////////////////////////////

        public static readonly DependencyProperty IsTwoSidedProperty =
            DependencyProperty.Register("IsTwoSided", typeof(bool), typeof(Tile), new PropertyMetadata(false));

        public static readonly DependencyProperty FrontImageProperty =
            DependencyProperty.Register("FrontImage", typeof(BitmapImage), typeof(Tile), new PropertyMetadata(null));

        public static readonly DependencyProperty BackImageProperty =
            DependencyProperty.Register("BackImage", typeof(BitmapImage), typeof(Tile), new PropertyMetadata(null));

        public static readonly DependencyProperty FrontBackgroundProperty =
            DependencyProperty.Register("FrontBackground", typeof(Brush), typeof(Tile),
            new PropertyMetadata(new SolidColorBrush((Color)Application.Current.Resources["PhoneAccentColor"])));

        public static readonly DependencyProperty BackBackgroundProperty =
            DependencyProperty.Register("BackBackground", typeof(Brush), typeof(Tile),
            new PropertyMetadata(new SolidColorBrush((Color)Application.Current.Resources["PhoneAccentColor"])));

        ///////////////////////////////////////////////////////////////////////////////////////////////////////

        public Tile()
        {
            InitializeComponent();
            this.LayoutRoot.DataContext = this;
        }

        ///////////////////////////////////////////////////////////////////////////////////////////////////////

        /// <summary>
        /// Modifies animation frames' KeyTime to adjust time for new timing.
        /// <param name="pauseTime">Lenght of the pause.</param>
        /// </summary>
        private void setPauses(TimeSpan pauseTime)
        {
            // Sets pauses.
            EasingDoubleKeyFrame frameToModify;

            for(int i = 0; true; i++)
            {
                if(this.FindName("MoveThisForPause" + i) != null)
                {
                    frameToModify = (EasingDoubleKeyFrame)this.FindName("MoveThisForPause" + i);
                    frameToModify.KeyTime = KeyTime.FromTimeSpan(frameToModify.KeyTime.TimeSpan - TimeSpan.FromSeconds(5) + pauseTime);
                }
                else
                {
                    break;
                }
            }
        }

        /// <summary>
        /// Starts animations.
        /// </summary>
        /// <param name="beginTime">Usually delay before first-time animation.</param>
        private void startAnimations()
        {
            // We start animations only if the tile is two sided.
            if(this.IsTwoSided)
            {
                // Stopping previous animation.
                this.SwitchSidesAnimation.Stop();

                // Sets correct pauses.
                this.setPauses(TimeSpan.FromSeconds(new Random().Next(5, 10)));

                // Starts animation.
                this.SwitchSidesAnimation.BeginTime = TimeSpan.FromSeconds(new Random().Next(2, 15));
                this.SwitchSidesAnimation.RepeatBehavior = RepeatBehavior.Forever;
                this.SwitchSidesAnimation.Begin();
            }
            else
            {
                this.SwitchSidesAnimation.Stop();
            }
        }
    }
}

Answer 1

I have been able to reproduce this crash, admittedly using the non-Phone version of Silverlight, and in Visual Web Dev Express as opposed to the full version of VS.

The problem ultimately comes down to the default values specified in these two dependency property declarations:

    public static readonly DependencyProperty FrontBackgroundProperty =
        DependencyProperty.Register("FrontBackground", typeof(Brush), typeof(Tile),
        new PropertyMetadata(new SolidColorBrush((Color)Application.Current.Resources["PhoneAccentColor"])));

    public static readonly DependencyProperty BackBackgroundProperty =
        DependencyProperty.Register("BackBackground", typeof(Brush), typeof(Tile),
        new PropertyMetadata(new SolidColorBrush((Color)Application.Current.Resources["PhoneAccentColor"])));

The crash went away after I replaced the default values with null (using Notepad++ as Visual Web Dev Express was crashing), deleted the project’s bin and obj folders and restarted Visual Web Dev Express. When I restarted VWDX, it complained that it couldn’t find the type Tile, but that was because I had deleted the bin and obj folders. A rebuild sorted that out.

I can only guess at exactly what the problem is. At the point the Tile class is being statically initialized, Application.Current might be null, Application.Current.Resources might be null, or Application.Current.Resources["PhoneAccentColor"] might be null (which would cause the cast to Color to fail, as Color is a struct). Perhaps the VS designer doesn’t handle very well exceptions thrown during static initialization of types?

Incidentally, I’d also like to point out another couple of potential problems. Firstly, this is your IsTwoSided property:

    /// <summary>
    /// Defines if the tile has two sides.
    /// </summary>
    public bool IsTwoSided
    {
        get { return (bool)GetValue(IsTwoSidedProperty); }
        set
        {
            SetValue(IsTwoSidedProperty, value);

            this.startAnimations();
        }
    }

It looks like you want the startAnimations method to be called whenever your IsTwoSided dependency property changes. The code you’ve written above will not achieve that.

When Silverlight changes the value of a dependency property, it doesn’t call your the property setter to do this. If you want things to happen when a dependency property’s value changes, use a property-changed callback instead.

Secondly, in Tile.xaml, you declare the Storyboard in <UserControl.Resources> as follows:

    <Storyboard x:Name="SwitchSidesAnimation">

I would recommend using x:Key instead of x:Name, for two reasons:

• all items within resource dictionaries (except implicit styles) must have an x:Key or an x:Name to identify them. VS supports using x:Name in place of x:Key, but that exists as a legacy support mechanism only.

• using x:Name in an element in a user-control XAML causes VS to create a field with that name in InitializeComponent() in the auto-generated part of your Tile class (in Tile.g.cs somewhere within obj\Debug). However, just because you can stick x:Name on an element doesn’t necessarily mean you’ll be able to access the corresponding object in the generated field. Because there is no UIElement named SwitchSidesAnimation in your Tile.xaml (Storyboards are not UIElements), the SwitchSidesAnimation field will always be null.

  Indeed, the MSDN documentation for the x:Key attribute (also linked to above) mentions that

  A FindName call using a key value will not retrieve a keyed resource

  (FindName is the method used to look up a control by name. If you look in Tile.g.cs you’ll see it used there.)

I’d recommend always using x:Key within resource dictionaries so you’re not led to believe that you can access this Storyboard directly in code-behind.

To access the storyboard in code-behind, use

    this.Resources["SwitchSidesAnimation"] as Storyboard

In fact, if you add the following property, you won’t have to change your startAnimations method:

    private Storyboard SwitchSidesAnimation
    {
        get { return this.Resources["SwitchSidesAnimation"] as Storyboard; }
    }