Есть изображение
Требуется обвернуть картинку индикатором загрузки и менять цвет по мере продвижения индикатора
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЕсть изображение
Требуется обвернуть картинку индикатором загрузки и менять цвет по мере продвижения индикатора
Ну что же, давайте напишем стиль для ProgressBar
'а, ведь в конце-концов вы показываете ProgressBar
, правильно?
Для начала, нам нужен будет конвертер, превращающий угол в геометрию, описывающую наш круглый прогрессбар.
Вспомним тригонометрию и в путь!
class RoundProgressPathConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter,
CultureInfo culture)
{
if (values?.Contains(DependencyProperty.UnsetValue) != false)
return DependencyProperty.UnsetValue;
var v = (double)values[0]; // значение слайдера
var min = (double)values[1]; // минимальное значение
var max = (double)values[2]; // максимальное
var ratio = (v - min) / (max - min); // какую долю окружности закрашивать
var isFull = ratio >= 1; // для случая полной окружности нужна особая обработка
var angleRadians = 2 * Math.PI * ratio;
var angleDegrees = 360 * ratio;
// внешний радиус примем за 1, растянем в XAML'е.
var outerR = 1;
// как параметр передадим долю радиуса, которую занимает внутренняя часть
var innerR =
System.Convert.ToDouble(parameter, CultureInfo.InvariantCulture) * outerR;
// вспомогательные штуки: вектор направления вверх
var vector1 = new Vector(0, -1);
// ... и на конечную точку дуги
var vector2 = new Vector(Math.Sin(angleRadians), -Math.Cos(angleRadians));
var center = new Point();
var geo = new StreamGeometry();
geo.FillRule = FillRule.EvenOdd;
using (var ctx = geo.Open())
{
Size outerSize = new Size(outerR, outerR),
innerSize = new Size(innerR, innerR);
if (!isFull)
{
Point p1 = center + vector1 * outerR, p2 = center + vector2 * outerR,
p3 = center + vector2 * innerR, p4 = center + vector1 * innerR;
ctx.BeginFigure(p1, isFilled: true, isClosed: true);
ctx.ArcTo(p2, outerSize, angleDegrees, isLargeArc: angleDegrees > 180,
sweepDirection: SweepDirection.Clockwise, isStroked: true,
isSmoothJoin: false);
ctx.LineTo(p3, isStroked: true, isSmoothJoin: false);
ctx.ArcTo(p4, innerSize, -angleDegrees, isLargeArc: angleDegrees > 180,
sweepDirection: SweepDirection.Counterclockwise, isStroked: true,
isSmoothJoin: false);
Point diag1 = new Point(-outerR, -outerR),
diag2 = new Point(outerR, outerR);
ctx.BeginFigure(diag1, isFilled: false, isClosed: false);
ctx.LineTo(diag2, isStroked: false, isSmoothJoin: false);
}
else
{
Point p1 = center + vector1 * outerR, p2 = center - vector1 * outerR,
p3 = center + vector1 * innerR, p4 = center - vector1 * innerR;
ctx.BeginFigure(p1, isFilled: true, isClosed: true);
ctx.ArcTo(p2, outerSize, 180, isLargeArc: false,
sweepDirection: SweepDirection.Clockwise, isStroked: true,
isSmoothJoin: false);
ctx.ArcTo(p1, outerSize, 180, isLargeArc: false,
sweepDirection: SweepDirection.Clockwise, isStroked: true,
isSmoothJoin: false);
ctx.BeginFigure(p3, isFilled: true, isClosed: true);
ctx.ArcTo(p4, innerSize, 180, isLargeArc: false,
sweepDirection: SweepDirection.Clockwise, isStroked: true,
isSmoothJoin: false);
ctx.ArcTo(p3, innerSize, 180, isLargeArc: false,
sweepDirection: SweepDirection.Clockwise, isStroked: true,
isSmoothJoin: false);
}
}
geo.Freeze();
return geo;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter,
CultureInfo culture)
{
throw new NotSupportedException();
}
}
Окей, конвертер есть, теперь нам нужен сам стиль. Он несложен, единственный интересный пункт — состояние Indeterminate
.
<Style x:Key="RoundProgressBarStyle" TargetType="{x:Type ProgressBar}"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
<Style.Resources>
<local:RoundProgressPathConverter x:Key="Conv"/>
<!-- нам понадобится пара констант -->
<!-- доля рабиуса для внутренней части -->
<sys:Double x:Key="RelativeThickness">0.75</sys:Double>
<!-- просто 0 -->
<sys:Double x:Key="Zero">0.0</sys:Double>
<!-- просто 1 -->
<sys:Double x:Key="One">1.0</sys:Double>
<!-- какой процент рисовать для неопределённого состояния -->
<sys:Double x:Key="IndeterminatePart">0.25</sys:Double>
<!-- обычно прогресс по умолчанию зелёный -->
<SolidColorBrush x:Key="ProgressBar.Progress" Color="#FF06B025"/>
<!-- стандартный фон -->
<SolidColorBrush x:Key="ProgressBar.Background" Color="#FFE6E6E6"/>
<!-- стандартный цвет границы -->
<SolidColorBrush x:Key="ProgressBar.Border" Color="#FFBCBCBC"/>
</Style.Resources>
<Setter Property="Foreground" Value="{StaticResource ProgressBar.Progress}"/>
<Setter Property="Background" Value="{StaticResource ProgressBar.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource ProgressBar.Border}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="TemplateRoot">
<!-- в неопределённом состоянии запускаем вращающуюся анимацию -->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Determinate"/>
<VisualState x:Name="Indeterminate">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
Storyboard.TargetName="Animation"
From="0" To="360" Duration="0:0:2"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!-- это фон, красим его в цвет фона-->
<Path Fill="{TemplateBinding Background}" Stretch="Uniform"
Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}">
<Path.Data>
<MultiBinding Converter="{StaticResource Conv}"
ConverterParameter="{StaticResource RelativeThickness}">
<!-- val=1, min=0, max=1 даёт полный круг -->
<Binding Source="{StaticResource One}"/>
<Binding Source="{StaticResource Zero}"/>
<Binding Source="{StaticResource One}"/>
</MultiBinding>
</Path.Data>
</Path>
<Path Fill="{TemplateBinding Foreground}" Stretch="Uniform" Name="Indicator">
<Path.Data>
<MultiBinding Converter="{StaticResource Conv}"
ConverterParameter="{StaticResource RelativeThickness}">
<Binding Path="Value" RelativeSource="{RelativeSource TemplatedParent}"/>
<Binding Path="Minimum" RelativeSource="{RelativeSource TemplatedParent}"/>
<Binding Path="Maximum" RelativeSource="{RelativeSource TemplatedParent}"/>
</MultiBinding>
</Path.Data>
</Path>
<!-- это анимировнная штука, будет показываться в неопределённом состоянии -->
<Path Fill="{TemplateBinding Foreground}" Stretch="Uniform" Name="Animation"
Visibility="Collapsed" RenderTransformOrigin="0.5,0.5">
<Path.Data>
<MultiBinding Converter="{StaticResource Conv}"
ConverterParameter="{StaticResource RelativeThickness}">
<Binding Source="{StaticResource IndeterminatePart}"/>
<Binding Source="{StaticResource Zero}"/>
<Binding Source="{StaticResource One}"/>
</MultiBinding>
</Path.Data>
<!-- положим пустое вращение, чтобы к нему цеплялась анимация -->
<Path.RenderTransform>
<RotateTransform/>
</Path.RenderTransform>
</Path>
</Grid>
<ControlTemplate.Triggers>
<!-- в случае неопределённого состояния уберём нормальный индикатор и покажем анимацию -->
<Trigger Property="IsIndeterminate" Value="true">
<Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
<Setter Property="Visibility" TargetName="Animation" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Отлично, нам теперь нужно поменять цвета на кастомные, и можно запускать.
Обыкновенный:
<Grid>
<Image Source="SliderBg.png" Stretch="None"/>
<ProgressBar Value="0.7" Maximum="1" Height="100" Width="100"
Style="{DynamicResource RoundProgressBarStyle}"
Foreground="#FFED1C24" Background="#FFEBB249"/>
</Grid>
То же, с IsIndeterminate="True"
:
(он вращается).
Application.Resources
.
Можно использовать геометрию WPF.
<UserControl x:Class="PhoneApp1.PartialCircle"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="480" d:DesignWidth="480" >
<Grid x:Name="LayoutRoot">
<Path StrokeEndLineCap="Round"
Stroke="Orange"
StrokeThickness="5">
<Path.Data>
<PathGeometry>
<PathFigure
StartPoint="{Binding StartPoint}" >
<ArcSegment
x:Name="Whatup"
Point="{Binding EndPoint}"
Size="{Binding Size}"
RotationAngle="0"
IsLargeArc="{Binding IsLarge}"
SweepDirection="Clockwise"
/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
</Grid>
</UserControl>
C# код:
namespace PhoneApp1
{
using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;
using System.Windows.Controls;
public partial class PartialCircle : UserControl, INotifyPropertyChanged
{
private double radius = 100;
private double percentage = 13;
public PartialCircle()
{
this.InitializeComponent();
this.DataContext = this;
}
/// <summary>
/// Задает процент
/// </summary>
public double Percentage
{
get
{
return this.percentage;
}
set
{
this.percentage = value;
this.OnPropertyChanged();
this.OnPropertyChanged("Angle");
this.OnPropertyChanged("IsLarge");
this.OnPropertyChanged("EndPoint");
}
}
/// <summary>
/// Радиус закругления
/// </summary>
public double Radius
{
get
{
return this.radius;
}
set
{
this.radius = value;
this.OnPropertyChanged();
this.OnPropertyChanged("StartPoint");
this.OnPropertyChanged("Center");
this.OnPropertyChanged("Size");
this.OnPropertyChanged("EndPoint");
}
}
/// <summary>
/// Координаты центра окружности
/// </summary>
public Point Center
{
get
{
return new Point(this.Width/2, this.Height/2);
}
}
/// <summary>
/// Gets the starting point of the path
/// </summary>
public Point StartPoint
{
get
{
return new Point(this.Center.X, this.Center.Y - this.radius); }
}
/// <summary>
/// Размеры сегмента
/// </summary>
public Size Size
{
get
{
return new Size(this.radius, this.radius);
}
}
/// <summary>
/// Угол, на котором необходимо остановиться
/// </summary>
public double Angle
{
get
{
return 359.99 * this.Percentage / 100;
}
}
/// <summary>
/// Корректировка при переходе через 180 градусов
/// </summary>
public bool IsLarge
{
get
{
return (this.Percentage > 50);
}
}
/// <summary>
/// Вычисление конечной точки
/// </summary>
public Point EndPoint
{
get
{
// Pi correction
var angle = this.Angle - 90;
return this.CalculateCircleCoordinates(this.Center, this.radius, angle);
}
}
private Point CalculateCircleCoordinates(Point center, double radius, double angle)
{
var radians = (angle * Math.PI) / 180;
return new Point(center.X + radius * Math.Cos(radians), center.Y + radius * Math.Sin(radians));
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChangedEventHandler handler = this.PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
Использование в приложении:
<PhoneApp1:PartialCircle Width="300" Height="300" Percentage="100" Radius="150"/>
Изменяем Persentage (%). А картинку можно уже класть поверх или под низ нашего элемента.
UPDATE 1: Вариант использования
ThreadPool.QueueUserWorkItem((o) =>
{
for (int i=0; i <= 100; i++)
{
this.Dispatcher.BeginInvoke((Action)(() =>
{
this.RoundProgressBar.Percentage = i;
}));
Thread.Sleep(100);
}
});
UserControl
для WinForm
? Для WPF есть свой "Пользовательский элемент управления WPF"
Советую сделать две картинки - с индикатором (image1) и без (image2). Поместить image1 поверх image2. Изначально сделать image1 прозрачным или вообще не показывать. По мере изменения прогресса показывать сектор image1. Думаю, что это решение лучше закрашивания линиями, и надеюсь, что WPF позволяет реализовать такое решение.