进度条

Wpf_AiSportsMicrospace/MyUserControl/WxProgressBar.xaml

@@ -5,9 +5,21 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              x:Name="root"
              Height="30" Width="600">
-    <Grid Background="#222">
+    <Canvas>
-        <Border x:Name="LeftBar" Background="#FF4D4D" HorizontalAlignment="Left"/>
+        <Border x:Name="LeftBar" Background="#e0585b" HorizontalAlignment="Left" Height="30"/>
-        <Border x:Name="RightBar" Background="#33CC33"  HorizontalAlignment="Right"/>
+        <Border x:Name="RightBar" Background="#95dfce"  HorizontalAlignment="Right" Height="30"/>
-        <TextBlock x:Name="ProgressTextBlock" Foreground="White" FontSize="14" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+
-    </Grid>
+        <!-- 中间分割线图片 -->
+        <Image x:Name="MiddleLine" 
+           Source="/Resources/Img/Album/vs.png" 
+           Width="30" Height="50" Panel.ZIndex="100"/>
+
+        <!-- 中间百分比文本 -->
+        <TextBlock x:Name="ProgressTextBlock" 
+                   Foreground="White" 
+                   FontSize="14" 
+                   FontWeight="Bold" 
+                   HorizontalAlignment="Center" 
+                   VerticalAlignment="Center"/>
+    </Canvas>
 </UserControl>

Wpf_AiSportsMicrospace/MyUserControl/WxProgressBar.xaml.cs

@@ -21,6 +21,12 @@ namespace Wpf_AiSportsMicrospace.MyUserControl
         public WxProgressBar()
         {
             InitializeComponent();
+            this.SizeChanged += WxProgressBar_SizeChanged;
+        }
+
+        private void WxProgressBar_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            UpdateVisual();
         }
 
         #region 左右进度属性
@@ -31,7 +37,7 @@ namespace Wpf_AiSportsMicrospace.MyUserControl
             set
             {
                 _leftProgress = Clamp(value, 0, 1);
-                RightProgress = 1 - _leftProgress; // 左多右少
+                _rightProgress = 1 - _leftProgress;
                 UpdateVisual();
             }
         }
@@ -43,7 +49,7 @@ namespace Wpf_AiSportsMicrospace.MyUserControl
             set
             {
                 _rightProgress = Clamp(value, 0, 1);
-                _leftProgress = 1 - _rightProgress; // 右多左少
+                _leftProgress = 1 - _rightProgress;
                 UpdateVisual();
             }
         }
@@ -51,21 +57,39 @@ namespace Wpf_AiSportsMicrospace.MyUserControl
 
         private void UpdateVisual()
         {
-            double width = ActualWidth;
+            double totalWidth = ActualWidth;
-            if (width <= 0) return;
+            double totalHeight = ActualHeight;
+            if (totalWidth <= 0 || totalHeight <= 0) return;
 
-            LeftBar.Width = width * _leftProgress;
+            double barHeight = 30; // 进度条高度
-            RightBar.Width = width * _rightProgress;
+            double middleLineHeight = MiddleLine.Height;
 
+            // 左侧红条
+            LeftBar.Width = totalWidth * _leftProgress;
+            LeftBar.Height = barHeight;
+            Canvas.SetLeft(LeftBar, 0);
+            Canvas.SetTop(LeftBar, (totalHeight - barHeight) / 2);
+
+            // 右侧绿条
+            RightBar.Width = totalWidth * _rightProgress;
+            RightBar.Height = barHeight;
+            Canvas.SetLeft(RightBar, totalWidth - RightBar.Width);
+            Canvas.SetTop(RightBar, (totalHeight - barHeight) / 2);
+
+            // 分割线居中在红绿交界点
+            double middleX = LeftBar.Width - MiddleLine.Width / 2;
+            if (middleX < 0) middleX = 0;
+            if (middleX > totalWidth - MiddleLine.Width) middleX = totalWidth - MiddleLine.Width;
+
+            Canvas.SetLeft(MiddleLine, middleX);
+            Canvas.SetTop(MiddleLine, (totalHeight - middleLineHeight) / 2);
+
+            // 百分比文本居中显示
             ProgressTextBlock.Text = $"{Math.Round(_leftProgress * 100)}% : {Math.Round(_rightProgress * 100)}%";
+            Canvas.SetLeft(ProgressTextBlock, (totalWidth - ProgressTextBlock.ActualWidth) / 2);
+            Canvas.SetTop(ProgressTextBlock, (totalHeight - ProgressTextBlock.ActualHeight) / 2);
         }
 
         private double Clamp(double value, double min, double max) => value < min ? min : value > max ? max : value;
