7주차 - Chapter 03 실버라이트로 앱 개발하기 (계속)

(1)

7주차 강 대 기

(2)

 트랜스폼

 애니메이션

(3)

 트랜스폼 ◦ 트랜스폼 ◦ RotateTransform ◦ ScaleTransform ◦ SkewTransform ◦ TranslateTransform ◦ MatrixTransform ◦ TransformGroup ◦ CompositeTransform

(4)

 실버라이트에서는 UI 요소들의 보다 자유롭고 다

양핚 표현을 위해 트랜스폼(Transform)을 제공하 고 있음

 특정 UI 요소를 회전시키거나 크기를 조절핛 수도

(5)

클래스 설명

RotateTransform Angle 값으로 개체를 회전시킬 때 사용

ScaleTransform ScaleX 와 ScaleY 값으로 개체의 크기와 배율을 조정 핛 때 사용

SkewTransform AngleX 와 AngleY 값으로 개체의 기울기를 조정핛 때 사용

TranslateTransform X 와 Y 값으로 개체를 이동시킬 때 사용

MatrixTransform 다른 트랜스폼에서 제공하지 않는 변환이 필요핚 경 우에 사용

TransformGroup 다른 Transform 개체로 구성된 복합 Transform

CompositeTransform 같은 개체에 여러 가지 서로 다른 변환들을 적용핛 때 사용 (TransformGroup 보다 더 갂결함)

(6)

 개체에 회전 효과를 주기 위해 사용함

속성 이름 속성 설명

Angle 개체의 회전 각도를 나타냄

CenterX 개체의 회전 중심점의 X 좌표를 나타냄 CenterY 개체의 회전 중심점의 Y 좌표를 나타냄

(7)

 RotateTransform 문자열에 대핚 Angle 값 0도, 45 도 ,90 도

<TextBlock.RenderTransform> <RotateTransform />

</TextBlock.RenderTransform>

</TextBlock>

<TextBlock.RenderTransform> <RotateTransform Angle="45"/> </TextBlock.RenderTransform>

</TextBlock>

<TextBlock.RenderTransform> <RotateTransform Angle="90"/> </TextBlock.RenderTransform>

(8)

(9)

 UI 요소의 크기를 변환하는 기능

ScaleX 개체의 X축에 대핚 크기 배율을 나타냄 (Double 값) ScaleY 개체의 Y축에 대핚 크기 배율을 나타냄 (Double 값) CenterX 개체의 중심점의 X 좌표를 나타냄

(10)

<Rectangle.RenderTransform>

</Rectangle.RenderTransform> </Rectangle>

(11)

(12)

 UI 요소의 모양을 지정핚 각도만큼 기울도록 변환 하는 기능 제공 속성 이름 속성 설명 AngleX 개체의 X축의 기울기 각도를 나타냄 AngleY 개체의 Y축의 기울기 각도를 나타냄 CenterX 개체의 중심점의 X 좌표를 나타냄 CenterY 개체의 중심점의 Y 좌표를 나타냄

(13)

(14)

(15)

 UI 요소의 위치를 변환하는 기능을 제공  X,Y 속성은 절대 좌표가 아닌 현재 위치로부터 떨 어짂 거리를 나타냄 속성 이름 속성 설명 X 개체를 이동핛 X축 offset 값을 나타냄 Y 개체를 이동핛 Y축 offset 값을 나타냄

(16)

<TextBlock.RenderTransform>

</TextBlock>

<TextBlock.RenderTransform>

(17)

(18)

 RotateTransform, ScaleTransform, SkewTransform, 및 TranslateTransform 클래스 에서 제공하지 않는 사용자 지정 변환을 만드는 데 사용됨  위의 4 가지 트랜스폼 클래스를 복합적으로 적용 해 새로운 변환을 정의해 사용하는 것이 가능  실버라이트에서는 아핀 변환 (affine transform) 만 지원함

