uodate：样式优化

Wpf_AiSportsMicrospace/MyUserControl/PopSilder.xaml

@@ -9,9 +9,16 @@
              
              >
     <Grid>
+        <Grid x:Name="great" Visibility="Hidden" HorizontalAlignment="Left" Height="172" Width="221" VerticalAlignment="Bottom" Margin="-110,0,0,0"  >
+            <Image  Source="/Resources/Img/play_img/music_rope/great.png"  HorizontalAlignment="Right" Width="90"  VerticalAlignment="Top" Margin="0,0,0,0"/>
+            <Image Source="/Resources/Img/play_img/music_rope/great-p.png"   Width="145" Height="141" VerticalAlignment="Bottom" />
+
+        </Grid>
+        <Image x:Name="miss" Source="/Resources/Img/play_img/music_rope/miss.png" Visibility="Hidden" HorizontalAlignment="Left" Width="157" Height="85" VerticalAlignment="Bottom" Margin="0,0,0,86"/>
+
         <Image x:Name="head_g" Source="/Resources/Img/play_img/music_rope/head_g.png" Visibility="Hidden" HorizontalAlignment="Right" Width="152" Height="85" VerticalAlignment="Top" Margin="0,0,0,0"/>
         <Image x:Name="head_m" Source="/Resources/Img/play_img/music_rope/head_m.png" Visibility="Hidden" HorizontalAlignment="Right" Width="152" Height="85" VerticalAlignment="Top" Margin="0,0,0,0"/>
-        <StackPanel Orientation="Horizontal">
+        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
             <Grid Width="3" Height="140"  Background="#fedd40" ClipToBounds="False" Margin="0,620,0,0"></Grid>
             <Grid Width="580" Height="87"  Background="#25ffffff" ClipToBounds="False" Margin="0,620,0,0" HorizontalAlignment="Left">
                 <Border BorderBrush="#25ffffff" 

Wpf_AiSportsMicrospace/MyUserControl/PopSilder.xaml.cs

@@ -148,24 +148,26 @@ namespace Wpf_AiSportsMicrospace.MyUserControl
             if (_isMiss)
             {
                 head_m.Visibility = Visibility.Visible;
+                miss.Visibility = Visibility.Visible;
                 //200ms后隐藏
                 var hideTimer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(200) };
                 hideTimer.Tick += (s, e) =>
                 {
-                    head_m.Visibility = Visibility.Hidden;
+                    //head_m.Visibility = Visibility.Hidden;
-                    _isMiss = true;
+                    //_isMiss = true;
                     hideTimer.Stop();
                 };
             }
             else
             {
                 head_g.Visibility = Visibility.Visible;
+                great.Visibility = Visibility.Visible;
                 //200ms后隐藏
                 var hideTimer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(200) };
                 hideTimer.Tick += (s, e) =>
                 {
                     head_g.Visibility = Visibility.Hidden;
-                    _isMiss = false;
+                    great.Visibility = Visibility.Hidden;
                     hideTimer.Stop();
                 };
             }

Wpf_AiSportsMicrospace/MyUserControl/WxProgressBar.xaml

@@ -4,22 +4,44 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              x:Name="root"
-             Height="30" Width="600">
+             Width="1206">
-    <Canvas>
+    <Grid>
-        <Border x:Name="LeftBar" Background="#95dfce" HorizontalAlignment="Left" Height="30"/>
+        <Image x:Name="MiddleLine" HorizontalAlignment="Left" Source="/Resources/Img/Album/vs.png" Width="60"  Height="110" Panel.ZIndex="100" Margin="580,0,0,0"/>
-        <Border x:Name="RightBar" Background="#e0585b"  HorizontalAlignment="Right" Height="30"/>
+        <Grid Height="55" >
+            <Border BorderBrush="#ffffff" BorderThickness="3" CornerRadius="5" Padding="0" Margin="0">
+                <Grid >
+                    <Border  BorderBrush="#e0585b" BorderThickness="2" CornerRadius="2" Background="#e0585b"></Border>
 
+                    <Grid x:Name="left"  Width="600" Height="49" HorizontalAlignment="Left">
+                        <Border   BorderBrush="#95dfce" BorderThickness="2" CornerRadius="2" Background="#95dfce"></Border>
+                    </Grid>
+                    <!--<Grid x:Name="right" Width="600" Height="49" HorizontalAlignment="right">
+                        <Border BorderBrush="#e0585b" BorderThickness="2" CornerRadius="2" Background="#e0585b"></Border>
+                    </Grid>-->
+                </Grid>
+                <!--<Canvas >
+    <Border x:Name="LeftBar" Background="#95dfce" HorizontalAlignment="Left" Height="50"/>
+    <Border x:Name="RightBar" Background="#e0585b"  HorizontalAlignment="Right" Height="50"/>
+    -->
                 <!-- 中间分割线图片 -->
+                <!--
     <Image x:Name="MiddleLine" 
    Source="/Resources/Img/Album/vs.png" 
-           Width="30" Height="50" Panel.ZIndex="100"/>
+   Width="50" Height="80" Panel.ZIndex="100"/>
 
+    -->
                 <!-- 中间百分比文本 -->
+                <!--
     <TextBlock x:Name="ProgressTextBlock" 
            Foreground="White" 
            FontSize="14" 
            FontWeight="Bold" 
            HorizontalAlignment="Center" 
            VerticalAlignment="Center"/>
-    </Canvas>
+</Canvas>-->
+            </Border>
+        </Grid>
+        
+    </Grid>
+
 </UserControl>

