开心银光 FunSL.com

wpf4正式测试成功完成了VisualStateManager的功能。在此之前我没有确认wpf3.5是否已经支持此功能。以下是我使用vs2010 rc写的demo程式:

1.xaml部份一般都是用blend来设计的state。这里为了文章篇写的方便，我直接把xaml放出来.在blend中只能用鼠标拖拖放放即可弄出很多state。这功能对很多应用都很有好处。不用每次都自己写动画。还支持动画延时效果。

xaml部分:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" x:Class="WpfApplication3.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Canvas x:Name="LayourRoot">
        <VisualStateManager.CustomVisualStateManager>
            <ic:ExtendedVisualStateManager/>
        </VisualStateManager.CustomVisualStateManager>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.5"/>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="haha">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="button1">
                            <SplineDoubleKeyFrame KeyTime="0" Value="229.6"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="button1">
                            <SplineDoubleKeyFrame KeyTime="0" Value="6.4"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Button Content="Button" Height="23" x:Name="button1" Width="75" RenderTransformOrigin="0.5,0.5" Canvas.Left="134" Canvas.Top="92" >
            <Button.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>
    </Canvas>
</Window>

代码部份：

a)引用命名空间：using Microsoft.Expression.Interactivity.Core;

b)使用State:

        void button1_Click(object sender, RoutedEventArgs e)
        {
            ExtendedVisualStateManager.GoToElementState(this.LayourRoot, "haha", true);
        }

至此，一个简单的state即完成。

登陆后可以在本文附件中下载源代码。

欢迎您参与更多关于此话题的讨论,本文原创地址为：http://funsl.com