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();
}
}
}
}