The Actipro Blog

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:

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!

A question came in from one of our customers today regarding a scenario where they have interop content (such as a WebBrowser control) in their main RibbonWindow and they wanted to use the new Backstage application menu added in the latest WPF Studio build.

All looks great until the Backstage application menu is opened.  The interop content appears on top of the Backstage content due to the airspace issues in WPF where any interop content overlays WPF content in the same Window.  In this post we’ll show the issue via a sample and how to work around it.  More...

We’ve had a lot of requests lately for improved support when using any sort of interop control (generally WinForms-based) within our Docking & MDI for WPF product.  In should be noted that interop content may also include things like DirectX content, etc.

The main problem is this, WPF renders any interop content on top of WPF content on the same root window.  The issues are described lower down in this topic:

http://msdn.microsoft.com/en-us/library/ms742522.aspx

In addition to the content rendering issues in WPF, there are some focus handling issues when dealing with interop controls.

What are we doing about it?

We have begun moving forward with finding ways to work around the above issues.  Today I’d like to talk about a new workaround included in build 482 that was just released.

One major issue with Docking & MDI was that auto-hide flyouts would appear below interop content that was located in the MDI area.  I’m happy to say that we’ve come up with a new property on DockSite that helps with this particular issue.

By setting the new DockSite.UseHostedAutoHidePopups property to false, you can now achieve auto-hide flyouts that appear above interop content.  In the screenshot above, you’ll notice a WPF tool window flys out on top of documents that contain a SyntaxEditor for WinForms control instance and a WinForms WebBrowser control instance.

We recommend that if you do not host WinForms content in your documents, you should still keep DockSite.UseHostedAutoHidePopups its default value of true.

This was very tricky to implement and is a major step forward for the product!

Moving forward

We still have some more areas to work on.  It’s likely that the next area will be a workaround so that the dock guides (when dragging a window) will appear on top of interop content.  Stay tuned!

We had a customer write us the other day mentioning that ClearType was turning off when using our RibbonWindow class in Windows Vista with Aero enabled and was falling back to grayscale antialiasing. 

After a lot of debugging and searching, we found that the root of the problem was the use of Vista's Aero glass in the client area of a Window in WPF.  Basically if glass is disabled or not available (like in Windows XP), everything is fine and renders properly using ClearType.  However if you implement your WPF Window such that glass can enter the client area (like in our RibbonWindow or previously-posted GlassWindow that is soon to be released), ClearType will disable and grayscale antialiasing will be used instead.

We traced the line that causes the issue down to this one, which is necessary for any WPF Window to properly support Aero glass in its client area:

// Ensure the background of the composition target is transparent
HwndSource.FromHwnd(hwnd).CompositionTarget.BackgroundColor = Colors.Transparent;

Basically if the Colors.Transparent is set to the Window's composition target, ClearType becomes disabled.  If you don't set this however, then glass is not able to enter the client area of the Window.

Here is a great post by Dax Pandhi on how to enable Aero glass in WPF Windows.

In there you can see how the line of code above is used to notify Win32 to use a transparent background for the client area of the window.

After some more searching on Google, we found this post too which explains the issue a bit more:

Give me back my ClearType

That post shows some screenshots of the issue and is very helpful for telling what things will cause ClearType to disable.

I've posted a question about this issue in the Microsoft WPF forum and hopefully Microsoft will do something about this in the future.

This is an issue that a couple customers have run into and emailed us on, so we wanted to post more about it. 

Scenario

The scenario is that you drag a Ribbon onto a Window and everything shows up fine at design-time.    But when you go to run your application, you see a blank Window.

Why Did It Disappear?

What happened was that you probably clicked and dragged something somewhere in the Visual Studio designer that either:

• Set the Width or Height of the Ribbon to an explicit size (very bad)
• Set the Margin around the Ribbon to something that forces it to have a smaller than desired size
• Did the above things to a direct container of Ribbon that affects its size

At run-time a feature of Ribbon is to collapses when there is not enough space for it.  You have full control over the threshold size at which this collapse occurs.  But one of the items in the list above would have caused this collapse code to kick in because the Ribbon is being forced smaller than desired.

Resolution

To fix this problem, simply look at the XAML for your Ribbon tag and remove any Width/Height property settings.  Also check to ensure that a Margin isn't set that could be causing this.  Then run your application and everything should appear like you would expect since now the Ribbon is not being forced to a small size.

Why Does It Show at Design-Time?

In the designer we force Ribbon to stay expanded and ignore its normal run-time collapse behavior.  This is done so that you can properly visually design the Ribbon.

Further Reading

We also have a section explaining this issue in the Ribbon control's Troubleshooting topic in the product documentation.