Start and close animations for Windows created by WPF

The following is a window implemented with WPF. To make the demo simple, I only put one button in the window. As shown in:

 

However, today's theme is how to display animations when the window is started and closed, and how to perform animation processing. I have previously written some articles related to WPF.

To customize a window, first remove the border, background color, and title bar of the default window.

This is not difficult. In WPF, to make the form completely transparent, you only need to do three things:

(1) set the windowstyle attribute to none.

(2) set the allowstransparency attribute to true.

(3) The background attribute is transparent.

To make the form easy to control, you can consider setting resizemode = "noresize ".

 

The window becomes transparent, so that the entire area of the window needs to be designed by ourselves.

To make the custom window have a border, we should consider using border in the outermost layer, and then put a grid in it. The grid is divided into two rows, and the first row is used as the title bar, the second line serves as the customer area of the window.

    <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>

The above is the general framework of the window.

The next step is to crop the border on the outermost layer, that is, set its clip attribute.

    <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>

So what will the window look like by cropping the four rectangles. See.

The following is the window start animation. By animation processing the four rectangles, the animation is played in the form loaded event. When the animation is played completely, remove the clip, that is, set to 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"/>            <RectAnimation Storyboard.TargetName="r3" Storyboard.TargetProperty="Rect"                           Duration="0:0:6" To="85,0,850,700"/>            <RectAnimation Storyboard.TargetName="r4" Storyboard.TargetProperty="Rect"                           Duration="0:0:6" To="0,250,800,700"/>            <DoubleAnimation Storyboard.TargetName="wb" Storyboard.TargetProperty="Opacity"                             From="0.2" To="1" Duration="0:0:6"/>        </Storyboard>        <Storyboard x:Key="end">            <DoubleAnimation Storyboard.TargetName="wb" Storyboard.TargetProperty="Opacity"                             Duration="0:0:5" From="1" To="0"/>            <DoubleAnimation Storyboard.TargetName="rt" Storyboard.TargetProperty="Angle"                             Duration="0:0:5" From="0" To="720"/>            <DoubleAnimation Storyboard.TargetName="sct" Storyboard.TargetProperty="ScaleX"                             Duration="0:0:5" From="1" To="0.3"/>            <DoubleAnimation Storyboard.TargetName="sct" Storyboard.TargetProperty="ScaleY"                             Duration="0:0:5" From="1" To="0.1"/>        </Storyboard>    </Window.Resources>

The above resources contain two animations, followed by the animation when the window is closed.

In addition, we need two small buttons for the window, that is, the "minimize" and "close" buttons at the top of the title bar. We can use the button, but we need to customize the control template for the button class.

    <Application.Resources>        <Style TargetType="{x:Type Button}" x:Key="captionButtonStyle">            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate  TargetType="{x:Type Button}">                        <Grid>                            <VisualStateManager.VisualStateGroups>                                <VisualStateGroup x:Name="CommonStates">                                    <VisualState x:Name="Normal"/>                                    <VisualState x:Name="MouseOver">                                        <Storyboard>                                            <DoubleAnimation Storyboard.TargetName="lbd"                                                             Storyboard.TargetProperty="Opacity"                                                             Duration="0:0:0.3"                                                             To="1"/>                                        </Storyboard>                                    </VisualState>                                    <VisualState x:Name="Pressed">                                        <Storyboard>                                            <DoubleAnimation Storyboard.TargetName="lbd"                                                             Storyboard.TargetProperty="Opacity"                                                             Duration="0"                                                             To="1"/>                                        </Storyboard>                                    </VisualState>                                    <VisualState x:Name="Disabled">                                        <Storyboard>                                            <DoubleAnimation Storyboard.TargetName="rctdisable"                                                             Storyboard.TargetProperty="Opacity"                                                             Duration="0" To="0.45"/>                                        </Storyboard>                                    </VisualState>                                </VisualStateGroup>                                <VisualStateGroup x:Name="FocusStates">                                    <VisualState x:Name="Focused"/>                                </VisualStateGroup>                                <VisualStateGroup x:Name="ValidationStates">                                    <VisualState x:Name="InvalidFocused"/>                                    <VisualState x:Name="InvalidUnfocused"/>                                </VisualStateGroup>                            </VisualStateManager.VisualStateGroups>                            <Border x:Name="lbd" BorderThickness="0" Background="{TemplateBinding Background}" CornerRadius="2" Opacity="0"/>                            <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" />                            <Rectangle x:Name="rctdisable" Opacity="0" Fill="#FFF4F8F9"/>                        </Grid>                    </ControlTemplate>                </Setter.Value>            </Setter>            <Setter Property="FontFamily" Value="Segoe UI Symbol"/>            <Setter Property="FontSize" Value="14"/>            <Setter Property="Foreground" Value="White"/>            <Setter Property="Padding" Value="3"/>        </Style>        <Style x:Key="minCaptionButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource captionButtonStyle}">            <Setter Property="Content" Value=""/>            <Setter Property="Background">                <Setter.Value>                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">                        <GradientStop Color="#BFFFFFFF"/>                        <GradientStop Offset="1"/>                    </LinearGradientBrush>                </Setter.Value>            </Setter>        </Style>        <Style x:Key="closeCaptionButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource captionButtonStyle}">            <Setter Property="Content" Value=""/>            <Setter Property="Background">                <Setter.Value>                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">                        <GradientStop Color="#FFEA1E1E" Offset="0"/>                        <GradientStop Color="#CCF5544C" Offset="0.7"/>                        <GradientStop Offset="1" Color="#33F94949"/>                    </LinearGradientBrush>                </Setter.Value>            </Setter>        </Style>    </Application.Resources>

