WPF制作窗口的启动和关闭动画

以下是用WPF实现的的一个窗口，为了使演示变得简单，我在窗口中只放了一个按钮。如下图所示：

 

但我们今天的主题是窗口启动时和关闭时都展示动画，如何进行动画处理，我以前写过一些WPF相关的文章。

要将窗口进行自定义，首先我们要去掉默认窗口的边框、背景色和标题栏。

这个不难，在WPF中，要把窗体彻底透明，只要做三件事即可：

（1）设置WindowStyle属性为None。

（2）AllowsTransparency属性设置为true。

（3）Background属性为Transparent。

为了使窗体易于控件，可以考虑设置ResizeMode="NoResize"。

 

窗口变成了透明，这使得窗口的整个区域就需要我们自己来设计了。

为了使自定义的窗口也有边框，在最外层，我们应该考虑使用Border，然后里面放一个Grid，这个Grid划分为两行，第一行作为标题栏，第二行作为窗口的客户区域。

    <Border x:Name="wb" CornerRadius="5" BorderThickness="3" BorderBrush="#FF1A55AA">
        <Border.Background>
            <LinearGradientBrush EndPoint="0.8,1" StartPoint="0.33,0">
                <GradientStop Color="#FF50B3E2" Offset="0"/>
                <GradientStop Color="#FF084168" Offset="1"/>
            </LinearGradientBrush>
        </Border.Background>
        <Grid x:Name="root" >
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            ……
        </Grid>
    </Border>

以上是窗口的大致框架。

接下来就是对最外层的Border进行剪裁，即设置它的Clip属性。

    <Border x:Name="wb" CornerRadius="5" BorderThickness="3" BorderBrush="#FF1A55AA">
        <Border.Background>
            <LinearGradientBrush EndPoint="0.8,1" StartPoint="0.33,0">
                <GradientStop Color="#FF50B3E2" Offset="0"/>
                <GradientStop Color="#FF084168" Offset="1"/>
            </LinearGradientBrush>
        </Border.Background>
        <Border.Clip>
            <GeometryGroup FillRule="Nonzero">
                <RectangleGeometry x:Name="r1" Rect="0,50,1000,100"/>
                <RectangleGeometry x:Name="r2" Rect="0,220,1000,100"/>
                <RectangleGeometry x:Name="r3" Rect="50,0,90,1000"/>
                <RectangleGeometry x:Name="r4" Rect="360,0,160,1000"/>
            </GeometryGroup>
        </Border.Clip>
        <Grid x:Name="root" >
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            ……
        </Grid>
    </Border>

那么，通过这四个矩形的裁剪，窗口会变成什么模样呢。看下图。

下面就是窗口的启动动画，通过对这四个矩形进行动画处理，在窗体的Loaded事件中播放动画，当动画播放完成时，再把这些Clip去掉，即设为null。

    <Window.Resources>
        <Storyboard x:Key="start">
            <RectAnimation Storyboard.TargetName="r1" Storyboard.TargetProperty="Rect"
                           Duration="0:0:6" To="0,0,900,900"/>
            <RectAnimation Storyboard.TargetName="r2" Storyboard.TargetProperty="Rect"
                           Duration="0:0:5" To="20,20,700,800"/>