Untitled

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

namespace YourNamespace
{
    public partial class CircleWithProgressControl : UserControl
    {
        public CircleWithProgressControl()
        {
            InitializeComponent();
        }

        public double ProgressValue
        {
            get { return (double)GetValue(ProgressValueProperty); }
            set { SetValue(ProgressValueProperty, value); }
        }

        public static readonly DependencyProperty ProgressValueProperty =
            DependencyProperty.Register("ProgressValue", typeof(double), typeof(CircleWithProgressControl), new PropertyMetadata(0.0, OnProgressValueChanged));

        private static void OnProgressValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var control = (CircleWithProgressControl)d;
            double progress = (double)e.NewValue;

            // Update rectangle positions based on progress
            control.UpdateRectanglePosition(progress);
        }

        private void UpdateRectanglePosition(double progress)
        {
            // Calculate the offset distance based on progress
            double maxOffset = 100; // Adjust this value based on the desired maximum offset
            double offset = (maxOffset * progress) / progressBar.Maximum;

            // Animate rectangles' vertical positions
            AnimateRectangle(rectangle1, -offset);
            AnimateRectangle(rectangle2, -offset);
            AnimateRectangle(rectangle3, -offset);
        }

        private void AnimateRectangle(Rectangle rectangle, double offsetY)
        {
            DoubleAnimation animation = new DoubleAnimation
            {
                To = offsetY,
                Duration = new Duration(TimeSpan.FromMilliseconds(300)),
                FillBehavior = FillBehavior.Stop
            };

            // Apply the animation to the rectangle's Canvas.Top property
            Canvas.SetTop(rectangle, offsetY);
            rectangle.BeginAnimation(Canvas.TopProperty, animation);
        }
    }
}



<UserControl x:Class="YourNamespace.CircleWithProgressControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Canvas Width="300" Height="300">
        <!-- Circle -->
        <Ellipse Width="150" Height="150" Stroke="Black" StrokeThickness="1" Fill="LightGray"/>
        
        <!-- Progress bar -->
        <ProgressBar x:Name="progressBar" Width="120" Height="120" Minimum="0" Maximum="100" Value="0" 
                     HorizontalAlignment="Center" VerticalAlignment="Center"/>
        
        <!-- Rectangles -->
        <Rectangle x:Name="rectangle1" Width="20" Height="20" Fill="Red" Opacity="0" 
                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Rectangle x:Name="rectangle2" Width="20" Height="20" Fill="Green" Opacity="0" 
                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Rectangle x:Name="rectangle3" Width="20" Height="20" Fill="Blue" Opacity="0" 
                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Canvas>
</UserControl>