Tech/Silverlight2009. 10. 28. 01:25

Silverlight Pixel Shader 개발 팁

요즘 HLSL을 가지고 Pixel Shader를 만들고 있다. 따라서 여기서 얘기하는 경험은 HLSL로 된 *.fx 파일을 컴파일 할 때 적용되는 얘기이다. 셰이더 어셈블리 명령을 직접 써서 만드는 일은 전혀 해보지 않아서 얼마나 관련성이 있을지 모르겠다.
Silverlight 3와 WPF(.NET 3.5 SP1)에서는 Shader Model 2의 Pixel Shader(ps_2_0)를 지원한다.
Pixel Shader 2.0에서는 64개의 산술 instruction만을 사용할 수 있다. 문제는 64개를 넘어서 컴파일이 안 될 때만 인스트럭션 개수를 알려준다는 것. 기본적인 사용법만 배운 상태에서 한참 만들다가 "님, 인스트럭션 개수 초과했어염. 65개임."하는 에러 메시지를 받았을 때 어찌나 황당하던지.

인스트럭션 개수를 알 수 있는 방법을 찾아 헤매다가 발견한 것이 셰이더 어셈블리 파일을 만들어 내는 옵션이다. *.fx 파일을 fxc.exe로 컴파일할 때 /Fc 옵션을 사용하면 어셈블리 파일을 출력해준다. 여기에는 컴파일 결과물의 인스트럭션 개수가 표시되기 때문에 작업할 때 아주 유용하다. 만세! 인스트럭션 개수를 알 수 있는 다른 방법은 아직 찾지 못했다.
인스트럭션 개수를 알 수 있는 방법이 생기니 인스트럭션 개수 줄이는 삽질도 이제 좀 할 맛이 난다. 경험상 현재까지 작업중에 인스트럭션 줄이는데 제일 도움이 되는 것은 똑같은 산술 연산을 벡터 연산 하나로 합치는 거였다.
가령 이런 코드보다
float c1 = Const1 - color.r;
float c2 = Const2 - color.g;
float c3 = Const3 - color.b;
이런 코드의 인스트럭션 개수가 적었다.
float4 c4 = {Const1, Const2, Const3, 0.0f};
float4 c = c4 - color;

 

'Tech > Silverlight' 카테고리의 다른 글

Commands in Silverlight with SLExtensions - 2  (0) 2010.01.01
Commands in Silverlight with SLExtensions - 1  (0) 2009.12.26
[Element Binding]  (0) 2009.10.12
[Blend 3 Element Binding]  (0) 2009.10.12
Posted by wafe
Tech/Silverlight2009. 10. 12. 17:54

[Element Binding]


Blend 3에서 너무 쉽게 썼던 Element Binding~ 소스 코드 상에선 어떻게 쓰일까요?

이번엔 소스코드 상에서의 Element Binding을 짤막하고 간단하게 구현한 예를 들어보겠습니다.

일단 원하는 동작 내용은 ListBox에서 선택된 Item이 가지고 있는 이미지 정보에 따라 배경 이미지가 변하는 것입니다. Element Binding을 하기 위헤서 필요한 정보는 세 가지 입니다.

1. Element Binding할 FrameworkElement 개체
2. 그리고 그 개체에 관하여 Binding 할 속성 = Dependancy Property
3. Binding Mode

1
2
3
4
5

Binding bImg = new Binding("SelectedItem.Children[1].Source");
bImg.ElementName = "imgList";
bImg.Mode = BindingMode.TwoWay;
bColor.UpdateSourceTrigger = UpdateSourceTrigger.Explicit;
background.SetBinding(Image.SourceProperty, bImg);

우선 Binding 객체를 새 Binding할 속성의 주소를 주어 새로이 생성하고, ElementName에 imgList라는 이름의 ListBox의 이름을 부여함으로써 Binding할 개체라는 것을 알려줍니다.
Binding Mode는 TwoWay로 설정하고 UpdateTiming은 Expicit로 설정했습니다.
그 후에, SetBinding()를 이용하여 해당 객체의 속성과 연결 시켜줍니다. 원하는 것은 background 이미지의 sourcr속성과 연결시키는 것이기 때문에 Image.SourceProperty와 bImg를 바인딩 시켰습니다.

