첨부 실행 코드는 나눔고딕코딩 폰트를 사용합니다.

[C#/WPF] 환형 진행바 애니메이션 만들기

C#/WPF 2022. 5. 7. 02:05
728x90
반응형
728x170

TestProject.zip
0.25MB

▶ Font.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <FontFamily x:Key="RobotoLightFontFamilyKey">FONT/#Roboto Light</FontFamily>
    <FontFamily x:Key="RobotoMediumFontFamilyKey">FONT/#Roboto Medium</FontFamily>
    <FontFamily x:Key="RubikLightFontFamilyKey">FONT/#Rubik Light</FontFamily>
</ResourceDictionary>

 

728x90

 

▶ Style.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- 재생 버튼 -->
    <Image x:Key="DefaultPlayButtonImageKey"
        Stretch="Uniform"
        Source="{StaticResource DefaultPlayButtonDrawingImageKey}" />
    <Image x:Key="MouseOverPlayButtonImageKey"
        Stretch="Uniform"
        Source="{StaticResource MouseOverPlayButtonDrawingImageKey}" />
    <ImageBrush x:Key="DefaultPlayButtonImageBrushKey"
        Stretch="Uniform"
        ImageSource="{StaticResource DefaultPlayButtonDrawingImageKey}" />
    <ImageBrush x:Key="MouseOverPlayButtonImageBrushKey"
        Stretch="Uniform"
        ImageSource="{StaticResource MouseOverPlayButtonDrawingImageKey}" />
    <ImageBrush x:Key="DefaultStopButtonImageBrushKey"
        Stretch="Uniform"
        ImageSource="{StaticResource DefaultStopButtonDrawingImageKey}" />
    <Style x:Key="PlayToggleButtonStyleKey" TargetType="ToggleButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Border x:Name="border"
                        Background="{StaticResource DefaultPlayButtonImageBrushKey}">
                        <ContentPresenter />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter
                                TargetName="border"
                                Property="Background"
                                Value="{StaticResource MouseOverPlayButtonImageBrushKey}" />
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter
                                TargetName="border"
                                Property="Background"
                                Value="{StaticResource DefaultStopButtonImageBrushKey}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- 전원 버튼 -->
    <Image x:Key="RedPowerButtonImageKey"
        Stretch="Uniform"
        Source="{StaticResource RedPowerButtonDrawingImageKey}" />
    <ImageBrush x:Key="RedPowerButtonDrawingImageBrushKey"
        Stretch="Uniform"
        ImageSource="{StaticResource RedPowerButtonDrawingImageKey}" />
    <ImageBrush x:Key="WhitePowerButtonImageBrushKey"
        Stretch="Uniform"
        ImageSource="{StaticResource WhitePowerButtonDrawingImageKey}" />
    <Style x:Key="PowerButtonStyleKey" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="border"
                        Background="{StaticResource RedPowerButtonDrawingImageBrushKey}">
                        <ContentPresenter />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter
                                TargetName="border"
                                Property="Background"
                                Value="{StaticResource WhitePowerButtonImageBrushKey}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter
                                TargetName="border"
                                Property="Background"
                                Value="{StaticResource RedPowerButtonDrawingImageBrushKey}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

 

300x250

 

▶ CircularProgressBar.xaml

<UserControl
    x:Class="TestProject.CircularProgressBar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <UserControl.Resources>
        <Storyboard x:Key="ProgressBarStoryboardKey"
            TargetName="arc"
            Completed="storyboard_Completed">
            <PointAnimationUsingPath
                Storyboard.TargetProperty="Point"
                Duration="0:0:20">
                <PointAnimationUsingPath.PathGeometry>
                    <PathGeometry Figures="M 0 -100 A 100 100 0 0 1 0 100 A 100 100 0 0 1 0 -100" />
                </PointAnimationUsingPath.PathGeometry>
            </PointAnimationUsingPath>
            <BooleanAnimationUsingKeyFrames
                Storyboard.TargetProperty="IsLargeArc"
                Duration="0:0:20">
                <DiscreteBooleanKeyFrame KeyTime="0:0:0"  Value="False" />
                <DiscreteBooleanKeyFrame KeyTime="0:0:10" Value="True"  />
            </BooleanAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Grid>
        <Canvas>
            <Path x:Name="progressPath"
                Fill="Transparent"
                StrokeThickness="20"
                StrokeStartLineCap="Flat"
                StrokeEndLineCap="Flat"
                StrokeLineJoin="Round"
                Stroke="#fef200">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0 -100" IsClosed="False">
                            <LineSegment Point="0 -100" />
                            <ArcSegment x:Name="arc"
                                Size="100 100"
                                IsLargeArc="True"
                                SweepDirection="Clockwise" />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
                <Path.Effect>
                    <DropShadowEffect
                        BlurRadius="50"
                        ShadowDepth="2"
                        Direction="-90"
                        Color="#fef200" />
                </Path.Effect>
            </Path>
        </Canvas>
    </Grid>
</UserControl>

 

반응형

 

▶ CircularProgressBar.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;

namespace TestProject
{
    /// <summary>
    /// 환형 진행바
    /// </summary>
    public partial class CircularProgressBar : UserControl
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - CircularProgressBar()

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

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 스토리보트 완료시 처리하기 - storyboard_Completed(sender, e)

        /// <summary>
        /// 스토리보트 완료시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void storyboard_Completed(object sender, EventArgs e)
        {
            if(Application.Current.MainWindow is MainWindow mainWindow)
            {
                mainWindow.startButton.IsChecked = false;
            }
        }

        #endregion
    }
}

 