-
-        protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
-        {
-            base.OnRenderSizeChanged(sizeInfo);
-            UpdateVisual();
-        }
     }
 }

Wpf_AiSportsMicrospace/Views/JumpRope/MusicJumpRope.xaml

@@ -35,9 +35,8 @@
                   TextAlignment="Center"
                   />
         </Grid>
-
+        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" >
-        <Grid  VerticalAlignment="Top">
             <local:WxProgressBar x:Name="PkBar"/>
-        </Grid>
+        </StackPanel>
     </Grid>
 </UserControl>

Wpf_AiSportsMicrospace/Views/JumpRope/MusicJumpRope.xaml.cs

@@ -59,34 +59,21 @@ namespace Wpf_AiSportsMicrospace.Views.JumpRope
 
         private async void UserControl_Loaded(object sender, RoutedEventArgs e)
         {
-            //Random _rand = new Random();
-            //// 初始化进度
-            //PkBar.LeftProgress = 0.5;  // 左右各占50%
-            //await Task.Delay(500);
-
-            //for (int i = 0; i < 500; i++)
-            //{
-            //    await Task.Delay(300);
-
-            //    // 随机生成一个变化值 0~0.1
-            //    double delta = _rand.NextDouble() * 0.1;
-
-            //    // 随机决定左增加还是右增加
-            //    if (_rand.Next(0, 2) == 0)
-            //    {
-            //        // 左增加 → 右减少
-            //        PkBar.LeftProgress = Math.Min(1, PkBar.LeftProgress + delta);
-            //    }
-            //    else
-            //    {
-            //        // 右增加 → 左减少
-            //        PkBar.RightProgress = Math.Min(1, PkBar.RightProgress + delta);
-            //    }
-            //}
-
             DrawCirclesWithText();
             // 播放音乐
             PlayMusic("raisehand.mp3");
+
+            Random rnd = new Random();
+
+            // 模拟 20 次随机更新
+            for (int i = 0; i < 200; i++)
+            {
+                // 随机左右进度变化，保证总和=1
+                double left = rnd.NextDouble(); // 0~1
+                PkBar.LeftProgress = left;      // RightProgress 自动 1-left
+
+                await Task.Delay(1000); // 200ms 间隔，不卡UI线程
+            }
         }
 
         private void UserControl_Unloaded(object sender, RoutedEventArgs e)

Wpf_AiSportsMicrospace/Wpf_AiSportsMicrospace.csproj

@@ -28,6 +28,7 @@
     <None Remove="Resources\Img\Album\home_play.png" />
     <None Remove="Resources\Img\Album\home_test.png" />
     <None Remove="Resources\Img\Album\title.png" />
+    <None Remove="Resources\Img\Album\vs.png" />
     <None Remove="Resources\Img\Badge\1.jpg" />
     <None Remove="Resources\Img\Badge\2.jpg" />
     <None Remove="Resources\Img\Badge\3.jpg" />
@@ -182,6 +183,9 @@
     <Resource Include="Resources\Img\Album\title.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
+    <Resource Include="Resources\Img\Album\vs.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
     <Resource Include="Resources\Img\Badge\1.jpg">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>