5

Есть изображение

введите сюда описание изображения

Требуется обвернуть картинку индикатором загрузки и менять цвет по мере продвижения индикатора

введите сюда описание изображения

введите сюда описание изображения

5
  • Нужно свой Control писать 5 мая 2016 в 9:56
  • Ну или поместить на задний фон, за картинку, эллипс и закрашивать его линиями, чем и занимаюсь 5 мая 2016 в 10:06
  • Можно стилизовать прогрессбар. Напишу попозже.
    – VladD
    5 мая 2016 в 13:07
  • @VladD Все мои решения пришли в тупик, стилизированный прогрессбар сейчас бы пригодился, спасибо 5 мая 2016 в 17:52
  • @zakihatfild: Сделал.
    – VladD
    6 мая 2016 в 11:59

3 ответа 3

10

Ну что же, давайте напишем стиль для 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":

неопределённый прогресс бар

(он вращается).

10
  • Style="{DynamicResource RoundProgressBarStyle}" выдаёт: не удалось разрешить ресурс "RoundProgressBarStyle" 7 мая 2016 в 10:06
  • @zakihatfild: Ну, а вы стиль куда положили? Или может быть вы его назвали не так? Должно видеть.
    – VladD
    7 мая 2016 в 10:12
  • я создал настраиваемый элемент управления WPF, стиль положил в Generic.xaml, а конвертер в класс который оно создало 7 мая 2016 в 10:17
  • @zakihatfild: «Настраиваемый элемент управления» — это custom control? А почему бы не сделать просто так, как я написал: не делать отдельный контрол, а использовать стиль для ProgressBar'а? В Generic.xaml кладутся стили для custom control'ов. Положите стиль в Application.Resources.
    – VladD
    7 мая 2016 в 10:22
  • а конвертер в обычный класс? 7 мая 2016 в 10:27
4

Можно использовать геометрию 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);
                }
            });
8
  • Хорошо, я создал UserControl, вставил исходник.<PhoneApp1:PartialCircle Width="300" Height="300" Percentage="100" Radius="150"/> нужно вставить в разметку главного окна, а куда разметку xaml UserControl писать? 6 мая 2016 в 9:03
  • не совсем понимаю, что вы имеете ввиду... вы случаем не создали UserControl для WinForm? Для WPF есть свой "Пользовательский элемент управления WPF"
    – MaximK
    6 мая 2016 в 9:14
  • разобрался вставил всё куда надо в коде C# использую UserControl.Percentage = ++progress; но ничего не отображается 6 мая 2016 в 9:27
  • имя дайте своему UserControl? и через него обращайтесь
    – MaximK
    6 мая 2016 в 9:38
  • progress++; RoundProgressBar.Percentage = progress; Не работает 6 мая 2016 в 9:43
0

Советую сделать две картинки - с индикатором (image1) и без (image2). Поместить image1 поверх image2. Изначально сделать image1 прозрачным или вообще не показывать. По мере изменения прогресса показывать сектор image1. Думаю, что это решение лучше закрашивания линиями, и надеюсь, что WPF позволяет реализовать такое решение.

2
  • Просто я не могу найти как закрасить сектор, не то чтобы выводить 5 мая 2016 в 11:47
  • @zakihatfild, к сожалению, стандартными средствами мой вариант не реализовать. Простите за ложный путь. 5 мая 2016 в 18:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.