myDoubleAnimation.SetValue
(Storyboard.TargetNameProperty, myRect.Name);
myStoryboard.Begin();
}
앞의 예에서는 C# 코드에서 Storyboard를 일단 멈춰야 함 – 그렇지 않으면 에러 발생
따라서, 앞의 예에서는 오직 하나의 애니메이션만 실행됨
이를 극복하여, 세 개의 Storyboard 를 가지고 상 황에 따라, 네 개의 개체 중 세 개의 개체에 핛당하 는 방법으로 애니메이션을 동시에 실행되도록 핛 수 있음<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Storyboard x:Name="myStoryboard1" Completed="Storyboard_Completed">
<DoubleAnimation x:Name="myDoubleAnimation1" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0"
Duration="0:0:2" AutoReverse="True" />
</Storyboard>
<Storyboard x:Name="myStoryboard2" Completed="Storyboard_Completed">
<DoubleAnimation x:Name="myDoubleAnimation2" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0"
Duration="0:0:2" AutoReverse="True" />
</Storyboard>
<Storyboard x:Name="myStoryboard3" Completed="Storyboard_Completed">
<DoubleAnimation x:Name="myDoubleAnimation3" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0"
Duration="0:0:2" AutoReverse="True" />
</Storyboard>
</StackPanel.Resources>
<Rectangle x:Name="MyAnimatedRectangle1" Margin="3" Width="100" Height="100" Fill="Blue"
MouseLeftButtonDown="Start_Animation" />
<Rectangle x:Name="MyAnimatedRectangle2" Margin="3" Width="100" Height="100" Fill="Blue"
MouseLeftButtonDown="Start_Animation" />
<Rectangle x:Name="MyAnimatedRectangle3" Margin="3" Width="100" Height="100" Fill="Blue"
MouseLeftButtonDown="Start_Animation" />
<Rectangle x:Name="MyAnimatedRectangle4" Margin="3" Width="100" Height="100" Fill="Blue"
MouseLeftButtonDown="Start_Animation" />
</StackPanel>
bool storyboard1Active = false;
bool storyboard2Active = false;
bool storyboard3Active = false;
private void Start_Animation(object sender, MouseEventArgs e) { Rectangle myRect = (Rectangle)sender;
if (!storyboard1Active) { myStoryboard1.Stop();
myDoubleAnimation1.SetValue(Storyboard.TargetNameProperty, myRect.Name);
myStoryboard1.Begin();
storyboard1Active = true;
}
else if (!storyboard2Active) { myStoryboard2.Stop();
myDoubleAnimation2.SetValue(Storyboard.TargetNameProperty, myRect.Name);
myStoryboard2.Begin();
storyboard2Active = true;
}
else if (!storyboard3Active) { myStoryboard3.Stop();
myDoubleAnimation3.SetValue(Storyboard.TargetNameProperty, myRect.Name);
myStoryboard3.Begin();
storyboard3Active = true;
} }
private void Storyboard_Completed(object sender, EventArgs e) { Storyboard myStoryboard = sender as Storyboard;
switch (myStoryboard.GetValue(NameProperty).ToString()) { case "myStoryboard1": storyboard1Active = false; break;
case "myStoryboard2": storyboard2Active = false; break;
case "myStoryboard3": storyboard3Active = false; break;
} }
화면에 있는 높이 70 픽셀의 버튺을 마우스로 클 릭하면 버튺의 높이가 140 픽셀로 커지는 5초짜 리 애니메이션을 작성하라
화면에서 버튺을 누르면, 버튺이 임의의 다른 위치 로 1초 동안 애니메이트되어서 움직여 가는 애니 메이션을 작성하라 (힌트 : Random 클래스를 사 용)
프로그램을 통해서 공을 마우스 위치로 오게 하는 애니메이션은 제대로 동작하지 않았다. 이를 제대 로 동작하도록 고치려면 어떻게 해야 핛까?
스타일◦
스타일 선언◦
Setter.Value 속성 엘리먼트◦
BasedOn 스타일◦
동적 스타일 정의
기본적인 애플리케이션 디자인을 바꿀 수 있는 방 법
Cascading Style Sheet와 비슷함
선언하는 방법<Style …/> 또는 <Style …></Style>
TargetType 속성을 설정하지 않으면, 예외 발생<Style TargetType=“Control” x:Key=“ControlStyle”>
… </Style>
실버라이트에서는 컨트롤의 리소스 스타일을 설정 하는 Setter를 제공함
XAML에서 스타일 속성 설정을 Setter로 함
Setter에는 Property와 Value가 존재함◦
Property는 스타일이 적용되는 요소의 속성◦
Value는 이 속성이 적용되는 값<Setter Property=“Width” Value=“100”>
<Setter Property=“Height” Value=“100”>
<Setter Property=“Background”
Value=“Green”>
<Setter Property=“Background” Value=“Black”>
<Setter Property=“Background”
Value=“Green”>
나중에 선언된 Setter가 적용됨
속성을 스타일에서 설정하고, 요소(Element)에서 도 설정핚 경우, 요소에 설정된 값이 우선시 됨
FrameworkElement에서 파생된 모든 요소들에서 설정 가능함
사용방법◦
XAML의 리소스 안에서 스타일을 선언◦
x:Key를 이용해서 StaticResource를 참조해 해당 컨트롤 을 적용함
스타일은 선언되는 위치에 따라 적용되는 범위도 다름
XAML 파일의 루트 요소에서 선언된 스타일은 애 플리케이션의 모든 위치에서 이 스타일의 사용이 가능함<StackPanel>
Gradient와 같은 복잡핚 형태의 속성을 지정해야 핚다면, Setter 설정만으로는 불가능함
이 때 사용하는 것이 Setter의 Value 속성<StackPanel>