이걸로 뚝딱 Element Binding을 소스코드 상에서 구현하는 방법을 해치웠습니다!

' ㅅ')/ 참 쉽죠잉~.


'Tech > Silverlight' 카테고리의 다른 글

Commands in Silverlight with SLExtensions - 1  (0) 2009.12.26
Silverlight Pixel Shader 개발 팁  (0) 2009.10.28
[Blend 3 Element Binding]  (0) 2009.10.12
[SketchFlow를 만들자 2]  (0) 2009.10.09
Posted by 알 수 없는 사용자
Tech/Silverlight2009. 10. 12. 15:59

[Blend 3 Element Binding]


자, 이제 Element Binding 사용법에 대해서 알아봅시다!

Element Binding은 FrameworkElement객체의 속성끼리 Binding을 시키는 방법인데요.
Binding하는 개체가 FrameworkElement여야 한다는 것이 제약점입니다.

우선 Blend 3에서 아주 간편하게 Element Binding을 하는 방법을 알아보겠습니다.



위와 같이 Background Image라는 타이틀을 갖고 각종 이미지들을 담고 있는 ListBox를 만들었습니다.

이 ListBox를 이용하여 수행하도록 만들고 싶은 동작은 ListBox에 있는 Item을 선택할 때, 선택된 Item에 따라 배경 이미지가 바뀌는 것입니다.



ListBox의 Properties로 가서 Source에 우측 조그만 사각형 박스를 클릭하여 Data Binding을 클릭하면,
(Data Binding이 되어 있으면 노란색으로 표시가 됩니다)



1. Data Field, Element Property, Explicit Data Context중에서 Element Property로 들어갑니다.
2. 제가 원하는 건 이미지 정보를 담고 있는 ListBox와 연결을 시키는 것이기 때문에 scene elements에서 "imgList"를 선택합니다.
3. scene elements에서 선택한 개체와 관련된 상세한 속성들이 우측 Properties목록에 좌르르륵~ 나오게 되는데요, 이중에 원하는 정보가 있으면 그대로 연결하면 됩니다. 하지만 제가 원하는 속성은 이 곳에 명시되어 있지 않습니다. 제가 원하는 속성은 ListBox에서 선택된 Item의 이미지 정보니까요.
4. Use a custom path expression을 체크하고, SelectedItem.Children[1].Source라고 적어준 후에 Binding direction을 'TwoWay'로 설정해 줍니다.

이제 OK버튼만 누르면 끝!

이렇게 만들어진 Element Binding은 xaml상에서 어떻게 쓰여져 있을까요?

Source="{Binding SelectedItem.Children[1].Source, ElementName=imgList, Mode=TwoWay, UpdateSourceTrigger=Explicit}"

Binding된 속성, FrameworkElement 객체, Binding Mode 등의 정보들이 그대로 설정한 것과 똑같이 쓰여져 있습니다.



1번 이미지를 클릭한 것이 보이시죠?  ^ㅁ^)/

참 쉽죠잉~ ' ㅍ')~

'Tech > Silverlight' 카테고리의 다른 글

Silverlight Pixel Shader 개발 팁  (0) 2009.10.28
[Element Binding]  (0) 2009.10.12
[SketchFlow를 만들자 2]  (0) 2009.10.09
[Blend에서 Behvaior 사용해보기]  (0) 2009.10.09
Posted by 알 수 없는 사용자
Tech/Silverlight2009. 10. 9. 16:59

[SketchFlow를 만들자 2]

 
직접 SketchFlow를 만들어 보았습니다.
ImageSlidePlayer라는 프로그램을 프로토타이핑하기 위해 만들었는데요, 실제 ImageSlidePlayer라는 프로그램은 이미 만들어 두었고, SketchFlow는 실제 체험해 보기 위해 만들었습니다.

