c# wpf countdown circle progress bar

c# wpf countdown circle progress bar 였드랬다.

이아저씨가 쓰는거 비스므래 하게해서 카운트다운용으로 바꿧드랬다.

Arc 컴퍼넌트를 쓰기위해서 블랜드4SDK를 다운로드하고
( Microsoft.Expression.Drawing )를 참조로 추가했드랬다.

지금은 Nuget에서 Unnoficial.Microsoft.Expression.drawing 에서 받을수 있다.

다운로드(DownLoad)


[사용(Use)]

<!-- 카운트다운 프로그래스바 -->
<local:CountDownCircleProgress Margin="0 50 0 0" Width="200" Height="200"
       Value="{Binding ProgressValue}"
       CircleBorderBrush="Purple" CircleThickness="40">
      <local:CountDownCircleProgress.IndicatorBrush>
            <LinearGradientBrush>
                  <GradientStop Color="#ebe7ff" Offset="0.1" />
                  <GradientStop Color="Purple" Offset="1.0" />
            </LinearGradientBrush>
       </local:CountDownCircleProgress.IndicatorBrush>
</local:CountDownCircleProgress>


[디자인(Design)]

<UserControl x:Class="MyNewWPF.CountDownCircleProgress"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
             xmlns:local="clr-namespace:MyNewWPF"
             x:Name="_this"
             mc:Ignorable="d"
             d:DesignHeight="400" d:DesignWidth="400">
    <Grid>
        <!-- 처음애니메이션 드랍방지 -->
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Grid.Loaded">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Name="MyAni"
                             Storyboard.TargetName="Indicator"
                             Storyboard.TargetProperty="StartAngle"
                             Duration="0:0:0.1" From="0 " To="0"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Grid.Triggers>
             
        <!-- 외각선 및 아크-->
        <Ellipse Fill="Transparent" Margin="0"
                 Stroke="{Binding ElementName=_this, Path=CircleBorderBrush}"/>
        <ed:Arc x:Name="Indicator" ArcThickness="{Binding ElementName=_this, Path=CircleThickness}" ArcThicknessUnit="Pixel"
                StartAngle="{Binding ElementName=_this, Path=Value}"
                EndAngle="360"
                Fill="{Binding ElementName=_this, Path=IndicatorBrush}" Stretch="None"/>     
        <Ellipse Fill="Transparent"
                 Margin="{Binding ElementName=_this, Path=CircleThickness}"
                 Stroke="{Binding ElementName=_this, Path=CircleBorderBrush}"/>
    </Grid>
</UserControl>


[코드비하인드(CodeBehind)]

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using Microsoft.Expression.Shapes;

namespace MyNewWPF
{
    /// <summary>
    /// CircleProgress.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class CountDownCircleProgress : UserControl
    {
        /// <summary>
        /// 퍼센트 채우기 부러시 프로퍼티
        /// </summary>
        public static readonly DependencyProperty IndicatorBrushProperty
            = DependencyProperty.Register("IndicatorBrush", typeof(Brush), typeof(CountDownCircleProgress));
        public Brush IndicatorBrush
        {
            get { return (Brush)this.GetValue(IndicatorBrushProperty); }
            set { this.SetValue(IndicatorBrushProperty, value); }
        }
     
        /// <summary>
        /// 배경원 스트로크 브러쉬
        /// </summary>
        public static readonly DependencyProperty CircleBorderBrushProperty
            = DependencyProperty.Register("CircleBorderBrush", typeof(Brush), typeof(CountDownCircleProgress));
        public Brush CircleBorderBrush
        {
            get { return (Brush)this.GetValue(CircleBorderBrushProperty); }
            set { this.SetValue(CircleBorderBrushProperty, value); }
        }

        /// <summary>
        /// 서클의 두께
        /// </summary>
        public static readonly DependencyProperty CircleThicknessProperty
            = DependencyProperty.Register("CircleThickness", typeof(int), typeof(CountDownCircleProgress));
        public int CircleThickness
        {
            get { return (int)this.GetValue(CircleThicknessProperty); }
            set { this.SetValue(CircleThicknessProperty, value); }
        }

        /// <summary>
        /// 앵글값 컨버터로 바뀐테이터 송출
        /// </summary>
        public static readonly DependencyProperty ValueProperty
            = DependencyProperty.RegisterAttached("Value", typeof(int), typeof(CountDownCircleProgress),
                new PropertyMetadata(new PropertyChangedCallback(OnValuePropertyChanged)));
        private static void OnValuePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            //애니메이션
            FrameworkElement element = d as FrameworkElement;
            FrameworkElement fe = (FrameworkElement)element.FindName("Indicator");
            //경계처리
            int percentvalue = (int)e.NewValue;
            if (percentvalue > 100) { percentvalue = 100; }
            if (percentvalue < 0) { percentvalue = 0; }
            var animation = new DoubleAnimation
            {
                Duration = new Duration(TimeSpan.FromMilliseconds(1000)),             
                To = (double)(percentvalue * 3.6)      //360도 각으로 변환
            };
            //애니메이션
            Storyboard StepProgress = new Storyboard();
            StepProgress.Children.Add(animation);
            Storyboard.SetTarget(animation, fe);
            Storyboard.SetTargetProperty(animation, new PropertyPath(Arc.StartAngleProperty));
            StepProgress.Begin();
        }
        public int Value
        {
            get { return (int)this.GetValue(ValueProperty); }
            set { this.SetValue(ValueProperty, value); }
        }

        /// <summary>
        /// 생성자
        /// </summary>
        public CountDownCircleProgress()
        {
            InitializeComponent();
        }
    }
}