WPF에서 Progress loading 처리 방법

Nuget의 MahApps.Metro 프로임웨크를 이용한 Progress처리방법 입니다.

작업순서는 다음과 같습니다.

 

① WPF프로젝트를 생성후에 Nuget에서 MahApps.Metro 프레임워크를 설치합니다.

② Progress에 사용될 스타일코드를 추가합니다.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        xmlns:local="clr-namespace:ProgressSample">
        <!-- Progress ring-->
        <Style x:Key="pgr-normal" TargetType="{x:Type Mah:ProgressRing}">
            <Setter Property="Foreground" Value="#33adff"/>
            <Setter Property="IsActive" Value="False"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="100"/>
            <Setter Property="Panel.ZIndex" Value="100"/>
        </Style>
        <!-- Progress overlay-->
        <Style x:Key="rec-overlay" TargetType="{x:Type Rectangle}" >
            <Setter Property="Fill" Value="#000000"/>
            <Setter Property="Opacity" Value="0.0"/>
            <Setter Property="Panel.ZIndex" Value="1000"/>
            <Setter Property="Margin" Value="0,0,0,0"/>
            <Setter Property="Visibility" Value="Hidden"/>
        </Style>
        <!-- Progress Text-->
        <Style x:Key="tbk-title" TargetType="{x:Type TextBlock}" >
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="150"/>
            <Setter Property="Panel.ZIndex" Value="100"/>
            <Setter Property="Visibility" Value="Hidden"/>
        </Style>
</ResourceDictionary>

③ Progress처리를 적용할 Window의 Xaml에 Progress관련 디자인코드를 추가합니다.

<Window x:Class="ProgressSample.MainWindow"
        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"
        xmlns:Mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        xmlns:local="clr-namespace:ProgressSample"
        mc:Ignorable="d"
        Title="ProgressLoding" Height="200" Width="400">
    <Window.Resources>
        <ResourceDictionary Source="/Progress.xaml"/>  <!--Progress Style-->
    </Window.Resources>
    <Grid>
        <TextBlock x:Name="tbl_text" Text="Progress처리중" Style="{StaticResource tbk-title}"></TextBlock> <!--Progress Text-->
        <Rectangle x:Name="rec_overlay" Width="200" Height="400" Style="{StaticResource rec-overlay}" HorizontalAlignment="Left"/> <!--Progress Overlay-->
        <Mah:ProgressRing x:Name="loading_image" Style="{StaticResource pgr-normal}"/>  <!--Progress Ring-->
        <Button x:Name="btnProgress" Content="Progress처리실행" Width="150" Height="50"></Button>
    </Grid>
</Window>

④ Progress처리를 추가할 화면에 이벤트 및 소스코드를 추가

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ProgressSample
{
    /// <summary>
    /// MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        /// <summary>
        /// Progress처리실행버튼 클릭 이벤트 
        /// </summary>
        private void btnProgress_Click(object sender, RoutedEventArgs e)
        {
            //백그라운드 실행생성
            BackgroundWorker worker = new BackgroundWorker();
            //백그라운드 이벤트설정
            worker.DoWork += ProgressDoWork;
            //백그라운드 완료이벤트설정
            worker.RunWorkerCompleted += new RunWorkerCompletedEventHandler(ProgressCompleted);
            //백그라운드 실행
            worker.RunWorkerAsync(100);
            //Progress이미지 표시
            ProgressChange();
        }

        /// <summary>
        /// Progress의 백그라운드상에서의 처리내용
        /// </summary>
        private void ProgressDoWork(object sender, DoWorkEventArgs e)
        {
            //처리내용추가
            //10초동안 Progress처리(샘플)
            Thread.Sleep(10000);
        }

        /// <summary>
        /// Progress처리완료 이벤트
        /// </summary>
        private void ProgressCompleted(object sender, RunWorkerCompletedEventArgs e)
        {
            //Progress이미지 비표시 처리
            ProgressChange();
        }

        /// <summary>
        /// Progress이미지 표시/비표시 처리
        /// </summary>
        private void ProgressChange()
        {
            // Progress이미지가 표시된 경우
            if (this.loading_image.IsActive)
            {
                // Progress이미지를 비표시
                this.loading_image.IsActive = false;
                this.rec_overlay.Visibility = Visibility.Hidden;
                this.tbl_text.Visibility = Visibility.Hidden;
            }
            // Progress이미지가 비표시된 경우
            else
            {
                // Progress이미지를 표시
                this.loading_image.IsActive = true;
                this.rec_overlay.Visibility = Visibility.Visible;
                this.tbl_text.Visibility = Visibility.Visible;
            }
        }
    }
}

⑤ 샘플화면과 소스첨부

ProgressSample.zip

19.27MB