SketchFlow는 왜 사용하는가 ?
  - 실제 만들어질 프로그램의 UI와 기능과 흡사하게 만들 수 있다.
  - 실제 구현에 들어가기 전에 발표를 하고 시연을 하여 피드백을 판서로 기록하여 요구사항에 가깝게 SketchFlow를 수정할수록 요구사항들을 충족시키는 프로그램을 만들 수 있게 된다.
  - 구현할 프로그램의 기능들과 흡사하게 만들기 때문에 시연을 함으로써 각 기능들에 대한 이해와 필요성을 상대방에게 알리기 용이하다.
  - 실제 프로그램에 쓰일 각종 Control들과 Panel의 이름과 위치를 정하기 때문에 프로그램 구현에 들어가게 되면 디자이너와 개발자들은 SketchFlow 프로젝트에 쓰인 이름과 배치에 쓰인 정보들을 이용하면 된다.
  - Blend 3와 똑같이 사용할 수 있다.
  - MS Word문서로 내보내기 기능이 있어서 쉽게 보고서 형태로 작성할 수 있다.
  - 포토샵과 일러스트레이터의 프로젝트 파일과 연동이 된다.

ImageSlidePlayer?
  - Image를 큐브 모양으로 만들어서 회전 시키며 보여주는 Player입니다.

ImageSlidePlayer의 SketchFlow Map을 보면 보여질 화면이 두 개 뿐이라서 Screen이 두 개입니다. 참 썰렁하죠;



<SketchFlow Map>

<ImageSlidePlayer & ImageViewerOption>


ImageSlidePlayer에는 이미지들을 회전시키며 보여주는 ImageSlideViewer와 ImageSlideViewer의 size와 ImageViewerOption 의 배경 이미지와 색을 설정할 수 있는 ImageViewerOption이 있습니다.
SketchFlow에서는 종속되어있는 Screen의 Children에 대한 정보를 얻을 수가 없어 굉장히 많이 어려웠습니다.
(아예 안되는 것은 아니지만, 소스 코드를 만져야 하는 일이기 때문에 SketchFlow 내에서 수행 가능한 한도로 작업을 변경했습니다.)

ImageSlidePlayer SketchFlow의 동작구조

1. ImageSlidePlayer
  - 윗쪽 버튼 : [NavigateToScreen] Behavior를 이용하여 ImageViewerOption screen으로 이동
* [NavigateToScreen] Behavior란 ? 다른 Screen으로 이동 시켜준다.

  - 아랫쪽 버튼 : [ChangeRotation] Behavior를 이용하여 Player가 위로 뒤집히면서 ImageViewerOption이 등장
  - 왼쪽 버튼 : [ChangeRotation] Behavior를 이용하여 ImageViewer의 이미지들이 왼쪽으로 90도씩 회전
  - 오른쪽 버튼 : [ChangeRotation] Behavior를 이용하여 ImageViewer의 이미지들이 오른쪽으로 -90도씩 회전

2. ImageViewerOption
  - Ok 버튼 : Width, Height를 입력하고 Ok버튼을 누르면 ImageSlideViewer의 size가 변경되며, [NavigateToScreen] Behavior를 이용하여 ImageSlidePlayer screen으로 이동
* Blend 상에서 Player로의 접근의 불가하여 실제 변경은 불가하다.

  - Background Image 리스트 박스 : Element Binding을 통해 Item을 선택하면 해당 Item의 이미지가 ImageViewerOption와 ImageSlidePlayer의 배경 이미지로 변경
* Blend 상에서 Player로의 접근의 불가하여 실제 변경은 불가하다.
* Background Image 리스트 박스의 내용을 Sample Data  Source를 생성하여 채우려고 했지만, Sample Data Source의 내용에 접근하여 Element Binding을 할 수 있는 방법이 없어서 포기하고 Item들을 직접 StackPanel로 만들어서 채웠다.

  - Color 콤보 박스 : Element Binding을 통해 Item을 선택하면 해당 Item의 배경 색이 ImageViewerOption와 ImageSlidePlayer의 배경 색으로 변경
