进度条
This commit is contained in:
parent
a4a54a2f69
commit
41955de0d3
@ -5,9 +5,21 @@
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
x:Name="root"
|
||||
Height="30" Width="600">
|
||||
<Grid Background="#222">
|
||||
<Border x:Name="LeftBar" Background="#FF4D4D" HorizontalAlignment="Left"/>
|
||||
<Border x:Name="RightBar" Background="#33CC33" HorizontalAlignment="Right"/>
|
||||
<TextBlock x:Name="ProgressTextBlock" Foreground="White" FontSize="14" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Grid>
|
||||
<Canvas>
|
||||
<Border x:Name="LeftBar" Background="#e0585b" HorizontalAlignment="Left" Height="30"/>
|
||||
<Border x:Name="RightBar" Background="#95dfce" HorizontalAlignment="Right" Height="30"/>
|
||||
|
||||
<!-- 中间分割线图片 -->
|
||||
<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>
|
||||
|
||||
@ -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;
|
||||
if (width <= 0) return;
|
||||
double totalWidth = ActualWidth;
|
||||
double totalHeight = ActualHeight;
|
||||
if (totalWidth <= 0 || totalHeight <= 0) return;
|
||||
|
||||
LeftBar.Width = width * _leftProgress;
|
||||
RightBar.Width = width * _rightProgress;
|
||||
double barHeight = 30; // 进度条高度
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BIN
Wpf_AiSportsMicrospace/Resources/Img/Album/vs.png
Normal file
BIN
Wpf_AiSportsMicrospace/Resources/Img/Album/vs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
@ -35,9 +35,8 @@
|
||||
TextAlignment="Center"
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid VerticalAlignment="Top">
|
||||
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" >
|
||||
<local:WxProgressBar x:Name="PkBar"/>
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</UserControl>
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user