Since these small buttons are similar, we first define a general style captionbuttonstyle, and then the mincaptionbuttonstyle and closecaptionbuttonstyle are based on this style.

Note that the font of the button should use segoe UI symbol, so that we can reference some special symbols by number, such as X on the close button.

 

Next we will return to the main form and paste the entire code.

<Windows X: class = "wpfapplication2.mainwindow" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: X = "http://schemas.microsoft.com/winfx/2006/xaml" Title = "Main Window" Height = "400" width = "600" resizemode = "noresize" windowstartuplocation = "centerscreen" windowstyle = "NONE" allowstransparency = "true" background = "Transparent" rendertransformorigin = "0.5, 0.5 "> <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,100"/> <rectanglegeometry X: Name = "R3" rect = ","/> <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> <border X: Name = "captiobd" grid. row = "0" background = "# ff1a55aa" Height = "32" mouseleftbuttondown = "onldown"> <grid> <textblock text = "{binding Path = title, relativesource = {relativesource mode = findancestor, ancestorlevel = 1, ancestortype = Window }}" foreground = "white" fontweight = "bold" fontsize = "18" fontfamily = "" placement = "Left" verticalignment = "bottom" margin = "9,0, "/> <stackpanel orientation =" horizontal "verticalignment =" bottom "horizontalalignment =" right "margin =, 9, 11 "> <button style =" {dynamicresource mincaptionbuttonstyle} "Click =" onmin "tooltip =" minimal "/> <button margin =" 6, 0, 0, 0 "style =" {dynamicresource closecaptionbuttonstyle} "Click =" onclick "tooltip =" close "/> </stackpanel> </GRID> </Border> <button content =" close ""grid. row = "1" Click = "onclick" horizontalalignment = "center" verticalignment = "center" fontsize = "30" padding = "15"/> </GRID> </Border> <window. rendertransform> <transformgroup> <rotatetransform X: Name = "RT" angle = "0"/> <scaletransform X: name = "SCT" scalex = "1" scaley = "1"/> </transformgroup> </window. rendertransform> <window. resources> <storyboard X: Key = "start"> <rectanimation storyboard. targetname = "R1" storyboard. targetproperty = "rect" Duration = "" To = "900,900,"/> <rectanimation storyboard. targetname = "R2" storyboard. targetproperty = "rect" Duration = "" To = "20, 20, 700,800"/> <rectanimation storyboard. targetname = "R3" storyboard. targetproperty = "rect" Duration = "" To = "850,700,"/> <rectanimation storyboard. targetname = "r4" storyboard. targetproperty = "rect" Duration = "" To = "0,250,800,700"/> <doubleanimation storyboard. targetname = "WB" storyboard. targetproperty = "opacity" from = "0.2" to = "1" Duration = ""/> </storyboard> <storyboard X: Key = "end"> <doubleanimation storyboard. targetname = "WB" storyboard. targetproperty = "opacity" Duration = "0: 0" from = "1" to = "0"/> <doubleanimation storyboard. targetname = "RT" storyboard. targetproperty = "angle" Duration = "" From = "0" to = "720"/> <doubleanimation storyboard. targetname = "SCT" storyboard. targetproperty = "scalex" Duration = "" From = "1" to = "0.3"/> <doubleanimation storyboard. targetname = "SCT" storyboard. targetproperty = "scaley" Duration = "" From = "1" to = "0.1"/> </storyboard> </window. resources> </WINDOW>

When the X button is clicked, we do not directly close the window, because we need to close the animation, so when the X button is clicked, the animation is closed. When the animation ends, the window is actually closed.

    public partial class MainWindow : Window    {        Storyboard stdStart, stdEnd;        public MainWindow()        {            InitializeComponent();            stdStart = (Storyboard)this.Resources["start"];            stdEnd = (Storyboard)this.Resources["end"];            stdStart.Completed += (a, b) =>            {                this.root.Clip = null;            };            stdEnd.Completed += (c, d) =>                {                    this.Close();                };            this.Loaded += MainWindow_Loaded;        }        void MainWindow_Loaded(object sender, RoutedEventArgs e)        {            stdStart.Begin();        }        private void onClick(object sender, RoutedEventArgs e)        {            stdEnd.Begin();        }        private void onLDown(object sender, MouseButtonEventArgs e)        {            this.DragMove();            e.Handled = true;        }        private void onMin(object sender, RoutedEventArgs e)        {            this.WindowState = System.Windows.WindowState.Minimized;        }    }

Okay. Now let's take a look at the window animation.

It is the animation when the window is started.

 

Is the animation when the form is closed. The form is rotated, zoomed out, And fades out until it disappears.

The source code is then uploaded to the resource area.