* Blend 상에서 Player로의 접근의 불가하여 실제 변경은 불가하다.

  - 아랫쪽 버튼 : [NavigateToScreen] Behavior를 이용하여 ImageSlidePlayer screen으로 이동

SketchFlow의 단점 ?
  - 사용자가 SketchFlow를 사용할 수 있는 수준이어야 한다.
* 적어도 각종 Control에 대한 지식이 있어야 하며, Blend 3 사용 경험자일 수록 쉽다.
  - SketchFlow Project를 그대로 실제 프로젝트에 대입하거나 재활용할 수 없다.
* SketchFlow에서 쓰이는 클래스의 type은 Screen이며, 이 type은 SketchFlow 전용이다.
  - 구현할 프로그램의 모든 기능을 SketchFlow내에서만 실현시키기엔 어느 정도의 한계가 있다.


SketchFlow에서 부딪히는 문제들 때문에 삽질을 많이했던 것 같은데요, 중간중간 MVVM/Command Pattern, Behavior, Element Binding 등도 같이 접하면서 공부할 수 있는 기회들이 있어서 좋았습니다.
아직 SketchFlow에서 state와 SketchFlowAnimation을 이용하는 방법을 알지 못해서 좀 아쉽습니다.

아직 공부하지 못한 것은 픽셀 셰이더 이펙트입니다.

이상 박경민이었습니다! -ㅁ-)/



참고하면 좋은 사이트 -
http://www.uxfactory.com/752
[Expression Blend 3] 스케치 플로우(SketchFlow), 어떻게 사용할까? - 1
[Expression Blend 3] 스케치 플로우(SketchFlow), 어떻게 사용할까? - 2
[Expression Blend 3] 스케치 플로우(SketchFlow), 어떻게 사용할까? - 3


'Tech > Silverlight' 카테고리의 다른 글

[Element Binding]  (0) 2009.10.12
[Blend 3 Element Binding]  (0) 2009.10.12
[Blend에서 Behvaior 사용해보기]  (0) 2009.10.09
[Sketch Flow를 만들자]  (0) 2009.10.06
Posted by 알 수 없는 사용자
Tech/Silverlight2009. 10. 9. 15:10

[Blend에서 Behvaior 사용해보기]


지난 번에 만들었던 Behavior를 사용해 보겠습니다.
이름은 ChangeRotation이라는 Behavior이며 TargetTriggerAction입니다.

ChangeRotation Behavior의 목적 ?
- Rotation 변경을 특정한 조건이 발생할 때마다 일으키고 싶을 때에 사용합니다.
- 예를 들어, Target의 RotationY를 버튼이 클릭 될 때마다 90도씩 회전하고 싶을 때 이 Behavior를 사용합니다.

이 Behavior를 사용하는데에는 몇 가지 제약 있습니다.
1. Target의 type은 Grid여야 합니다.
2. Rotation 변경이 되는 Target은 두 종류 입니다.
- Grid 본인
- Grid의 Children

그럼 이제 실제로 Blend 3에서 Behavior를 어떻게 사용할 수 있는지 보도록 하겠습니다.
이미 만들어놓은 SketchFlow Project를 열어 트리 구조를 보면, 아래 사진과 같이 보입니다.
녹색 박스 안의 ImageSlideViewerContainer는 Grid이며 안에는 4장의 이미지가 있습니다.
첫번째 이미지의 RotationY는 0
두번째 이미지의 RotationY는 -90
세번째 이미지의 RotationY는 90
네번째 이미지의 RotationY는 180
이런 식으로 설정되어 있으며 4장의 이미지들의 CenterRotationZ를 Image의 Width의 절반으로 값을 주었습니다.