▶ MainApplication.xaml

<Application x:Class="TestProject.MainApplication"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Image.xaml" />
                <ResourceDictionary Source="Style.xaml" />
                <ResourceDictionary Source="Font.xaml"  />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

 

▶ MainWindow.xaml

<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestProject"
    WindowStartupLocation="CenterScreen"
    WindowStyle="None"
    Width="800"
    Height="600"
    Title="환형 진행바 애니메이션 만들기"
    AllowsTransparency="True"
    Background="Transparent">
    <Grid>
        <Border
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="800"
            Height="600"
            CornerRadius="20"
            BorderThickness="5"
            BorderBrush="#FFFFFF"
            Background="#2A2A2A" />
        <Grid
            HorizontalAlignment="Center"
            VerticalAlignment="Bottom"
            Margin="0 0 0 10"
            Width="150"
            Height="150">
            <ToggleButton Name="startButton"
                Style="{StaticResource PlayToggleButtonStyleKey}"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Width="110"
                Height="110"
                Checked="startButton_Checked"
                Unchecked="startButton_Unchecked" />
        </Grid>
        <Image
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            Margin="0 50 0 0"
            Width="350"
            Height="350"
            Stretch="Uniform"
            Source="{StaticResource DialDrawingImageKey}" />
        <Grid
            Margin="0 80 0 0"
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            Width="290"
            Height="290">
            <Ellipse
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Width="210"
                Height="210"
                StrokeThickness="10"
                Stroke="#4d4d4d" />
            <TextBlock Name="timerLabel"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Width="100"
                Height="100"
                TextAlignment="Center"
                Foreground="#FEF200"
                FontFamily="{StaticResource RobotoLightFontFamilyKey}"
                FontSize="50"
                Text="0">
                <TextBlock.Effect>
                    <DropShadowEffect
                        BlurRadius="30"
                        ShadowDepth="2"
                        Direction="-90"
                        Color="#fef200" />
                </TextBlock.Effect>
            </TextBlock>
            <TextBlock
                HorizontalAlignment="Center"
                Margin="0 50 0 0"
                Width="210"
                Height="20"
                TextAlignment="Center"
                Foreground="#ffffff"
                FontFamily="{StaticResource RubikLightFontFamilyKey}"
                FontSize="15"
                Text="P E R C E N T" />
        </Grid>
        <local:CircularProgressBar x:Name="circularProgressBar"
            Margin="400 225 0 0"
            Visibility="Collapsed" />
        <Button
            Style="{StaticResource PowerButtonStyleKey}"
            Margin="0 20 20 0"
            HorizontalAlignment="Right"
            VerticalAlignment="Top"
            Width="35"
            Height="35"
            Click="powerButton_Click" />
    </Grid>
</Window>

 

▶ MainWindow.xaml.cs

