C# Form fade effect, 페이딩 (그라데이션) 윈폼 예제

C# Form fade effect, 페이딩 (그라데이션) 윈폼 예제 

• C# Form fade 프로젝트 - WindowsApplication5.zip [클릭]

C Sharp Form - Fading Form

일단 프로젝트를 다운 받아 실행하면 위와 같이 멋없는 윈도우 폼이 하나 뜹니다.

근데, 이미 페이딩 효과(그라데이션?)가 적용된 것으로 아래 gif처럼 마우스를 갖다 대면 윈폼 색상이 변해요.

[C# Form fade effect, 페이딩 (그라데이션) 윈폼 예제]

『gif 캡처 프로그램』이 마우스 커서까지 녹화하지 못해서 그런데, 화면이 밝아지는 건 마우스 커서가 닿았기 때문입니다. 이런 효과를 윈도우 폼에 추가할 소스가 아래에 있습니다.

C# Windows Form Fade

페이딩 폼을 만드는 그 자체는 어렵지 않습니다. 제대로 구조화하여 프로그래밍하는 것이 중요합니다.

실제로 프로그램 소스 상에서는 폼의 불투명도를 단순 루프로 쉽게 수행합니다.

for (double i = this.Opacity; i <= 1; i += fadeRate)
{
     ChangeOpacity(i);
}
 
if (this.Opacity != 1.00)     
     ChangeOpacity(1.00);

그리고, 코드상에선 단순히 Opacity를 변경하지 않고, ChangeOpacity를 호출하여 사용하는데, 이것은 멀티 스레딩으로 보다 원활한 C# Form의 페이딩(Fading)을 위해서입니다. UI의 나머지 요소들과의 부분적(때로는 큰) 윈폼 충돌을 피하기 위해서입니다.

멀티 스레딩을 통해서 예기치 못한 상황이나 소소한 충돌들의 예방이 가능합니다.

그럼, 과연 그런 문제는 뭘까요?

단순하게도 지금 사용하려는 페이딩(Fading)과 프로그램 폼 내부의 스레드 간 충돌입니다. 현재의 .Net Framework는 크로스 스레드 호출을 허용하지 않고 있기 때문이죠. 『그래서 멀티 스레딩』을 위한 델리게이트를 사용합니다.

Multithreading

왜 멀티 스레딩을 하느냐?

private delegate void ChangeOpacityDelegate(double value);
 
private void ChangeOpacity(double value)
{     
    if (this.InvokeRequired)     
    {          
        ChangeOpacityDelegate del = new ChangeOpacityDelegate(ChangeOpacity);          
        object[] parameters = { value };
    
        this.Invoke(del, value);   
    }     
    else   
    {          
        //Your code goes here, in this case:          
        this.Opacity = value;    
    }
}

이것으로, C#에서 어떤 함수가 위의 코드를 원할 때 원활히 사용할 수 있습니다.

C# Form Mouse Events

실제 윈폼에 페이드 효과를 주기 위해선 MouseEnter과 MouseLeave란 메서드를 이용합니다. 아래와 같이 호출해 사용하면 됩니다.

ThreadStart fadeInStart = new ThreadStart(FadeIn);
fadeIn = new Thread(fadeInStart);
fadeIn.Start();

그런데, 이렇게 해도 페이딩에 작은 문제가 하나 생깁니다.

마우스 커서가 다른 창으로 이동해서 조처를 하면, 흐려졌던 폼이 다시 원래 색상으로 돌아오지 않습니다. 그래서 MouseLeave를 사용해서 마우스가 과연 Leave 중인지를 가려내야 합니다.

if (this.Bounds.Contains(Cursor.Position))
    return;

Avoiding Overflow

Form FadeIn과 FadeOut에서 오버플로우 문제가 발생할 수 있지만, Abort를 호출함으로써 간단히 해결할 수 있습니다.

 C# Form fade effect, 페이딩 (그라데이션) 윈폼 예제