원하는 움직임은 btnLeft (왼쪽 방향 화살표)를 눌렀을 때, 이 이미지들이 90도씩 RotationY가 변하여 회전하길 바라는 것입니다.




Assets의 Behaviors로 들어가면 ChangeRotation이 있습니다. 이것을 마우스로 Drag하여 btnLeft에 Drop을 하면 됩니다.



Drop을 하면 오른쪽 Properties창에 Behavior를 설정할 수 있도록 아래 사진과 같은 내용들이 나타납니다.

  • Trigger
    • TriggerType : Trigger를 설정할 수 있습니다.
    • SourceName : Event를 발생시키는  Object입니다.
    • EventName : Event를 설정할 수 있습니다.
  • Common Properties
    • TargetName : Action을 일으키는 Object입니다.


사용자가 btnLeft를 마우스 외쪽 버튼으로 클릭하게 되면 ImageSlideViewerContainer가 ChangeRotation을 일으킵니다.

그 하위에 Rotation, Rotation Properties, Target은 Behavior 소스 코드 상에서 직접 Catalog를 만든 것입니다.

ImageSlideViewerContainer의 Children인 4장의 이미지를 회전시키고 싶은 것이기 때문에, Target Catalog에서 isChildren을 체크합니다. 그 후에, RotationY를 체크하고 DeltaY에 90을 입력하게 되면 모든 설정을 마친 것입니다. ^_^



이제 직접 프로젝트를 빌드하고 수행해보면 이미지들이 90씩 왼쪽으로 잘 돌아가게 됩니다 ^ㅁ^)/

'Tech > Silverlight' 카테고리의 다른 글

[Blend 3 Element Binding]  (0) 2009.10.12
[SketchFlow를 만들자 2]  (0) 2009.10.09
[Sketch Flow를 만들자]  (0) 2009.10.06
[Behavior 만들기]  (0) 2009.10.01
Posted by 알 수 없는 사용자
Tech/Silverlight2009. 10. 6. 18:18

[Sketch Flow를 만들자]




SketchFlow Project를 만들어봅니다.
1. Expression Blend3 를 실행
2. New Project
3. Silverlight 3 SketchFlow Application 프로젝트 생성


SketchFlow 화면 구성
빨강 : 프로젝트 파일부터 Resource 파일들의 목록 및 Assets, States를 설정할 수 있는 부분
주황 : 스크린을 구성하고 있는 UIElement들의 Tree 구조
노랑 : 미리보기 화면
초록 : 각 Screen들의 상관관계와 흐름을 한 눈에 볼 수 있는 Map
파랑 : Element들의 속성 및 Resource와 Data들의 정보를 조작

SketchFlow Map을 제외하곤 Expression Blend와 거의 동일한 화면 구성이다.


Screen? 실제로 보여지는 화면
1. UserControl Class를 생성하듯이 SketchFlow에서만 쓰이는 Screen들을 마우스로 끌어내는 것만으로 쉽게 생성할 수 있다.
2. Screen의 이름을 바꿀 수 있다.
3. 목적에 따라 한 눈에 알아 볼 수 있도록 색을 바꿀 수 있다.
4. 화살표 방향으로 각 Screen들끼리의 소통과 흐름을 파악할 수 있다.


Component Screen? 반복적인 요소
1. 어떠한 부분이 필요에 의해 여러 Screen에 중복적으로 쓰일 때 Component Screen을 이용한다.
2. Component Screen을 연결한 Screen에는 Component Screen이 삽입된다.

그리고 나는,
...ImageSlidePlayer를 SketchFlow Project로 만들며 삽질을 하였다...

