본문 바로가기

Silverlight

StoryBoard 에서 동적으로 TargetName 변경

오늘의표 : 스토리 보드를 하나 만들고 우려먹자!

오늘은 스토리 보드를 하나 만들어 놓고 이 스토리 보드를 가지고 이놈저놈 에게 적용 하는 방법에 대해서 배워 보겠습니다. 우선 이번에도 실행 결과를 보고 고고씽 하겠습니다.

결과

이번에는 ZoomIn 이라는 스토리 보드를 하나 만들었는데요 이 스토리 보드는 이미지의 스케일을 1.1배 해주는 스토리 보드인데 처음 스토리 보드를 만들때는 왼쪽의 image1(이효리사진)을 가지고 만들었습니다. 스토리 보드는 마우스 오버시에 발생하게 되여있습니다. 양쪽 이미지에다가 ZoomIn.Begin()을 주면 이효리 사진이나 안소희 사진이나 왼쪽(image1) 의 사진만 커지게 되여 있습니다. 이걸 StoryBoard에 있는 TargetName을 바꾸어서 각자 사진에 MouseOver 시에 TargetName을 바꿔서 자신의 사진이 커지는걸 해보도록 하겠습니다.

소스분석

이번에는 소스가 별로 안 길어서 분석을 해볼까요? ㅋ_ㅋ

      void image2_MouseEnter(object sender, MouseEventArgs e)
      {
          ZoomIn.Stop();
          foreach (DoubleAnimationUsingKeyFrames frame in ZoomIn.Children)
          {
              frame.SetValue(Storyboard.TargetNameProperty, (sender as Image).Name);
          }

          ZoomIn.Begin();
      }

요건 이미지 오른쪽 에 마우스 오버 했을때의 동작인데요 우선 같은 스토리 보드를 사용 하기 때문에 전에 돌아가고 있던 스토리 보드를 멈춰주고요 그리고 이제 우리가 바꿔야 할 부분인데요 사실 우리가 바꿔야 할 TargetName은 Storboard에 있는게 아니라 그 안에 있는

<Storyboard x:Name="ZoomIn">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1.1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1.1"/>
            </DoubleAnimationUsingKeyFrames>
</Storyboard>

저 노란놈들이죵 그래서 foreach문을 돌면서 ZoomIn의 애들을 돌면서 저놈들을 부르고 그놈들의 TargeName 부분을 바꿔 주면 됩니당.

TIP 

<Storyboard x:Name="ZoomIn">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" x:Name="frame1" Storyboard.TargetName="image1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1.1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" x:Name="frame2" Storyboard.TargetName="image1"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1.1"/>
            </DoubleAnimationUsingKeyFrames>
</Storyboard>

위에 노란부분처럼 이름을 주면 각각의 이름 에다가 SetValue를 바로 해줄수가 있습니다. 몇개 되지 않을때는 이렇게 하는것도 좋겠죵? ㅋ

 

소스