★변형 객체(Transform)
- 컨트롤을 원하는 형태로 변형을 시켜주는 객체
- 회전, 배율, 위치, 비틀기
★변형 적용 단계
웹이든 응용 프로그램이든 마진값을 조절할수 있다.
1. 변형 중심 축 결정(절대값, 상대값)
2. 회전, 배율, 위치, 비틀기를 할지를 정한뒤 코드를 작성한다.
★회전 변형 적용 :
RotateTransform
RenderTransformOrigin="0.5,0.5-중심축-상대값으로 적용됨 압정을 찍는방식이라
생각하며 0.0부터 1.1 까지있다.
회전객체 사용 선언<Button.RenderTransform>
<RotateTransform />
</Button.RenderTransform>
<RotateTransform Angle="45"
/> - 회전객체 각도 지정
* 콤파스와 같은형태
★배율(비율) 변형객체 : ScaleTransform
확대 축소 해주는 형태
<Button Content="버튼" Width="100" Height="100" Background="Fuchsia"
RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<ScaleTransform ScaleX="2" ScaleY="2"/>
</Button.RenderTransform>
</Button>
퍼센트 비율이다 현재는 x축 2배, y축 2배
- 1보다 작은 값을 주게 되면 정면에서 회전하게된다.
보이는 입장에선 압축되보이지만 실질적으론 회전한것이다.
★컨트롤의 위치 변경
1. Canvas의 자식으로 사용(Left, Top)
2. Margin값을 사용(정적-디자인)
3.
TranslateTransform 변형 객체 사용(**동적-애니)
★비틀기 변형
1. X축, Y축에 따라 변형된다.
<Button Content="C" Width="100" Height="100"
RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<SkewTransform AngleX="20" />
</Button.RenderTransform>
X축기준으로 20도 비튼다.
변형 객체를 동시에 2개 이상 적용
- 한객체안에서 여러개의 변형객체를 동시에 사용할수 없다.
- 2개이상 객체를 컨트롤 하고싶을땐
<TransformGroup>
<ScaleTransform ScaleX="2" ScaleY="2" />
<RotateTransform Angle="30" />
</TransformGroup>
이러한 형태로 기재한다.
★애니메이션(Animation)
- 컨트롤의 특정 상태값을 A~B로 서서히
변화를 주는 작업
1. 스토리보드(Storyboard)
2. 애니메이션(Timeline)
DoubleAnimation-실수형 값들에 대해서 적용하는것. 실수
변형
Duration 걸리는시간(시,분,초,밀리단위)
ColorAnimation-색상값에 대해서 애니메이션을 적용하는 속성
* 동시에 2개이상 애니메이션이 적용 될때
시간에 따라 효과가 매우 틀려진다.