SketchFlow Project를 만들며 알게 된 점
1. 평범하고 단편적인 애니메이션은 Behavior를 이용하면 된다.
2. 평범하지 않은 애니메이션은 스스로 Behavior를 만들거나 코딩이 필요하다.
3. Insert시킨 Screen의 속성을 건드릴 수가 없다. (Element Binding을 시키려 할 때나 애니메이션을 적용시킬 때 이 문제 때문에 한참을 헤매다 포기했다.)
4. 버튼이나 기타 Element를 활용한 Screen이동이 활발한 프로그램일 수록 SketchFlow 효과도 좋다. (본인이 적용한 프로그램은 한 화면에서 움직이기 때문에, Screen이동이 거의 없어 밋밋하고 Component Screen을 쓰기도 힘들었다.)
5. Resources에 DataTemplate을 만들어서 ListBox에 DataBinding을 했을 때, ListBox의 Items.Count는 0이다. (몰랐다.) SelectedItem을 뽑아보려는 짓은 부질없었으며 Data접근도 복잡하다.

아직도 모르겠는 것 - State 사용법, SketchFlow Animation

아직 안 해 본 것 - 포토샵이나 일러스트레이터 프로젝트 파일이 없어 Import 시켜보지 않았다.

MS Word로 Export 시켜낸 결과물 (보고서)

ImageSlidePlayer.doc

삽질을 너무 많이 했는데, 결과물이 요것뿐이 안 나와서 좌절... OTL

'Tech > Silverlight' 카테고리의 다른 글

[SketchFlow를 만들자 2]  (0) 2009.10.09
[Blend에서 Behvaior 사용해보기]  (0) 2009.10.09
[Behavior 만들기]  (0) 2009.10.01
[MVVM/Command Pattern]  (0) 2009.10.01
Posted by 알 수 없는 사용자
Tech/Silverlight2009. 10. 1. 17:40

[Behavior 만들기]


본 목적은 Sketch Flow를 만들어보자 였던 것 같은데; Sketch Flow에 애니메이션 적용이 필요하게 되어 뒤적뒤적하다보니 Behavior가 필요하게 되고~ 그러다보니 또 Behavior를 새로 만들어야 하는 필요성이 생기게 되어 "Behavior를 만들자"가 되었다.


... OTL (뭐 이래)

간단하게 Behavior는 세 분류로 나뉘는데, Behavior는 그냥 밑도 끝도 없이 Action을 한다. TriggerAction은 Trigger(입력되는 Event나 상황 조건)에 따라 Action을 한다. TargetedTriggerAction은 Trigger에 따라 TargetedObject가 Action을 하는 것을 의미한다.

Behavior를 만드는 방법을 굉장히 친절하게 설명해 놓은 글이 있으니 중복으로 쓰지 않고 링크를 남겨두도록 하겠다.

http://openlightgroup.net/Blog/tabid/58/EntryId/17/Creating-a-simple-Silverlight-3-Behavior.aspx


중요한 부분은 새로이 정의한 Behavior에 System.Windows.Interactivity.dll을 참조시키는 것이고 그 후에 SilverlightApp 프로젝트 쪽에 정의한 Behavior를 참조추가 하는 것이다. 이렇게 한 후에, 빌드하면 Blend를 띄웠을 때, Behavior 리스트에 새로이 정의한 Behavior가 잘~ 보일 것이다.


지금 나에게 필요한 Behavior는 TargetTriggerAction Behavior이며, 해당 Target의 Chidren들의 Rotation이 바뀌도록 해 주는 것이다.
TargetTriggerAction Behavior Class는 다음과 같이 정의한다.


1. TargetedTriggerAction을 상속받아 Invoke()를 오버라이드한다.

public class ChangeChildrenRotation : TargetedTriggerAction<Grid>
{
        protected override void Invoke(object parameter)
        {
            //수행 동작 내용
        } 
}

2. 동작을 수행하는데 필요한 데이터 정보를 받을 DependencyProperty를 정의한다.
ex) X축을 중심으로 회전할 각도를 받을 DependencyProperty를 정의한다.

public static readonly DependencyProperty DeltaXProperty = DependencyProperty.Register(
"DeltaX", typeof(double), typeof(ChangeChildrenRotation), new PropertyMetadata(Double.Parse("0")));

