Moriah(Binseop Ko)'s Blog

WPF: Working with Opacity Animation Programmatically (without xaml)

using System.Windows.Media.Animation;

using System.Windows.Controls;

using System.Windows.Media;

...

private DoubleAnimation daOpacity;

private Storyboard sbOpacity;

private Image imgSample;

public void opacityAnimation()

{

        // loading image

        BitmapImage myBitmapImage = new BitmapImage();

        myBitmapImage.BeginInit();

        myBitmapImage.UriSource = (new Uri(@"C:\temp\myImg.jpg"));

        myBitmapImage.EndInit();

        imgSample = new Image();

        imgSample.Source = myBitmapImage;

        this.Children.Add(imgBack);

        // end of loading image

        // make a new namescope

        NameScope.SetNameScope(this, new NameScope());

        // register Image's name

        RegisterName("_sampleImage", imgSample);

        // make a new DoubleAnimation Object which will change opacity

        daOpacity = new DoubleAnimation();

        // set target

        Storyboard.SetTargetName(daOpacity, "_sampleImage");

        Storyboard.SetTargetProperty(daOpacity, new PropertyPath(Control.OpacityProperty));

        sbOpacity = new Storyboard();

        sbOpacity.Children.Add(daOpacity);

        // now, we are ready to animate opacity

        // set DoubleAnimation properties

        daOpacity.From = 1;

        daOpacity.To = 0;

        daOpacity.Duration = new Duration(TimeSpan.FromMilliseconds(500));

        // begin animation

        sbOpacity.Begin(this);

}

This is the way to control opacity of dyanmically-generated object through DoubleAnimation in your code (not XAML Tag)
Actually, There is a lot of articles about WPF animation, but
I couldn't find about animating opacity progrmmactically.

I tried many ways to find out solution, and made a lot of wastes,..
And finally I happened to make this solution today.

So I want to share my code so that you can save your time.


The most important thing is, register your control to namespace
so that StoryBoard can find the control without any "Name" tag of Xaml.
(Because you don't want to use Xaml)
Like this:  RegisterName("_sampleImage", imgSample);


코드상에서 Dynamic 하게 생성한 개체에 대해, Programmatic한 방법으로 Opacity를 애니메이션 하는 코드입니다.
영어도 지지리 못하는 주제에 굳이 재수없게 제목을 영어로 단 이유는,
(게다가 말도 안되는 영어 설명까지 취한 상태에서 붙인 이유는 -_-;;)

제가 며칠을 구글, MSDN, 네이버를 뒤졌는데, 한글은 물론 영어로 된 비슷한 문서 하나 찾을 수 없었기 때문에, 삽질들 하지 마시라는 의미에서 영어로 걸었습니다.
설명은 한글이더라도, 제목이 영어면 필요하신분들이 찾아서들 오지 않을까 해서요.
사실 국내엔 WPF 하시는 분이 크게 없는 것 같고..

설명은 대부분 주석에 되어 있습니다만,
가장 중요한 부분만 말하자면, control을 namespace에 등록하는 것입니다
(translate, rotate, scale 등에서 transformation object를 등록하는 것과 다르다는 점이 가장 큰 차이입니다)
이렇게요:  RegisterName("_sampleImage", imgSample);
이렇게 해 두면, XAML의 Name 태그 없이, 코드 상에서 만든 개체에 대해서 컨트롤이 가능합니다.



코드는 제한없이 사용하셔도 되고, 트랙백도 환영합니다.
하지만 고대로 긁어다가 자기 것인양 하시면 화낼겁니다.

별 것 아닌 거지만 고민 좀 했거든요.

나에게 있어, 작년이 Flex의 해 였다고 하면
(Flex 프로젝트를 여섯 개 쯤 했군요.)

올해의 시작은 WPF(Windows Presentation Foundation) 이었다.
사실은, Flex로 진행하던 프로젝트를 프로토 타입을 완성 해 보니,
성능면에서 문제점이 좀 컸던 지라,
기획자의 요청에 의해 본 제품은 WPF로 진행하게 되었다,

WPF로 바꾼 것은 참 잘 한 일이었다.
C#은 여전히 낮설지만, 처음 하는 것은 아니라서 어느정도 코드 생산성도
나와 주었고, (Flex 한달 했던 분량 정도의 분량을 10일 정도에 쳤으니까)

무엇보다, 성능면에서 놀랍게 좋았다.

기존에는 한 화면에 Object이 50개가 넘어가면 Transition이 좀 버벅였는데,
지금은 300개 정도로 테스트 하고 있는데 큰 무리가 없다.

뭐- 이것을 위해서 바꾼 거니까.

그러다가 오늘 기획이 나왔는데..
기존에 수백개가 돌던 Object 에서, 이제 한 번에 하나씩만 나오는 것으로 바뀌었다.
이제와서, 말이다.

물론 기획자도 바뀌었고, 프로토타입과 실 개발엔 차이가 있을 것이므로
기획자를 탓할 문제는 결코 아니지만,

"내가 왜 이짓을 했지?" 라는 생각은, 여전히 버릴수가 없다.
(새로운 걸 배우는 건 참 즐거울 수 있는 일이지만,
WPF는 정말이지 MSDN이랑 Charles Petzold아저씨 블로그 말고는
참고할 만한 유익한 리소스가 아~~무것도 없었으므로,
익히는게 좀 힘들었다.)


하지만, WPF를 접해 본 것은 나에게 큰 도움이 되었고,
Flex에서 절대 불가능했을 3D 라던가, 좀 더 Programmatic(?)한 코드들로 인한
생산성 향상, 깔끔해진 코드, Eclipse에 비할 바 없이 강력한 디버깅 능력,
- 그리고 가장 중요한 - 강력한 MSDN이라는 지원병력 들로 인해
WPF로 갈아탄 것은 매우 좋은 선택이었던 것 같다.

이 프로젝트의 경우 플랫폼이 중요하지 않은거니까, 배포 문제도 없고.

아무튼, Vista가 보급이 좀 되어서 배포 문제만 좀 없어지면,
WPF, WPF/E(Silverlight)는 좀 클 것 같다는게 내 생각이다.
(솔직히 WPF.. 까진 크게 자신은 없고, WPF/E는 확실히 클 것 같다)
Adobe는 그냥 GG 치셔야 할 것 같다는 느낌?
뭐.. Flash에 익숙한 디자이너들은 Flex를 좀 더 반길 지 모르겠지만 말이다.