Animating a Double Collection Value at Runtime - silverlight

Question

Say I have a shape. I've given it a Stroke and StrokeThickness and a StrokeDashArray to get the desired dashed outline. Then I animate the StrokeDashOffset via VisualStateManager to get the "Marching Ants" style animation to it. Everything works great...
Except I want the default of the shape to NOT have a StrokeDashArray and instead want to set that based on a VisualState in the VisualStateManager except unfortunately as we know I can only do a DoubleAnimation on a Property, and not a Double Collection Value like what StrokeDashArray is...
My question is, is there a clever way I could animate that value during runtime so the shape in an UnSelected State has a solid Stroke but via the 'VisualStateManager' (maybe) still supply the StrokeDashOffset on the Selected State to the same shape? Or am I better off having two separate shapes and toggling the visibility between them so that each have their own default values?
If it would help visualize with a picture or something let me know and I'll add more to the question.

Answer 1

One option would be to animate a double property and create a new DoubleCollection that is bound to the StrokeDashArray.
Xaml:
<UserControl x:Class="SilverlightApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Name="UI">
<Grid DataContext="{Binding ElementName=UI}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="StrokeDashArrayAnimation">
<Storyboard BeginTime="0">
<DoubleAnimation Duration="0:0:5"
From="0"
Storyboard.TargetName="UI"
Storyboard.TargetProperty="StrokeValue"
To="10" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="lo"
Stroke="Red"
StrokeDashArray="{Binding StrokeArray}"
StrokeThickness="5" />
<Button Width="150"
Height="49"
Margin="29,65,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Click="Button_Click_1"
Content="Start" />
</Grid>
Code:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace SilverlightApplication1
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
public double StrokeValue
{
get { return (double)GetValue(StrokeValueProperty); }
set { SetValue(StrokeValueProperty, value); }
}
public static readonly DependencyProperty StrokeValueProperty =
DependencyProperty.Register("StrokeValue", typeof(double), typeof(MainPage),
new PropertyMetadata(0.0, OnStrokeValueChanged));
private static void OnStrokeValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var page = d as MainPage;
if (page != null) page.StrokeArray = new DoubleCollection { (double)e.NewValue, 1 };
}
public DoubleCollection StrokeArray
{
get { return (DoubleCollection)GetValue(StrokeArrayProperty); }
set { SetValue(StrokeArrayProperty, value); }
}
public static readonly DependencyProperty StrokeArrayProperty =
DependencyProperty.Register("StrokeArray", typeof(DoubleCollection), typeof(MainPage)
, new PropertyMetadata(new DoubleCollection { 0, 1 }));
private void Button_Click_1(object sender, RoutedEventArgs e)
{
VisualStateManager.GoToState(this, "StrokeDashArrayAnimation", false);
}
}
}