以下是用WPF实现的的一个窗口，为了使演示变得简单，我在窗口中只放了一个按钮。如下图所示：
但我们今天的主题是窗口启动时和关闭时都展示动画，如何进行动画处理，我以前写过一些WPF相关的文章。
要将窗口进行自定义，首先我们要去掉默认窗口的边框、背景色和标题栏。
这个不难，在WPF中，要把窗体彻底透明，只要做三件事即可：
（1）设置WindowStyle属性为None。
（2）AllowsTransparency属性设置为true。
（3）Background属性为Transparent。
为了使窗体易于控件，可以考虑设置ResizeMode="NoResize"。
窗口变成了透明，这使得窗口的整个区域就需要我们自己来设计了。
为了使自定义的窗口也有边框，在最外层，我们应该考虑使用Border，然后里面放一个Grid，这个Grid划分为两行，第一行作为标题栏，第二行作为窗口的客户区域。
[html]
<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 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属性。
[html] view plaincopyprint?
<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>
<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" >
