我正在显示一个画布,并希望当手机从纵向旋转到横向时,它会平滑地旋转90度。在Windows Phone 7中平滑地将控件从纵向旋转到纵向
看起来,当手机旋转(至少在模拟器中)画布会自动旋转,但过渡不是光滑的(即它从0到90度) - 我认为这是自动 - 布局功能。
我希望我的画布可以平滑地旋转,即不会突然从0跳到90度(就像自动布局功能一样)。我在混纺状态管理器设置两种状态,我调用如下
private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
if ((e.Orientation & PageOrientation.Landscape) != 0)
{
VisualStateManager.GoToState(this, "Landscape", true);
}
else
{
VisualStateManager.GoToState(this, "Portrait", true);
}
}
我已经设置了这之间的过渡如下:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OrientationStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Portrait" GeneratedDuration="0" To="Landscape">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="90"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="Landscape" GeneratedDuration="0" To="Portrait">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="90"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Portrait"/>
<VisualState x:Name="Landscape"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
有趣的一点是,它似乎在过渡应以90度开始并旋转回0,因为看起来自动布局功能首先启动。这是我应该做的吗?
或者我该如何重写自动布局功能,以便首先触发转换?
我只在模拟器中工作(等待漫长的App Hub注册过程),因此很难看出这是否是正确的方法。
VisualState有一个选项'Fluid Animation'。谷歌它... – Ku6opr 2011-12-31 15:13:52
@ Ku6opr - 这种评论是不建设性的。如何链接到“流体动画”选项?这个选项是一个DependencyProperty还是Blend中的某个UI元素? – 2011-12-31 16:43:08
它是Expression Blend中Visual States面板右上角的按钮。 http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/layout-tips/#FluidUI – Ku6opr 2011-12-31 18:04:20