3. Blend에서 DependencyProperty를 입력받을 수 있도록 해주고, Category로 분류시킨다.

[Category("Rotation")]
public bool RotateX
{
       get { return (bool)GetValue(RotateXProperty); 
       set { SetValue(RotateXProperty, value); }
}

끗.

참 잘했어요 ' ㅅ')/ 뿌우

'Tech > Silverlight' 카테고리의 다른 글

[Blend에서 Behvaior 사용해보기]  (0) 2009.10.09
[Sketch Flow를 만들자]  (0) 2009.10.06
[MVVM/Command Pattern]  (0) 2009.10.01
Deep Zoom Composer 에서 개별 이미지 요소 정보 얻기  (0) 2009.08.03
Posted by 알 수 없는 사용자
Tech/Silverlight2009. 10. 1. 16:50

[MVVM/Command Pattern]


  최근 ViewModel관련 Pattern에 대한 관심이 급증하고 있는데, 그 이유는 Silverlight와 WPF에서 제공하고 있는 데이터 바인딩의 장점을 적극 활용할 수 있기 때문이다.
  MVVM Pattern과 Command Pattern에 대해 Silverlight/WPF 개발을 하는데 내가 이해한 대로만 짧은 개념을 여기에 적는다.
 

  MVVM(Model-View-ViewModel) Pattern은 사용자 인터페이스에 최적화된 맞춤형 Model을 만들 수 있다.

 

이름

기능 설명

Model/
DataModel

Metadata의 정보들을 갖고 있다.

View

사용자 인터페이스, UI 요소들로 이루어져 있으며 오로지 UI 요소에게만 관심이 있으며, 그 이하 동작 과정에 관심이 없다.

ViewModel

View에 보여지거나 필요한 정보들을 갖고 있으며, View에게서 request가 들어오면 해당 동작을 수행한다.

 
  Model/DataModel은 Parser와 같은 역할을 하여 metadata들을 갖고 있고 metadata는 필요(사용자의 Request)에 따라 service될 것이다. 사용자의 Request가 View를 통해 접수되면, ViewModel이 Request에 적합한 동작을 수행하고, 그 동작에 필요한 데이터 정보는 Model/DataModel로부터 얻는다.


  자, 그렇다면 Command Pattern은 왜 필요할까? Command Pattern은 ViewModel이 View의 Request를 받아 동작을 수행하는 과정에서 적용시킨다. Command Pattern은 각종 Request들에 반응하는 Action들을 개별로 캡슐화시킬 수 있기 때문에, 재활용성이 용이하며 View와 ViewModel을 분리시키는데 한 몫을 한다.



  자세한 설명은 밑에 Nikhilk과, 길버트라는 분들이 자세히 설명과 적용 사례까지 적어 놓았으니 참조하면 좋겠다.


참조 링크

http://www.nikhilk.net/Silverlight-ViewModel-Pattern.aspx

http://error1001.com/36

'Tech > Silverlight' 카테고리의 다른 글

[Sketch Flow를 만들자]  (0) 2009.10.06
[Behavior 만들기]  (0) 2009.10.01
Deep Zoom Composer 에서 개별 이미지 요소 정보 얻기  (0) 2009.08.03
Silverlight 3 _ 3D  (0) 2009.06.18
Posted by 알 수 없는 사용자
Tech/Silverlight2009. 8. 3. 13:06

Deep Zoom Composer 에서 개별 이미지 요소 정보 얻기

Deep Zoom 강좌 by ONESTONE


1. 개별 이미지의 위치 정보 얻기


1. 개별 이미지의 위치 정보 얻기
- Deep Zoom Composer를 통해 내보내기 한 결과물에서 Metadata.xml 파일을 보면 다음과 같은 정보를 얻을 수 있다.


AspectRatio : 전체 이미지의 Width / Height 비율
x, y : 이미지의 위치, 1을 기준으로 비율에 맞추어 변경한 값
width, height : 이미지의 크기, 1을 기준으로 비율에 맞추어 변경한 값

