WPF 뷰에서 fadein, fadeout 효과주기(코드)

1. Rectangle 객체 생성하기

//StackPanel 생성 후 여백 10 설정

StackPanel myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);

//사각형 객체 생성 , 이름 = myRectangle, 
Rectangle myRectangle = new Rectangle();
myRectangle.Name = "myRectangle";
this.RegisterName(myRectangle.Name, myRectangle);

 //가로 100, 세로 100, 색 파랑
 myRectangle.Width = 100;
 myRectangle.Height = 100;
 myRectangle.Fill = Brushes.Blue;
            
 //패널의 하위 객체로 삽입
 myPanel.Children.Add(myRectangle);
 this.Content = myPanel;

///////--------------
//RegisterName은 현재 XAML 이름 범위에 새 이름-개체 쌍을 등록하는 함수

실행하면 다음과 같은 화면을 볼 수 있다!!


2. DoubleAnimation 만들기
 뷰에서 페이드 인한 후 페이드 아웃하는 한 가지 방법은 요소의 Opacity속성에 애니메이션 효과를 적용하는 것이다. Opacity는 Double형식이기 때문에 double값을 생성하는 애니메이션이 필요하다.
DoubleAnimation이 그 중 하나이고, 두 double값 간에 전환을 만든다.
시작값을 From, 끝값을 To에 지정한다.

DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;

    Duration 설정, Duration은 From에서 To까지 이동하는 시간 설정, 다음과 같이 5로 설정
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
  AutoReverse - 완전히 투명이 된후 자동으로 다시 나타나게 설정
  RepeatBehavior - 반복기능설정, RepeatBehavior.Forever ;// 무한정 반복을 의미

3. 스토리보드 만들기
만든 애니메이션을 적용하려면 Storyboard를 이용 객체와 애니메이션을 연결시켜준다.
1)클래스 수준에서 Storyboard 변수 선언
     private Storyboard myStoryboard;

2)Storyboard를 초기화, 만든 애니메이션을 자식으로 추가
myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

   3)SettargetName으로 목표 타겟 설정, Storyboard에 애니메이션을 적용할 위치 지정
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

  4)SetTargetProperty로 원하는 애니메이션 속성 지정, 다음은 Rectangle의 Opacity속성 
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));



4. Storyboard와 트리거 연결 - storyboard를 적용하고 시작하는 가장 쉬운 방법
1) 사각형의 Loaded이벤트를 등록
myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

   2) 이벤트 처리기를 선언
private void myRectangleLoaded(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin(this);
}



실행하면 점차적으로 사라지는 애니메이션을 확인 할 수 있다.