RibbonWindow appears black when fading in on load

I'm trying to show fade-in animation on loading RibbonWindow.

Here's what I did:

<ribbon:RibbonWindow.Resources>
    <Storyboard x:Key="FadeInOnLoad">
        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2" FillBehavior="HoldEnd" >
            <DoubleAnimation.EasingFunction>
                <QuinticEase EasingMode="EaseIn"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>
</ribbon:RibbonWindow.Resources>
<ribbon:RibbonWindow.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource FadeInOnLoad}"/>
    </EventTrigger>
</ribbon:RibbonWindow.Triggers>

But instead of starting off transparent, the RibbonWindow appears black and that fades in.

What could cause this behavior, and how do I fix it?

Answers


The problem is that your Window does not support transparency. You can set the AllowsTransparency="True" attribute on your Window tag. But, in order to set that attribute, you also need to set WindowStyle="None", otherwise you get the error WindowStyle.None is the only valid value for WindowStyle when AllowsTransparency is true.

Once you set those two attributes, your window will fade in nicely, and it won't be black anymore. But, the window will have no border, because WindowStyle is set to None. It will look like this:

Also, you won't be able to change the WindowStyle in code after the storyboard has finished, because you will get this error: Cannot change AllowsTransparency after a Window has been shown or WindowInteropHelper.EnsureHandle has been called.

So, you are left with two choices: (if you want the fade-in effect for the main window)

  • Make your own style for the window. It won't look like a regular window, you will need to specify its border, create minimize/maximize/close buttons for it, etc.
  • Fade the window in, and after the animation has been completed, create another identical window on top of the faded in window. The second window won't be faded in, but it will look exactly like the first window. After you show the second window on top of the first window, you can close the first window.

Also, here is an alternative that does not require fading in your main window:

  • Make a splash screen for your app. You can use the built-in WPF Splash Screen, or create a regular window, with AllowsTransparency="True" and WindowStyle="None". You can fade in (and out) that splash screen, and after that show your main window without fading it in.

Need Your Help

Unit testing Azure table storage classes

azure mocking azure-storage azure-table-storage

I have been trying to find if i can easily isolate and test azure table storage dependencies but to to no avail. I believe its really difficult to mock/fake ATS dependencies. I am surprised at how ...

strlen not giving correct string length C

c io strlen

I am reading from my dictionary and printing out the word + the length of the word for testing purposes.