using System;
using System.Windows;
using System.Windows.Media.Animation;
using System.Windows.Threading;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 타이머
        /// </summary>
        private DispatcherTimer timer = new DispatcherTimer();

        /// <summary>
        /// 카운터
        /// </summary>
        private int counter = 0;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region 시작 버튼 체크시 처리하기 - startButton_Checked(sender, e)

        /// <summary>
        /// 시작 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void startButton_Checked(object sender, RoutedEventArgs e)
        {
            StartTimer();

            StartAnimation();
        }

        #endregion
        #region 시작 버튼 체크 해제시 처리하기 - startButton_Unchecked(sender, e)

        /// <summary>
        /// 시작 버튼 체크 해제시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void startButton_Unchecked(object sender, RoutedEventArgs e)
        {
            StopTimer();

            StopAnimation();
        }

        #endregion

        #region 전원 버튼 클릭시 처리하기 - powerButton_Click(sender, e)

        /// <summary>
        /// 전원 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void powerButton_Click(object sender, RoutedEventArgs e)
        {
            Close();
        }

        #endregion

        #region 타이머 틱 처리하기 - timer_Tick(sender, e)

        /// <summary>
        /// 타이머 틱 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void timer_Tick(object sender, EventArgs e)
        {
            this.counter++;

            this.timerLabel.Text = this.counter.ToString();

            if(this.counter == 100)
            {
                this.timer.Stop();

                this.timerLabel.Text = "0".ToString();
            }
        }

        #endregion
        //////////////////////////////////////////////////////////////////////////////// Function

        #region 타이머 시작하기 - StartTimer()

        /// <summary>
        /// 타이머 시작하기
        /// </summary>
        private void StartTimer()
        {
            this.circularProgressBar.Visibility = Visibility.Visible;

            if(this.counter > 0)
            {
                this.timer.Tick -= timer_Tick;

                this.counter = 0;
            }

            this.timer.Interval = TimeSpan.FromMilliseconds(188);

            this.timer.Tick += timer_Tick;

            this.timer.Start();
        }

        #endregion
        #region 타이머 중단하기 - StopTimer()

        /// <summary>
        /// 타이머 중단하기
        /// </summary>
        private void StopTimer()
        {
            if(this.counter > 0)
            {
                this.timer.Tick -= timer_Tick;

                this.counter = 0;
            }

            this.timer.Stop();

            this.circularProgressBar.Visibility = Visibility.Collapsed;

            this.timerLabel.Text = "0".ToString();
        }

        #endregion

        #region 애니메이션 시작하기 - StartAnimation()

        /// <summary>
        /// 애니메이션 시작하기
        /// </summary>
        private void StartAnimation()
        {
            ((Storyboard)this.circularProgressBar.Resources["ProgressBarStoryboardKey"]).Begin();
        }

        #endregion
        #region 애니메이션 중단하기 - StopAnimation()

        /// <summary>
        /// 애니메이션 중단하기
        /// </summary>
        private void StopAnimation()
        {
            ((Storyboard)this.circularProgressBar.Resources["ProgressBarStoryboardKey"]).Stop();
        }

        #endregion
    }
}
728x90
반응형
그리드형(광고전용)

'C# > WPF' 카테고리의 다른 글

[C#/WPF] ContentPresenter 엘리먼트 : RecognizesAccessKey 속성을 사용해 액세스 키 사용 여부 설정하기  (0) 2022.05.25
[C#/WPF] ContentControl 클래스 : 원형 파급 효과 애니메이션 컨트롤 만들기  (0) 2022.05.25
[C#/WPF] WebBrowser 엘리먼트 : 스크립트 오류 억제하기  (0) 2022.05.24
[C#/WPF] InputMethod 엘리먼트 : PreferredImeState/PreferredImeConversionMode 첨부 속성을 사용해 한글 모드에서 입력 시작하기  (0) 2022.05.24
[C#/WPF] MessageBox 클래스 : Show 정적 메소드를 사용해 최상위 메시지 박스 표시하기  (0) 2022.05.14
[C#/WPF] Storyboard 엘리먼트 : 슬라이딩 패널 만들기  (0) 2022.02.04
[C#/WPF] 투명 윈도우 마우스 따라다니기  (0) 2022.01.29
[C#/WPF] Visual 클래스 : PointToScreen 메소드를 사용해 마우스 화면 좌표 구하기  (0) 2022.01.29
[C#/WPF] Button 엘리먼트 : FocusVisualStyle 속성을 사용해 포커스 비주얼 스타일 설정하기  (0) 2022.01.28
[C#/WPF] UIElement 클래스 : GotFocus/LostFocus 이벤트를 사용해 키보드 포커스 획득/상실시 처리하기  (0) 2022.01.28
Posted by icodebroker
TAG , , , , , ,
, 댓글 0개가 달렸습니다.

댓글을 달아 주세요

티스토리툴바