WPF tracks that fade way

Question

I'm creating a WPF app where an object is moving across the window, leaving a track behind as it does so. The oldest segments of the track need to fade away to nothing, possibly tapering as it does so. Any suggestions on how to do that? I see how to break the path representing the track into segments, one per step. But that seems heavy handed and slower.

Answer 1

I do a test sample to implement what you want base on my understanding, if I misunderstand, please point out.
The Xaml code is:

 <Canvas  Name="paintSurface" >  
        <Canvas.Background>  
            <SolidColorBrush Color="White" Opacity="0"/>  
        </Canvas.Background>  
        <Border Grid.Row="1" Name="border">  
            <Rectangle Name="rec" Fill="Red" Width="20" Height="20"></Rectangle>  
        </Border>  
    </Canvas>  

The cs code is:

public partial class MainWindow : Window  
    {  
        Point currentPoint = new Point();  
        private Point origin;  
        private Point start;  
  
        public MainWindow()  
        {  
            InitializeComponent();  
            Init();  
        }  
  
        public void Init()  
        {  
  
            TransformGroup group = new TransformGroup();  
  
            ScaleTransform xform = new ScaleTransform();  
            group.Children.Add(xform);  
  
            TranslateTransform tt = new TranslateTransform();  
            group.Children.Add(tt);  
  
            rec.RenderTransform = group;  
            rec.MouseLeftButtonDown += rec_MouseLeftButtonDown;  
            rec.MouseLeftButtonUp += rec_MouseLeftButtonUp;  
            rec.MouseMove += rec_MouseMove;  
  
        }  
  
        private void rec_MouseMove(object sender, MouseEventArgs e)  
        {  
            if (!rec.IsMouseCaptured) return;  
  
            var tt = (TranslateTransform)((TransformGroup)rec.RenderTransform).Children.First(tr => tr is TranslateTransform);  
            Vector v = start - e.GetPosition(border);  
            tt.X = origin.X - v.X;  
            tt.Y = origin.Y - v.Y;  
  
           if (e.LeftButton == MouseButtonState.Pressed)  
        {  
            Line line = new Line();  
            line.Stroke = SystemColors.WindowFrameBrush;  
            line.X1 = currentPoint.X;  
            line.Y1 = currentPoint.Y;  
            line.X2 = e.GetPosition(this).X;  
            line.Y2 = e.GetPosition(this).Y;  
            currentPoint = e.GetPosition(this);  
            Storyboard sb = new Storyboard();  
            DoubleAnimation doubleAnimation = new DoubleAnimation()  
            {  
                From = 1,  
                To = 0,  
                Duration = TimeSpan.FromMilliseconds(1000)  
            };  
            Storyboard.SetTarget(doubleAnimation, line);  
            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(Line.OpacityProperty));  
            sb.Children.Add(doubleAnimation);  
            sb.Begin();  
            paintSurface.Children.Add(line);  
        }  
        }  
  
        private void rec_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)  
        {  
            rec.ReleaseMouseCapture();  
        }  
  
        private void rec_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)  
        {  
            rec.CaptureMouse();  
            var tt = (TranslateTransform)((TransformGroup)rec.RenderTransform).Children.First(tr => tr is TranslateTransform);  
            start = e.GetPosition(border);  
            origin = new Point(tt.X, tt.Y);  
  
            if (e.ButtonState == MouseButtonState.Pressed)  
                currentPoint = e.GetPosition(this);  
        }  
  
    }  

The result picture is:

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.