Wpf_AiSportsMicrospace/MyUserControl/WxProgressBar.xaml.cs

@@ -7,6 +7,7 @@ using System.Windows.Data;
 using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Media;
+using System.Windows.Media.Animation;
 using System.Windows.Media.Imaging;
 using System.Windows.Navigation;
 using System.Windows.Shapes;
@@ -18,6 +19,7 @@ namespace Wpf_AiSportsMicrospace.MyUserControl
     /// </summary>
     public partial class WxProgressBar : UserControl
     {
+        
         public WxProgressBar()
         {
             InitializeComponent();
@@ -57,39 +59,68 @@ namespace Wpf_AiSportsMicrospace.MyUserControl
 
         private void UpdateVisual()
         {
-            double totalWidth = ActualWidth;
+            // 创建宽度动画
-            double totalHeight = ActualHeight;
+            double width = 1200 * LeftProgress;
-            if (totalWidth <= 0 || totalHeight <= 0) return;
+            DoubleAnimation animation = new DoubleAnimation
+            {
+                From = left.Width,
+                To = width,
+                Duration = TimeSpan.FromSeconds(0.2),
+                EasingFunction = new QuadraticEase { EasingMode = EasingMode.EaseOut },
+                FillBehavior = FillBehavior.HoldEnd
+            };
 
-            double barHeight = 30; // 进度条高度
+            // 应用动画
-            double middleLineHeight = MiddleLine.Height;
 
-            // 左侧红条
+            ThicknessAnimation thick = new ThicknessAnimation
-            LeftBar.Width = totalWidth * _leftProgress;
+            {
-            LeftBar.Height = barHeight;
+                From = MiddleLine.Margin,     // 起始值
-            Canvas.SetLeft(LeftBar, 0);
+                To = new Thickness(width - 16, 0, 0, 0),    // 目标值
-            Canvas.SetTop(LeftBar, (totalHeight - barHeight) / 2);
+                Duration = TimeSpan.FromSeconds(0.2),  // time秒持续时间
+                EasingFunction = new QuadraticEase { EasingMode = EasingMode.EaseOut },
+                FillBehavior = FillBehavior.HoldEnd    // 动画完成后保持状态
+            };
+            MiddleLine.BeginAnimation(FrameworkElement.MarginProperty, thick);
 
-            // 右侧绿条
+            left.BeginAnimation(Grid.WidthProperty, animation);
-            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 void UpdateVisual()
+        //{
+        //    double totalWidth = ActualWidth;
+        //    double totalHeight = ActualHeight;
+        //    if (totalWidth <= 0 || totalHeight <= 0) return;
+
+        //    double barHeight = 50; // 进度条高度
+        //    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;
     }
 }

Wpf_AiSportsMicrospace/Views/JumpRope/MusicJumpRope.xaml

@@ -16,26 +16,27 @@
               VerticalAlignment="Top"
               Width="905"
               Margin="0,70,0,0"
+              MouseDown="Image_MouseDown"
               />
         <Grid Height="1080" Width="1920" x:Name="userBox">
             <Canvas x:Name="beatCanvas" />
         </Grid>
 
-        <Grid Width="220" Height="130" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="00,40,60,0" Visibility="Hidden" x:Name="countdownGrid">
+        <Grid Width="260" Height="130" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="00,40,60,0" Visibility="Visible" x:Name="countdownGrid">
-            <Border Background="#005fff" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" CornerRadius="30"  />
+            <Border Background="#9e4ff9" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" CornerRadius="30"  />
             <TextBlock x:Name="countdownText"
-                  Text="60"
+                  Text="100"
                   FontSize="120"
                   FontWeight="Bold"
                   Foreground="#fff"
                   FontStyle="Italic"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
-                  Margin="0,10,0,0"
+                  Margin="0,10,10,0"
                   TextAlignment="Center"
                   />
         </Grid>
-        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" >
+        <StackPanel VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,160,0,0">
             <local:WxProgressBar x:Name="PkBar"/>
         </StackPanel>
 
@@ -55,6 +56,7 @@
                 </StackPanel>
             </Grid>
         </Grid>-->
-        <local:PopSilder x:Name="popSilder" HorizontalAlignment="Left" VerticalAlignment="Top"/>
+        <local:PopSilder x:Name="popSilder1" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="154,0,0,100"/>
+        <local:PopSilder x:Name="popSilder2" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,154,100"/>
     </Grid>
 </UserControl>

Wpf_AiSportsMicrospace/Views/JumpRope/MusicJumpRope.xaml.cs

@@ -481,7 +481,14 @@ namespace Wpf_AiSportsMicrospace.Views.JumpRope
                     {
                         _musicJumpRopeContext.UserBeatSyncList[indexCopy]++;
                         _musicBeatTextBlock[indexCopy].Text = $"卡点 x{_musicJumpRopeContext.UserBeatSyncList[indexCopy]}";
-
+                        if(indexCopy == 0)
+                        {
+                            popSilder1.IsMiss = false;
+                        }
+                        else
+                        {
+                            popSilder2.IsMiss = false;
+                        }
                         //if (indexCopy == 0)
                         //    LeftBeats.SetSelected(currentSecond, true);
                         //else
@@ -628,5 +635,11 @@ namespace Wpf_AiSportsMicrospace.Views.JumpRope
 
             return userItem;
         }
+
+        private void Image_MouseDown(object sender, MouseButtonEventArgs e)
+        {
+            popSilder1.StartMarginAnimation();
+            popSilder2.StartMarginAnimation();
+        }
     }
 }