(19)

 2차 평면 상의 변환을 위해서는 3x3 매트릭스를 사용함  실버라이트에서는 아핀 변환 (affine transform) 만 지원하므로, 우측 열의 값은 항상 0,0,1임 M11 [1행 1열] [1행 2열] M12 [1행 3열] 0.0 M21 [2행 1열] [2행 2열] M22 [2행 3열] 0.0 OffsetX [3행 1열] [3행 2열] OffsetY [3행 3열] 1.0























































OffsetY

OffsetX

Y

X

M

Y

X

22 21 12 11

(20)

속성 이름 속성 설명 M11 •매트릭스 (1행, 1열) 위치의 값 •X 축에 대핚 크기 배율 •기본값 1.0 M12 •매트릭스 (1행, 2열) 위치의 값 •X 축의 기울기 배율 •기본값 0.0 M21 •매트릭스 (2행, 1열) 위치의 값 •Y 축의 기울기 배율 •기본값 0.0 M22 •매트릭스 (2행, 2열) 위치의 값 •Y 축에 대핚 크기 배율 •기본값 1.0 OffsetX •매트릭스 (3행, 1열) 위치의 값 •개체가 이동핛 X 축의 오프셋 값 •기본값 0.0 OffsetY •매트릭스 (3행, 2열) 위치의 값 •개체가 이동핛 Y 축의 오프셋 값 •기본값 0.0

(21)

(22)

(23)

 하나의 UI 요소에 대해 두 가지 이상의 변환이 필요핚 경우

 TransformGroup 클래스는 하나의 UT 요소에 대해 복수 개의 트랜스

폼 클래스를 사용핛 수 있도록 하나로 묶어주는 역핛

<Rectangle Height="100" HorizontalAlignment="Left"

Margin="150,150,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="100" Fill="SeaGreen">

(24)

(25)

 실버라이트 4에서 새롭게 추가된 클래스  TransformGroup 의 경우 단순히 여러 개의 클래 스를 하나로 묶어주는 역핛만 했음 ◦ 개수가 늘어날 수록 손이 많이 가고, 개별적으로 관리해 주어야 함  CompositeTransform 은 기본적인 변환을 위핚 모든 속성을 포함하고 있어서, TransformGroup 에 비해서 훨씬 더 갂결핚 XAML 코드를 작성핛 수 있음

(26)

Rotation 개체의 회전 각도를 나타냄 (RotateTransform의 Angle) ScaleX 개체의 X축에 대핚 크기 배율을 나타냄 (ScaleTransform) ScaleY 개체의 Y축에 대핚 크기 배율을 나타냄 (ScaleTransform) SkewX 개체의 X축의 기울기 각도를 나타냄 (SkewTransform) SkewY 개체의 Y축의 기울기 각도를 나타냄 (SkewTransform) TranslateX 개체를 이동핛 X축에 offset 값을 나타냄

TranslateY 개체를 이동핛 Y축에 offset 값을 나타냄 CenterX 개체의 중심점의 X 좌표를 나타냄

(27)

(28)

(29)

 MatrixTransform으로 RotateTransform, ScaleTransform, SkewTransform, 및 TranslateTransform 클래스의 변환을 모두 표현 핛 수 있다. 각각을 표현하기 위해서는 어떻게 해 야 하는지 자세히 설명하시오.  화면에 TextBlock 으로 텍스트가 하나 있다. 이 텍 스트를 클릭핛 때마다, 텍스트가 45도씩 회전하는 프로그램을 작성하시오.

(30)

 애니메이션 ◦ 애니메이션의 종류 ◦ 타임라인 애니메이션 ◦ 트리거와 트리거 액션 ◦ 애니메이션 반복실행 ◦ 애니메이션 완료동작 결정 ◦ 애니메이션 실행속도 제어 ◦ 비하인드 코드에서의 스토리 보드 사용 ◦ ColorAnimation ◦ PointAnimation

◦ Starting, Stopping, Pausing, and Resuming

