Does anyone have any idea how to make an animated list like the one in the video in c# wpf. Thank you very much.
https://i.imgur.com/9WS14Io.mp4

I thought of this scenario:
To achieve the effect I’m describing, we can use WPF’s animation and interactive elements. When you hover over one of the Grids, we want to change its width to 100 while recalculating the widths of the other Grids so that they all fit within the overall width of the StackPanel.

The procedure is as follows:

Set up mouse events (MouseEnter and MouseLeave) for each Grid.
We use animations to smoothly transition between the different widths.
We recalculate the width of each Grid based on the current StackPanel width.
Below is a sample of the complete code in XAML and C#.

So far I’ve tried this but it’s not right:

 <StackPanel x:Name="MainStackPanel" Orientation="Horizontal">
        <Grid Tag="1" MinWidth="50" Background="Yellow" MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave"/>
        <Grid Tag="2" MinWidth="50" Background="Green" MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave"/>
        <Grid Tag="3" MinWidth="50" Background="Blue" MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave"/>
        <Grid Tag="4" MinWidth="50" Background="Brown" MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave"/>
        <Grid Tag="5" MinWidth="50" Background="DeepPink" MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave"/>
        <Grid Tag="6" MinWidth="50" Background="Red" MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave"/>
        <Grid Tag="7" MinWidth="50" Background="Green" MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave"/>
        <Grid Tag="8" MinWidth="50" Background="Orange" MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave"/>
        <Grid Tag="9" MinWidth="50" Background="Cyan" MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave"/>
        <Grid Tag="10" MinWidth="50" Background="Yellow" MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave"/>
    </StackPanel>

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        private const double TargetWidth = 100;
        private const double AnimationDuration = 0.3; // Duration in seconds

        public MainWindow()
        {
            InitializeComponent();
        }

        private void Grid_MouseEnter(object sender, MouseEventArgs e)
        {
            if (sender is Grid grid)
            {
                double totalWidth = MainStackPanel.ActualWidth;
                double otherGridsWidth = (totalWidth - TargetWidth) / (MainStackPanel.Children.Count - 1);

                foreach (var child in MainStackPanel.Children)
                {
                    if (child is Grid g)
                    {
                        double newWidth = g == grid ? TargetWidth : otherGridsWidth;
                        AnimateWidth(g, newWidth);
                    }
                }
            }
        }

        private void Grid_MouseLeave(object sender, MouseEventArgs e)
        {
            if (sender is Grid)
            {
                double totalWidth = MainStackPanel.ActualWidth;
                double equalWidth = totalWidth / MainStackPanel.Children.Count;

                foreach (var child in MainStackPanel.Children)
                {
                    if (child is Grid g)
                    {
                        AnimateWidth(g, equalWidth);
                    }
                }
            }
        }

        private void AnimateWidth(Grid grid, double toWidth)
        {
            DoubleAnimation widthAnimation = new DoubleAnimation
            {
                To = toWidth,
                Duration = new Duration(TimeSpan.FromSeconds(AnimationDuration))
            };
            grid.BeginAnimation(WidthProperty, widthAnimation);
        }
    }
}