uodate：样式优化
This commit is contained in:
ltx
parent
3bd2e0c5b4
commit
708541ea74
@ -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"
|
||||
|
||||
@ -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;
|
||||
_isMiss = true;
|
||||
//head_m.Visibility = Visibility.Hidden;
|
||||
//_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();
|
||||
};
|
||||
}
|
||||
|
||||
@ -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">
|
||||
<Canvas>
|
||||
<Border x:Name="LeftBar" Background="#95dfce" HorizontalAlignment="Left" Height="30"/>
|
||||
<Border x:Name="RightBar" Background="#e0585b" HorizontalAlignment="Right" Height="30"/>
|
||||
Width="1206">
|
||||
<Grid>
|
||||
<Image x:Name="MiddleLine" HorizontalAlignment="Left" Source="/Resources/Img/Album/vs.png" Width="60" Height="110" Panel.ZIndex="100" Margin="580,0,0,0"/>
|
||||
<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>
|
||||
|
||||
@ -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;
|
||||
if (totalWidth <= 0 || totalHeight <= 0) return;
|
||||
// 创建宽度动画
|
||||
double width = 1200 * LeftProgress;
|
||||
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;
|
||||
// 应用动画
|
||||
|
||||
// 左侧红条
|
||||
LeftBar.Width = totalWidth * _leftProgress;
|
||||
LeftBar.Height = barHeight;
|
||||
Canvas.SetLeft(LeftBar, 0);
|
||||
Canvas.SetTop(LeftBar, (totalHeight - barHeight) / 2);
|
||||
ThicknessAnimation thick = new ThicknessAnimation
|
||||
{
|
||||
From = MiddleLine.Margin, // 起始值
|
||||
To = new Thickness(width - 16, 0, 0, 0), // 目标值
|
||||
Duration = TimeSpan.FromSeconds(0.2), // time秒持续时间
|
||||
EasingFunction = new QuadraticEase { EasingMode = EasingMode.EaseOut },
|
||||
FillBehavior = FillBehavior.HoldEnd // 动画完成后保持状态
|
||||
};
|
||||
MiddleLine.BeginAnimation(FrameworkElement.MarginProperty, thick);
|
||||
|
||||
// 右侧绿条
|
||||
RightBar.Width = totalWidth * _rightProgress;
|
||||
RightBar.Height = barHeight;
|
||||
Canvas.SetLeft(RightBar, totalWidth - RightBar.Width);
|
||||
Canvas.SetTop(RightBar, (totalHeight - barHeight) / 2);
|
||||
left.BeginAnimation(Grid.WidthProperty, animation);
|
||||
|
||||
// 分割线居中在红绿交界点
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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">
|
||||
<Border Background="#005fff" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="30" />
|
||||
<Grid Width="260" Height="130" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="00,40,60,0" Visibility="Visible" x:Name="countdownGrid">
|
||||
<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>
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user