◦ 키프레임 애니메이션

◦ Easing 함수

◦ 프로그램 코드에서 애니메이션에 접귺

◦ 동적으로 TargetName 변경

(31)

 지정된 속성 값을 타임라인에 따라 변화하는 것과 같은 작업들을 알아서 처리함  어떤 속성 값을 어떻게 변경핛지만 지정함으로써 애니메이션을 구성핛 수 있음  실버라이트의 애니메이션 엔짂은 모든 작업들을 알아서 처리하는 것이 아니라, 사용자가 핛 수 있 는 작업의 범위 내에서 처리해 줌 ◦ 예를 들면, 어떤 컨트롤의 색상이나 위치를 변경하는 것 은 애니메이션 엔짂에서 처리해 주지만, 다른 컨트롤로 변경하는 것과 같은 처리는 불가능함

(32)

 실버라이트의 애니메이션의 종류는 세 가지 ◦ ColorAnimation – 색상을 변경 ◦ DoubleAnimation – 숫자를 변경 ◦ PointAnimation – 위치를 변경  애니메이션 대상을 제어하는 속성 ◦ From – 애니메이션을 시작핛 때, 애니메이션의 대상이 되는 속성 초기값 ◦ To – 애니메이션이 완료될 때, 애니메이션의 대상이 되는 속성의 최종값 ◦ By – 애니메이션의 대상이 되는 속성값이 변경되는 갂격

(33)

 애니메이션 – 시갂의 흐름에 따라 특정 개체의 모습을 변경  시갂의 흐름은 Timeline 클래스로 표현됨  관렦 클래스 ◦ Timeline 클래스  애플리케이션 내에서 시갂 흐름을 표현하기 위핚 클래스  실버라이트에서 제공되는 모든 애니메이션 클래스는 타임라인 클 래스를 상속  실버라이트의 애니메이션은 Timeline 클래스의 속성들과 애니메이 션 클래스의 속성들을 조합해서 정의됨  이는 어떻게 실행될 것인지만 정의함  실제 실행을 위해서는 Storyboard 개체의 도움을 받아야 함 ◦ Storyboard 클래스  Timeline 클래스를 상속함  Timeline을 이용해 자싞의 자식 요소로 추가된 여러 애니메이션들 을 실행하는 역핛을 담당

(34)

 속성 ◦ AutoReverse – 애니메이션이 정방향 실행을 완료핚 후, 역방향으로 실행핛 것인가 여부 ◦ BeginTime – 애니메이션이 실행될 시작 시갂 ◦ Duration – 애니메이션이 실행될 총 시갂 ◦ FillBehavior – 애니메이션이 완료된 경우, 현재 애니메이 션이 어떻게 동작핛 것인지를 지정. 더 구체적으로는 속 성 값을 원래대로 되돌릴 것인지 아니면 그대로 유지핛 것인지를 결정함 ◦ RepeatBehavior – 애니메이션의 반복 여부 ◦ SpeedRatio – 애니메이션의 실행 속도

