adding a fade in and out animation to my floating window

Question

adding a fade in and out animation to my floating window

Eduardo Gomez 3,591

I made a custom control, that floats when I hover a folder

    public sealed partial class CustomFolderPeekData : UserControl {

        public CustomFolderPeekData() {

            InitializeComponent();
        }

        public void UpdateContent(int FolderCount) {

            FileNum.Text = $"Number of files: {FolderCount}";
        }

        public void ShowPanel() {
            Visibility = Visibility.Visible;
        }

        public void HidePanel() {
            Visibility = Visibility.Collapsed;
        }

    }
}

User's image

In my fileWindow I show d hide the floating window

    private void ItemContainer_PointerEntered(object sender, PointerRoutedEventArgs e) {

        if(sender is FrameworkElement container
            && container.DataContext is FolderItem folderItem) {

            string folderName = folderItem.FileName;
            int folderCount = FolderService.GetgcodeItems(folderName).Count;

            // Calculate the position of the hovered item
            var transform = container.TransformToVisual(rootContainer);
            var pos = transform.TransformPoint(new Point
                (0, container.ActualHeight - 36));

            FloatingPanel.UpdateContent(folderCount);

            FloatingPanel.RenderTransform = new TranslateTransform {
                X = pos.X,
                Y = pos.Y
            };

            FloatingPanel.ShowPanel();
        }
    }

    private void ItemContainer_PointerExited(object sender, PointerRoutedEventArgs e) {

        FloatingPanel.HidePanel();
    }
}

I want to add some fade in and fade out animation

I was reading the docs, but I could not figure it out (https://learn.microsoft.com/en-us/windows/apps/design/motion/motion-fade)

Jeanine Zhang-MSFT 11,341 Reputation points Microsoft External Staff

2025-03-31T02:07:31.65+00:00

If you want to use fade in and fade out animations to show or hide transient UI or controls, you could try to use FadeInThemeAnimation and FadeOutThemeAnimation.

You could refer to the Doc:Theme animations

Eduardo Gomez 3,591

Well, I crated an animation that appears from the top, and it works, but has some problems, i was wondering if you could help me with that

Recording 2025-03-31 104522

<Border
    x:Name="peekContainer"
    Padding="10"
    Background="{StaticResource ItemSelectedBackgroundBrush}"
    BorderBrush="{StaticResource ItemSelectedBackgroundBrush}"
    BorderThickness="2"
    CornerRadius="8">
    <Border.RenderTransform>
        <TranslateTransform x:Name="TranslateTransform" />
    </Border.RenderTransform>
    <StackPanel>
        <TextBlock
            x:Name="FileNum"
            FontSize="14"
            FontWeight="Bold" />
    </StackPanel>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="visibilityStates">
            <VisualState x:Name="peekContainerVisible">
                <Storyboard>
                    <!--  Translate animation first (slide in from top)  -->
                    <DoubleAnimation
                        Storyboard.TargetName="TranslateTransform"
                        Storyboard.TargetProperty="Y"
                        From="-50"
                        To="0"
                        Duration="0:0:0.3">
                        <DoubleAnimation.EasingFunction>
                            <QuadraticEase EasingMode="EaseOut" />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                    <!--  Then fade in opacity after translation  -->
                    <DoubleAnimation
                        Storyboard.TargetName="peekContainer"
                        Storyboard.TargetProperty="Opacity"
                        From="0"
                        To="1"
                        Duration="0:0:0.3" />
                </Storyboard>
            </VisualState>

            <VisualState x:Name="peekContainerCollapsed">
                <Storyboard>
                    <!--  Only fade-out opacity (no translation)  -->
                    <DoubleAnimation
                        Storyboard.TargetName="peekContainer"
                        Storyboard.TargetProperty="Opacity"
                        From="1"
                        To="0"
                        Duration="0:0:0.3" />
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Border>

namespace NanoFlow.Controls {

    public sealed partial class CustomFolderPeekData : UserControl {

        public CustomFolderPeekData() {

            InitializeComponent();
        }

        public void UpdateContent(int FolderCount) {

            FileNum.Text = $"Number of files: {FolderCount}";
        }

        public void ShowPanel() {
            VisualStateManager.GoToState(this, "peekContainerVisible",
                true);

            Visibility = Visibility.Visible;
        }

        public void HidePanel() {

            VisualStateManager.GoToState(this, "peekContainerCollapsed",
                true);

            DispatcherTimer timer = new() {
                Interval = TimeSpan.FromMilliseconds(300)
            };

            timer.Tick += (s, e) => {
                Visibility = Visibility.Collapsed;
                timer.Stop();
            };

            timer.Start();


        }

    }
}

Accepted answer

0 additional answers

Your answer

Jeanine Zhang-MSFT 11,341 Reputation points Microsoft External Staff

2025-03-31T02:07:31.65+00:00

If you want to use fade in and fade out animations to show or hide transient UI or controls, you could try to use FadeInThemeAnimation and FadeOutThemeAnimation.

You could refer to the Doc:Theme animations

Answer 1

Hello @Eduardo Gomez ,

Following up on the problem you encountered in the comments, there is nothing wrong with your UserControl animation, it should be that the `folder button (ItemContainer) is covered when the FloatingPanel appears. You need to start the animation effect outside the ItemContainer. I used the following code to test that it works.

private void myButton_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    FloatingPanel.UpdateContent(1);
    FloatingPanel.RenderTransform = new TranslateTransform
    {
        X = -100,
        Y = 0
    };
    FloatingPanel.ShowPanel();
    
}
private void myButton_PointerExited(object sender, PointerRoutedEventArgs e)
{
    FloatingPanel.HidePanel();
}

Since I lack the definition of FolderItem and rootContainer variables, I can only do simple tests. You need to make sure that the FloatingPanel does not cover the folder button below by calculating.Thank you

Share via

adding a fade in and out animation to my floating window

0 additional answers

Your answer