하지만 MultiScaleImage 컨트롤은 Metadata.xml 파일을 사용하는 것이 아니라, 추가적으로 내보내기 되는 dzc_output.xml 파일을 사용한다.

- dzc_output.xml 파일에서는 다음과 같은 정보를 얻을 수 있다.

Size : 원본 이미지의 Width, Height
Viewport.Width : 원본 이미지를 얼마만큼 확대/축소 하였는지 나타나는 비율
Viewport.X, Y : Viewport.Width의 비율에 따라서 이미지의 X, Y 위치, 1을 기준으로 비율에 맞추어 변경한 값

- 실제 개별 이미지의 영역 정보를 얻기 위해서는 MultiScaleImage 컨트롤로 부터 얻을 수 있는 MultiScaleSubImage들의 Collection을 이용하면 된다. 이것은 MultiScaleImage의 SubImages를 통해서 얻을 수 있다. 얻은 Collection은 MultiScaleImage의 Collection이고 각각의 MultiScaleImage에서 위에서 얻을 수 있는 Viewport Width, X, Y 정보를 얻을 수 있게 된다.

- SubImage의 Viewport 정보를 이용해서 SubImage의 X, Y, Width, Height는 다음과 같이 계산할 수 있다.

- 위 식을 이용하여 특정 Point가 속해 있는 SubImage를 얻는 코드는 다음과 같다.

<MultiScaleImage x:Name="msi" ... />

Point pt = msi.ElementToLogicalPoint(구하기 원하는 Point)
foreach (MultiScaleSubImage subImage in msi.SubImages)
{
if (pt.X >= -subImage.ViewportOrigin.X / subImage.ViewportWidth &&
    pt.X <= -subImage.ViewportOrigin.X / subImage.ViewportWidth + 1 / subImage.ViewportWidth &&
    pt.Y >= -subImage.ViewportOrigin.Y / subImage.ViewportWidth &&
    pt.Y <= -subImage.ViewportOrigin.Y / subImage.ViewportWidth + 1 / subImage.ViewportWidth / subImage.AspectRatio)
{
// 찾았다!!!
}
}



저작자표시 비영리 변경금지

'Tech > Silverlight' 카테고리의 다른 글

[Behavior 만들기]  (0) 2009.10.01
[MVVM/Command Pattern]  (0) 2009.10.01
Silverlight 3 _ 3D  (0) 2009.06.18
ImageButton 만들기  (0) 2009.06.11
Posted by 알 수 없는 사용자
Tech/Silverlight2009. 6. 18. 19:05

Silverlight 3 _ 3D

Silverligh 3의 UI Element에 Projection 프라퍼티가 추가되었다. 
이를 이용하면 간단한 3D 효과를 구현할 수 있다.

Image와 Button을 각각 Y축으로 30도 Z축으로 35도 회전하는 것을 다음과 같은 코드로 구현할 수 있다.

<Image x:Name="myImage" Source="[0253].jpg">
<Image.Projection>
<PlaneProjection RotationY="30"/>
</Image.Projection>
</Image>

<Button Content="Button" Click="Button_Click">
<Button.Projection>
<PlaneProjection RotationZ="35" />
</Button.Projection>
</Button>


Projection에서 제공하는 것은 회전 x,y,z 축 회전 외에도 다음과 같은 것들이 있다.
- 회전 중심점 변경 (CenterOf...)
- 회전 축 고정 평행 이동 (GlobalOffset...)
- 회전 축 변경 평형 이동 (LocalOffset...)

저작자표시 비영리 변경금지

'Tech > Silverlight' 카테고리의 다른 글

[MVVM/Command Pattern]  (0) 2009.10.01
Deep Zoom Composer 에서 개별 이미지 요소 정보 얻기  (0) 2009.08.03
ImageButton 만들기  (0) 2009.06.11
Silverlight2 Unit Test  (0) 2009.05.19
Posted by 알 수 없는 사용자

티스토리툴바