如下所示，xaml文件创建了一个状态，并在该状态下，将矩形旋转了75度。


<UserControl
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 x:Class="SilverlightApplication30.Page"
 Width="640" Height="480" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" x:Name="Root">

 <Grid x:Name="LayoutRoot" Background="White">
  <vsm:VisualStateManager.VisualStateGroups>
   <vsm:VisualStateGroup x:Name="VisualStateGroup">
    <vsm:VisualStateGroup.Transitions>
     <vsm:VisualTransition GeneratedDuration="00:00:01"/>
    </vsm:VisualStateGroup.Transitions>
    <vsm:VisualState x:Name="State1">
     <Storyboard>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"

Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
       <SplineDoubleKeyFrame KeyTime="00:00:00" Value="75"/>
      </DoubleAnimationUsingKeyFrames>
     </Storyboard>
    </vsm:VisualState>
   </vsm:VisualStateGroup>
  </vsm:VisualStateManager.VisualStateGroups>
  <Rectangle Margin="168,168,208,192" x:Name="rectangle" RenderTransformOrigin="0.5,0.5" Fill="#FF8E1919" Stroke="#FF000000">
   <Rectangle.RenderTransform>
    <TransformGroup>
     <ScaleTransform/>
     <SkewTransform/>
     <RotateTransform/>
     <TranslateTransform/>
    </TransformGroup>
   </Rectangle.RenderTransform>
  </Rectangle>
 </Grid>
</UserControl>

 

下面，一层层分析，使用本地代码来实现等效的功能：

 

首先，创建一个IXRVisualStateGroupCollection(即状态组的集合)，并与Grid进行绑定

 

IXRVisualStateGroupCollection* pVisualStateGroups;
app->CreateObject(IID_IXRVisualStateGroupCollection, &pVisualStateGroups);
LayoutRoot->SetAttachedProperty(L"VisualStateManager.VisualStateGroups", pVisualStateGroups);

 

创建一个状态组，并将其添加到状态组集合中

 

IXRVisualStateGroupPtr pGroup;
app->CreateObject(IID_IXRVisualStateGroup,&pGroup);
pGroup->SetName(L"VisualStateGroup");
pVisualStateGroups->Add(pGroup,NULL);

 

通过状态组下的IXRVisualTransitionCollection来设置通用的切换时间，现在暂定为1秒

 

IXRVisualTransitionCollectionPtr transitions;
app->CreateObject(IID_IXRVisualTransitionCollection,&transitions);
pGroup->SetTransitions(transitions);
IXRVisualTransitionPtr transtion; 
app->CreateObject(IID_IXRVisualTransition,&transtion);
XRDuration duration;
duration.DurationType = duration.DurationType_TimeSpan;
duration.TimeSpan.Ticks = duration.TimeSpan.TicksPerSecond;
transtion->SetGeneratedDuration(&duration);
transitions->Add(transtion,NULL);

 

创建状态集合，并将新建的状态添加进去

 

IXRVisualStateCollectionPtr StateCollection;
pGroup->GetStates(&StateCollection);
IXRVisualStatePtr state;
app->CreateObject(IID_IXRVisualState,&state);
state->SetName(L"State1");
StateCollection->Add(state,NULL);

 

创建一个新的故事板，并将其设置到刚创建的状态中

 

IXRStoryboardPtr Storyboard;
app->CreateObject(IID_IXRStoryboard,&Storyboard);
state->SetStoryboard(Storyboard);

 

创建一个IXRDoubleAnimationUsingKeyFrames对象，将它添加到故事板中，
[注:IXRDoubleAnimationUsingKeyFrames派生自IXRTimeline，通过在不同帧时对同一属性设置不同的数值来实现动画效果]

 

IXRTimelineCollectionPtr children;
Storyboard->GetChildren(&children);
IXRDoubleAnimationUsingKeyFramesPtr animation;
app->CreateObject(IID_IXRDoubleAnimationUsingKeyFrames,&animation);
children->Add(animation,NULL);

 

设置animation对象的通用属性

 

XRTimeSpan span;
memset(&span,0,sizeof(XRTimeSpan));
animation->SetBeginTime(&span);
animation->SetBeginTime(&span);
animation->SetDuration(&duration);
animation->SetAttachedProperty(L"Storyboard.TargetName",L"rectangle");
animation->SetAttachedProperty(L"Storyboard.TargetProperty",L"(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)");

 

创建新的一帧，并将其添加到animation的帧集合中

 

IXRDoubleKeyFrameCollectionPtr frameCollection;
animation->GetKeyFrames(&frameCollection);
IXRSplineDoubleKeyFramePtr keyFrame;
app->CreateObject(IID_IXRSplineDoubleKeyFrame,&keyFrame);
XRKeyTime time;
time.Ticks = time.TicksPerSecond;
keyFrame->SetKeyTime(&time);
keyFrame->SetValue(75);
frameCollection->Add(keyFrame,NULL);

 

OK，大功告成，转换状态，看到了矩形的变化过程

 

Root->GoToVisualState(L"State1",true);