WPF 无边框窗口 显示及退出动画效果

本次做的是大小缩放+渐隐特效,效果展示:

 

根据我的另一篇文章《WPF 无边框窗体设置》设置好无边框窗口后,对MainGrid Xaml代码进行修改:

    <Grid x:Name="MainGrid" RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
            <TransformGroup>
                <ScaleTransform  ScaleX="1" ScaleY="1"/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Grid.RenderTransform>

在Window.Resouse中添加故事板:

    <Window.Resources>
        <ResourceDictionary>
            <Storyboard x:Key="HideWindow">
                <DoubleAnimation Duration="0:0:0.3" From="1" To="0" Storyboard.TargetProperty="Opacity" FillBehavior="Stop" />
                <DoubleAnimation Duration="0:0:0.3" From="1" To="0.8" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleX)" FillBehavior="Stop" Storyboard.TargetName="MainGrid"/>
                <DoubleAnimation Duration="0:0:0.3" From="1" To="0.8" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleY)" FillBehavior="Stop" Storyboard.TargetName="MainGrid"/>
            </Storyboard>
            <Storyboard x:Key="ShowWindow" >
                <DoubleAnimation Duration="0:0:0.3" From="0" To="1" Storyboard.TargetProperty="Opacity" FillBehavior="Stop"/>
                <DoubleAnimation Duration="0:0:0.3" From="0.8" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleX)" FillBehavior="Stop" Storyboard.TargetName="MainGrid"/>
                <DoubleAnimation Duration="0:0:0.3" From="0.8" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleY)" FillBehavior="Stop" Storyboard.TargetName="MainGrid"/>
            </Storyboard>
        </ResourceDictionary>
    </Window.Resources>

再添加窗口事件触发器:

    <Window.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard Storyboard="{StaticResource ShowWindow}"/>
        </EventTrigger>
    </Window.Triggers>

这样窗口显示完成了,但退出并不能使用EventTrigger事件中的Closing或Closed,可以使用其他方法进行触发.

这里我使用按钮来触发故事板,并关闭窗口:

在ClientGrid内容里添加Xmal代码:

<Button Click="CloseWindowButton_Click" Width="80" Height="24">关闭窗口</Button>

CloseWindowButton_Click后台代码:

        private void CloseWindowButton_Click(object sender, RoutedEventArgs e)
        {
            var story = (Storyboard)this.Resources["HideWindow"];
            if (story != null)
            {
                story.Completed += delegate { Close(); };
                story.Begin(this);
            }
        }