How to Animate a WPF Standard MDI Window into Place

by Avatar Bill Henning (Actipro)
Thursday, January 5, 2017 at 1:52pm

PostBannerWPFControlsTipsAndTricks[4]

Our WPF Docking/MDI control product allows you easily add docking tool windows and a MDI (multiple document interface) to your app, one that mimics Visual Studio.  We have two built-in MDI options: tabbed and standard.  Tabbed is similar to the style that current Visual Studio versions use.  However some customers still prefer to use the classic windowed style of MDI that we call "standard MDI".

There is no built-in standard MDI mechanism in WPF, but we provide a complete implementation in Docking/MDI with all the functionality like cascading and tiling that you would expect.

We just had a customer ask how they could animate a standard MDI window into place when it's first loaded. 

We did a quick experiment in our 2016.1 version using a simple implicit Style and it worked great.  Here's the results:

StandardMDIPopIn_thumb[1]

The animation we defined quickly fades in the window and "pops" it into place.  This animation matches the animations we use elsewhere in the product such as when dock guides appear while dragging docking windows around.

Here's the code that you can place in your app's Resources to get the animation above to appear:

<Style TargetType="docking:StandardMdiWindowControl">
<Setter Property="Opacity" Value="0" />
<Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="0.8" ScaleY="0.8" />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="docking:StandardMdiWindowControl.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" />

<DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)" To="1" Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<BackEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)" To="1" Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<BackEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>

Download our WPF Controls and give it a try!

TaskDownload TaskBuyNow