[Solved] ModalBackground: fade out instead of pop away

[Jonathan]

I would like to have the modal background fade away instead of "pop" away when the modal window is closed. I created a storyboard with a color animation, and tried running it on the Closed event, as well as in an overridden OnClosed method, but no go.

How can I do this? Code below:

Thanks

Jonathan

Main page has just a button that creates a new instance of my "modalDialog" and then runs a .ShowDialog() on it.

RadWindow XAML:

<Telerik:RadWindow x:Class="SilverlightApplication2.modalPopup"
    x:Name="popup"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    Width="700" Height="700">
    <Telerik:RadWindow.Resources>
        <SolidColorBrush x:Name="Brush1" Color="#AA00FF00" />
        <Storyboard x:Name="StoryBoard1">
           <ColorAnimation
                        Duration="00:00:05"
                        To="#22FF00FF"
                        Storyboard.TargetName="popup"
                        Storyboard.TargetProperty="(RadWindow.ModalBackground).(SolidColorBrush.Color)">
            </ColorAnimation>
        </Storyboard>
        <Storyboard x:Name="StoryBoard2">
            <ColorAnimation
                        Duration="00:00:05"
                        To="#AA0000FF"
                        Storyboard.TargetName="path"
                        Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
            </ColorAnimation>
        </Storyboard>
    </Telerik:RadWindow.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <Path x:Name="path" Fill="{StaticResource Brush1}" Stretch="Fill" Stroke="Black" Margin="117.5,53.5,238.5,224.5" UseLayoutRounding="False" Data="M118,54 L401,119 L234,255 z"/>
    </Grid>
</Telerik:RadWindow>

RadWindow Code Behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Telerik.Windows.Controls;

namespace SilverlightApplication2
{
    public partial class modalPopup : RadWindow

    {
        WindowClosedEventArgs _args;

        public modalPopup()
        {
            InitializeComponent();

            StoryBoard1.Completed += new EventHandler(StoryBoard1_Completed);

            this.Closed += new EventHandler<WindowClosedEventArgs>(modalPopup_Closed);

            SolidColorBrush br = (SolidColorBrush)this.Resources["Brush1"];
            this.ModalBackground = br;

            // Below so can test storyboards on init and prove that they are "good" storyboards
            // (ie they change the desired properties in the desired way)
            //StoryBoard1.Begin();
            StoryBoard2.Begin();

        }

        protected override void OnClosed(WindowClosedEventArgs args)
        {
            StoryBoard1.Begin();
            _args = args;
        }


        void StoryBoard1_Completed(object sender, EventArgs e)
        {
            base.OnClosed(_args);
        }

        // Tried running the storyboard on this.Closed event. Didn't work
        void modalPopup_Closed(object sender, WindowClosedEventArgs e)
        {
            //StoryBoard1.Begin();

        }

    }
}

[Pana]

Hi Jonathan,

The animation works just fine. if you close and open the dialog the second time you see the changed / changing color.

The OnClosed is invoked when the window's closing animation is complete. At that time the window is detached from the visual tree or collapsed so it is invisible. You can use the PreviewClosing instead. You can attached an event handler for that event of the window in the constructor, handle the event and raise it when the storyboard is over.

Sincerely yours,
Panayot
the Telerik team