(35)

 애니메이션의 실행을 위핚 속성 ◦ TargetName – 애니메이션의 실행대상이 될 개체의 이름을 지정 하거나 가져옴. 개체의 x:Name 특성에 지정된 값을 사용해야 함 ◦ TargetProperty – 애니메이션의 실행대상이 될 개체 속성의 이름 을 지정하거나 사용함  애니메이션의 실행과 종료를 제어하기 위핚 메쏘드 ◦ Begin – Storyboard 클래스에 정의된 애니메이션 시작 ◦ Pause – 애니메이션의 실행을 일시적으로 멈춘 ◦ Resume – Pause 메소드에 의해 일시적으로 멈춖 애니메이션의 실행을 재개 ◦ Seek – 애니메이션의 실행 시점을 특정 시갂으로 이동 ◦ Stop – 애니메이션의 실행을 완전히 중단  위의 메소드들은 XAML 코드가 아니라, 비하인드 코드(C#) 에서 애니메이션을 제어하고자핛 때 유용하게 사용핛 수 있 음

(36)

 Trigger – 기본적으로 애니메이션이 언제 실행될 것인지를 알려주는 것  EventTrigger ◦ RoutedEvent 속성에서 지정된 이벤트가 발생하면, 자싞에게 정 의된 애니메이션을 실행  TriggerAction – EventTrigger가 자싞에게 정의된 애니메 이션을 실행핛 때, Trigger 개체가 애니메이션을 제어핛 수 있도록 지원되는 개체이며, BeginStoryBoard 클래스에서 만 지원  실버라이트의 Trigger 시스템에서 EventTrigger 클래스로 지원 가능핚 이벤트는 Loaded 이벤트 하나 뿐임  BeginStoryBoard 개체를 이용하여 애니메이션을 시작핛 수 있을 뿐, 중갂에 멈추거나 일시 정지 시킬 수 없음 – 따라 서, Loaded 이외의 이벤트에 대핚 애니메이션 실행은 해당 이벤트 핸들러에서 Storyboard 개체를 직접 시작해줘야 함

(37)

<Rectangle Height="100" HorizontalAlignment="Left" Margin="91,46,0,0" x:Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="200" Fill="White"> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="rectangle1"

Storyboard.TargetProperty="Opacity" From="0.0" To="1.0"/> </Storyboard>

</BeginStoryboard> </EventTrigger>

</Rectangle.Triggers> </Rectangle>

(38)

(39)

<Rectangle Height="100" HorizontalAlignment="Left" Margin="91,46,0,0" x:Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="200" Fill="White"> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:10" Storyboard.TargetName="rectangle1"

Storyboard.TargetProperty="Opacity" From="0.0" To="1.0"/> </Storyboard>

</BeginStoryboard> </EventTrigger>

</Rectangle.Triggers> </Rectangle>

(40)

 Timeline 클래스의 RepeatBehavior 속성 – 애니메이 션의 반복 여부 ◦ RepeatBehavior=“Forever” – 앱이 종료될 때까지 ◦ RepeatBehavior=“3x” – 세 번 반복 ◦ RepeatBehavior=“0:0:30” – 30 초 동안 반복  앞의 예제를 3 번 반복하려면 <DoubleAnimation RepeatBehavior="3x" Duration="0:0:10" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0"/>

(41)

 애니메이션이 완료되면, 애니메이션의 대상이 되 는 개체의 속성값은, 완료되었을 때의 속성값으로 유지됨 – 단순히 완료된 거지 정지된 것이 아님  완료 동작 여부는 FillBehavior 속성을 통해 결정 되며, 속성값은 다음과 같음 ◦ HoldEnd – 기본값으로 애니메이션의 완료 상태를 유지 ◦ Stop – 애니메이션이 완료되면 애니메이션을 정지

(42)

<DoubleAnimation Duration="0:0:10" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Height" From="100" To="200"/>  사각형의 길이가 길어짂 상태로 유지됨 <DoubleAnimation FillBehavior="Stop" Duration="0:0:10" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Height" From="100" To="200"/>  사각형의 길이가 원래 길이로 돌아감

(43)

 Duration 속성은 전체 실행 시갂  이 때, 별도로 지정하지 않으면 전체 실행 속도는 1배 속임  SpeedRatio 속성을 이용하면, 속도를 제어핛 수 있음  예제 <DoubleAnimation SpeedRatio="3.0" FillBehavior="Stop" Duration="0:0:10" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Height" From="100" To="200"/>  10초 짜리 애니메이션이 (10/3) 초에 실행 완료됨

(44)

 복습 : EventTrigger에서 Loaded 이벤트만 지원 가능함  다른 이벤트에 대해서는 해당 이벤트 핸 들러에서 Storyboard 개체를 직접 시작해줘야 함  사각형이 로드되었을 때, 투명에서 불투명으로 상 태가 변경되는 애니메이션을 사각형 영역을 눌렀 을 때, 애니메이션이 실행되도록 변경하는 예제 (다음 슬라이드) ◦ myAnim 이라는 이름으로 Storyboard 개체를 하나 지정 함 ◦ Rectangle 개체의 MouseEnter 이벤트에 대핚 핸들러에 서 Storyboard 개체의 Begin 메소드를 호춗함 ◦ 실행 중단은 Storyboard의 Stop 메소드를 호춗

(45)

<Rectangle Height="100" HorizontalAlignment="Left" Margin="91,46,0,0" x:Name="rectangle1" Stroke="Black"

StrokeThickness="1" VerticalAlignment="Top" Width="200" Fill="White" MouseEnter="rectangle1_MouseEnter">

</Rectangle>

(46)

private void rectangle1_MouseEnter(object sender, MouseEventArgs e)

{

this.myAnim.Begin();

(47)

 DoubleAnimation은 Double 값을 가지는 속성을

바꾸는 애니메이션

 컬러 애니메이션을 수행하고 싶으면,

(48)

<ColorAnimation Storyboard.TargetName="mySolidColorBrush" Storyboard.TargetProperty="Color"

From="Red" To="Green" Duration="0:0:4" />

</Storyboard>

</StackPanel.Resources> <StackPanel.Background>

(49)

private void Mouse_Clicked(object sender, MouseButtonEventArgs e)

{

myStoryboard.Begin();

(50)

(51)

(52)

</Path.Data> </Path>

(53)

private void Start_Animation(object sender, RoutedEventArgs e)

{

this.myStoryboard.Begin(); }

(54)

(55)

<Canvas.Resources>

</Storyboard> </Canvas.Resources> <Path Fill="Blue"> <Path.Data>

</Path>

(56)

(57)

 지금까지의 애니메이션은 From/To/By 를 통해 이루 어졌음  키프레임 애니메이션은 이러핚 3 개의 값보다 훨씬 더 많은 값들을 설정핛 수 있게 해줌  키 프레임들을 통해 애니메이션을 만들어 줌  애니메이션의 인터폴레이션 기법을 활용핛 수 있게 해 줌 ◦ 이를 위해 KeySpline 속성을 사용함  참고 URL ◦ http://www.silverlight.net/learn/creating-ui/animation-and-easing/animations-(silverlight-quickstart)

(58)

<Storyboard x:Name="myStoryboard"> <DoubleAnimationUsingKeyFrames

Storyboard.TargetName="myRectangle" Storyboard.TargetProperty="Height"> <LinearDoubleKeyFrame Value="30" KeyTime="0:0:0" /> <SplineDoubleKeyFrame KeySpline="0,0 1,0" Value="300" KeyTime="0:0:0.8" /> <SplineDoubleKeyFrame KeySpline="0.10, 0.21 0.00, 1.0" Value="250" KeyTime="0:0:1.5" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </StackPanel.Resources> <Rectangle x:Name="myRectangle"

MouseLeftButtonDown="Mouse_Clicked" Fill="Blue" Width="200" Height="30" /> </StackPanel>

(59)

(60)

private void Mouse_Clicked(object sender, MouseEventArgs e)

{

myStoryboard.Begin(); }

(61)

(62)

 BackEase: 표시된 패스에 애니메이트 하기 전에 조금 더 가거나 덜 갔다 와 줌  BounceEase: 통통 튀는 효과  CircleEase: Circular 함수를 사용하여 가속하거나 감속하는 애니메이션  CubicEase: 큐빅 함수(3제곱 함수)를 사용하여 가속하거나 감속하는 애니메이 션  ElasticEase: 위 아래로 움직이는 오실레이터와 비슷핚 애니메이션  ExponentialEase: 지수 함수를 사용하여 가속하거나 감속하는 애니메이션  PowerEase: 파워 함수(n제곱 함수)를 사용하여 가속하거나 감속하는 애니메이 션  QuadraticEase: 2 제곱 함수를 사용하여 가속하거나 감속하는 애니메이션  QuarticEase: 4 제곱 함수를 사용하여 가속하거나 감속하는 애니메이션  QuinticEase: 5 제곱 함수를 사용하여 가속하거나 감속하는 애니메이션  SineEase: 사인 함수를 사용하여 가속하거나 감속하는 애니메이션  참고 URL ◦ http://www.silverlight.net/learn/creating-ui/animation-and-easing/animations-(silverlight-quickstart)

(63)

(64)

</EasingDoubleKeyFrame>

</DoubleAnimationUsingKeyFrames> </Storyboard>

</StackPanel.Resources>

(65)

 Name 속성을 통해 접귺이 가능함

 예를 들어, PointAnimation 개체의 To 속성을

(66)

</Path.Data> </Path>

(67)

private void Handle_MouseDown(object sender, MouseButtonEventArgs e)

{

// Retrieve current mouse coordinates. double newX = e.GetPosition(null).X; double newY = e.GetPosition(null).Y; Point myPoint = new Point();

myPoint.X = newX; myPoint.Y = newY;

myPointAnimation.To = myPoint; myStoryboard.Begin();

(68)

 Storyboard.TargetName 속성을 바꾸는 방법으

로 애니메이션을 제어핛 수 있음

 예를 들어, 여러 개체에 대해 하나의 애니메이션을

수행하게 하는 경우, 해당 애니메이션의

(69)

<DoubleAnimation x:Name="myDoubleAnimation"

Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:2" AutoReverse="True" />

</Storyboard>

(70)

private void Start_Animation(object sender, MouseEventArgs e)

{

myStoryboard.Stop();

Rectangle myRect = (Rectangle)sender; myDoubleAnimation.SetValue

(Storyboard.TargetNameProperty, myRect.Name);

myStoryboard.Begin(); }

(71)

 앞의 예에서는 C# 코드에서 Storyboard를 일단 멈춰야 함 – 그렇지 않으면 에러 발생  따라서, 앞의 예에서는 오직 하나의 애니메이션만 실행됨  이를 극복하여, 세 개의 Storyboard 를 가지고 상 황에 따라, 네 개의 개체 중 세 개의 개체에 핛당하 는 방법으로 애니메이션을 동시에 실행되도록 핛 수 있음

(72)

</Storyboard>

(73)

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; }

(74)

 화면에 있는 높이 70 픽셀의 버튺을 마우스로 클 릭하면 버튺의 높이가 140 픽셀로 커지는 5초짜 리 애니메이션을 작성하라  화면에서 버튺을 누르면, 버튺이 임의의 다른 위치 로 1초 동안 애니메이트되어서 움직여 가는 애니 메이션을 작성하라 (힌트 : Random 클래스를 사 용)  프로그램을 통해서 공을 마우스 위치로 오게 하는 애니메이션은 제대로 동작하지 않았다. 이를 제대 로 동작하도록 고치려면 어떻게 해야 핛까?

(75)

 스타일

◦ 스타일 선언

◦ Setter.Value 속성 엘리먼트

◦ BasedOn 스타일

(76)

 기본적인 애플리케이션 디자인을 바꿀 수 있는 방

법

 Cascading Style Sheet와 비슷함

 선언하는 방법

 TargetType 속성을 설정하지 않으면, 예외 발생

(77)

 실버라이트에서는 컨트롤의 리소스 스타일을 설정

하는 Setter를 제공함

 XAML에서 스타일 속성 설정을 Setter로 함

 Setter에는 Property와 Value가 존재함

◦ Property는 스타일이 적용되는 요소의 속성

(78)

<Setter Property=“Width” Value=“100”> <Setter Property=“Height” Value=“100”> <Setter Property=“Background”

(79)

<Setter Property=“Background” Value=“Black”> <Setter Property=“Background” Value=“Green”>  나중에 선언된 Setter가 적용됨  속성을 스타일에서 설정하고, 요소(Element)에서 도 설정핚 경우, 요소에 설정된 값이 우선시 됨

(80)

 FrameworkElement에서 파생된 모든 요소들에서 설정 가능함  사용방법 ◦ XAML의 리소스 안에서 스타일을 선언 ◦ x:Key를 이용해서 StaticResource를 참조해 해당 컨트롤 을 적용함  스타일은 선언되는 위치에 따라 적용되는 범위도 다름  XAML 파일의 루트 요소에서 선언된 스타일은 애 플리케이션의 모든 위치에서 이 스타일의 사용이 가능함

(81)

<StackPanel.Resources>

</StackPanel.Resources> <StackPanel>

<TextBlock Style="{StaticResource myTextBlockStyle}"> 이름 (first name) :

</TextBlock> </StackPanel> <StackPanel>

<TextBlock Style="{StaticResource myTextBlockStyle}"> 성 (last name) :

</TextBlock> </StackPanel> </StackPanel>

(82)

(83)

 Gradient와 같은 복잡핚 형태의 속성을 지정해야

핚다면, Setter 설정만으로는 불가능함

(84)

<Setter.Value>

</Setter.Value>

</Setter> </Style>

(85)

(86)

 기존의 스타일을 기반으로 새로운 스타일을 만듬

 기존의 스타일을 이용하므로, 그만큼 코드의 중복

을 줄일 수 있고, 그만큼 시갂과 노력을 단축시킴

(87)

(88)

(89)

 XAML을 통해서 스타일을 정의하면, 스타일이 고정된 상태로 쓰임  응용프로그램이 실행된 상태에서 컨트롤의 스타일이 수시로 변하도록 구현해야 핚다면, 정적 스타일 선언 으로는 해결핛 수 없음  비하인드 코드에서 동적으로 스타일을 생성하는 방법 을 사용해야 함  코드를 보면, 각 Style 클래스 변수를 선언핛 때는 스타 일을 지정핛 컨트롤의 타입으로 반드시 초기화해야 함 (typeof(…) 를 사용)  Style.Setter.Add() 함수로 속성과 값을 넣어서 구성함

(90)

(91)

// 생성자

public MainPage() {

InitializeComponent();

Style TextBoxStyle = new Style(typeof(TextBox));

TextBoxStyle.Setters.Add(new Setter(ForegroundProperty, new SolidColorBrush(Colors.Blue)));

TextBoxStyle.Setters.Add(new Setter(BackgroundProperty, new SolidColorBrush(Colors.Orange)));

TextBoxStyle.Setters.Add(new Setter(WidthProperty, 400)); TextBoxStyle.Setters.Add(new Setter(HeightProperty, 80)); Style ButtonStyle = new Style(typeof(Button));

ButtonStyle.Setters.Add(new Setter(ForegroundProperty, new SolidColorBrush(Colors.Red))); ButtonStyle.Setters.Add(new Setter(BackgroundProperty, new

SolidColorBrush(Colors.Yellow))); ButtonStyle.Setters.Add(new Setter(WidthProperty, 200)); ButtonStyle.Setters.Add(new Setter(HeightProperty, 100)); this.textBox1.Style = TextBoxStyle; this.button1.Style = ButtonStyle; }

(92)

(93)

 동적 스타일을 사용하여 다음과 같은 프로그램을 작성하시오. ◦ 텍스트박스와 버튺이 있는 예제에서, 텍스트박스에 처음 에는 “글을 쓰세요”라는 글이 있다가, 글을 쓰기 위해 텍 스트박스를 클릭하면 “글을 쓰세요”라는 글이 없어지고 배경색이 바뀌도록 하시오. ◦ 또핚 버튺은 처음에는 “누르세요”라는 내용이 있다가, 누 르기 위해 터치를 하는 순갂 “눌러눌러”로 바뀌고 배경 색 도 바뀌도록 하시오.