How to make this drop overlay's fade-in animation work well?

Question

I have a simple MainWindow with a root Grid that contains Grid and in it a cell with a Button, and the root grid also contains an overlay control (control with partially transparent background and some short text like Drop here...). This full-window overlay shows up with a fade-in animation when the user drags a file over the window. The problem is my animation does not finish, it almost does not start, and repeats itself while the user drags the file over the window.

I am not sure where to look next. The DropOverlay class and XAML looks well. I think the problem is in the d&d event handling. When I use IsHitTestVisible="False" it seems to work better when I do not have an animation.

DropOverlay

XAML


    
        
    
    
        
            
                Drop Here...

Code-behind

Nothing special.

MainWindow

XAML

Code-behind

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    internal bool _DraggingOver = false;
    internal bool DraggingOver
    {
        get
        {
            return _DraggingOver;
        }
        set
        {
            if (_DraggingOver != value)
            {
                _DraggingOver = value;
                UpdateDropIndicator();
            }
        }
    }

    private void UpdateDropIndicator()
    {
        if (DraggingOver)
        {
            MyDropOverlay.Visibility = Visibility.Visible;
        }
        else
        {
            MyDropOverlay.Visibility = Visibility.Collapsed;
        }
    }

    private void MyWindow_DragEnter(object sender, DragEventArgs e)
    {
        if (e.Data.GetDataPresent(DataFormats.FileDrop) &&
            !(e.Source is DropOverlay))
        {
            e.Effects = DragDropEffects.Link;

            var paths = e.Data.
                GetData(DataFormats.FileDrop) as string[];

            string path = paths[0];

            DraggingOver = true;

            e.Handled = true;
        }
        else
        {
            DraggingOver = false;

            //e.Handled = true;
        }
    }

    private void MyWindow_Drop(object sender, DragEventArgs e)
    {
        if (GetVisualParent(e.Source) == null)
        {
            e.Handled = true;
            return;
        }

        string[] paths = null;

        if (e.Effects != DragDropEffects.None &&
            e.Data.GetDataPresent(DataFormats.FileDrop))
        {
            paths = e.Data.
                GetData(DataFormats.FileDrop) as string[];
        }

        DraggingOver = false;

        if (paths != null)
        {
            MessageBox.Show(this, "Dropped.");
            e.Handled = true;
        }
    }

    private void MyWindow_DragLeave(object sender, DragEventArgs e)
    {
        if (GetVisualParent(e.Source) == null)
        {
            e.Handled = true;
            return;
        }

        Point p = Mouse.GetPosition(this);
        if (p.X < 0 || p.Y < 0 ||
            p.X > ActualWidth || p.Y > ActualHeight)
        {
            DraggingOver = false;

            e.Handled = true;
        }
    }

    public static T GetVisualParent(object childObject) where T : System.Windows.Media.Visual
    {
        var child = childObject as System.Windows.DependencyObject;
        // iteratively traverse the visual tree
        while ((child != null) && !(child is T))
        {
            child = System.Windows.Media.VisualTreeHelper.GetParent(child);
        }
        return child as T;
    }
}

Expected result: the fade-in animation runs and finishes one time when the user starts dragging a file over the window.

Actual result: the fade-in animation does not finish, it starts over and over again and runs just up to some point where it is hardly visible that the overlay is there. Sometimes when I leave the window with the mouse while dragging the overlay fades-in nicely (but not in the good moment), sometimes not.

Screenshots

Zer0 · Accepted Answer

Found it just delete your else case in MyWindow_DragEnter

copy the code below and paste instead of your MyWindow_DragEnter method.

in case you are lazy :)

    private void MyWindow_DragEnter(object sender, DragEventArgs e)
    {
        if (e.Data.GetDataPresent(DataFormats.FileDrop) &&
            !(e.Source is DropOverlay))
        {
            e.Effects = DragDropEffects.Link;

            var paths = e.Data.
                GetData(DataFormats.FileDrop) as string[];

            string path = paths[0];

            DraggingOver = true;

            e.Handled = true;
        }

    }

FOR FADE IN/OUT ANIMATIONS

The problem is your UserControl is set to Collapsed while animating => we need "connected animations" (one animation after another)

in our case we need some independent boolen: i took Selector.IsSelected.

Change your UpdateDropIndicator method


        private void UpdateDropIndicator()
        {
            if (DraggingOver)
            {
                Selector.SetIsSelected(MyDropOverlay, true);
                //   MyDropOverlay.Visibility = Visibility.Visible;
            }
            else
            {
                Selector.SetIsSelected(MyDropOverlay, false);
                //MyDropOverlay.Visibility = Visibility.Collapsed;
            }
        }

and your xaml animation

How to make this drop overlay's fade-in animation work well?

DropOverlay

XAML

Code-behind

MainWindow

XAML

Code-behind

Screenshots

Answers (1)

Related Questions

How to make this drop overlay&#39;s fade-in animation work well?

DropOverlay

XAML

Code-behind

MainWindow

XAML

Code-behind

Screenshots

Answers (1)

Related Questions

How to make this drop overlay's fade-in animation work well?