Window/Surface2012. 9. 18. 20:29

[ Surface 2.0 ] SurfaceScrollViewer Transform Behavior

 

Surface 개발 ( 현재는 Pixelsense 로 이름이 변경되었죠. ) 을 하다보면

기본적으로 제공되는 SurfaceScrollViewer 에서는 Scroll은 잘 되지만

Scale, Rotate, Drag 과 같은 Transform 관련 조작들이 되지 않습니다.

 

현재 스마트폰들에서는 당연히 되는 기능이 되지 않아 UX 적인 부분에서 매우 아쉬운 점입니다.

하지만 이미 스마트폰에 젖어 있는 사용자들에게 꼭 필요한 기능이기 때문에

예전에 하나의 마우스로 멀티터치처럼 Scale, Rotate, Drag 를 할 수 있도록

작성해 보았던 소스를 Surface SDK 환경에 맞게 조금 수정하여 Behavior를 만들어 보았습니다.

http://shine10ee.blog.me/10079192174

 

 

- IsOnlyContentScale : SurfaceScorllViewer의 Content 사이즈를 변경 여부 속성,

                                     false 일 경우 SurfaceScrollViewer의 사이즈가 변경 됩니다. ( default : false )

- CanScale : 사이즈 변경 속성, Ture일 경우 SurfaceScrollViewer의 사이즈를 변경합니다.

- CanRotate : 회전 속성, True일 경우 SurfaceScrollViewr를 회전시킵니다.

                      IsOnlyContentScale이 True일 경우 적용되지 않습니다.

- CanDrag : 드래그 속성, True 일 경우 SurfaceScrollViewer의 위치를 변경합니다.

- MinScale : 최소 사이즈 속성, MaxScale 보다 클 경우 MaxScale 로 설정합니다.

- MaxScale : 최대 사이즈 속성, MinScale 보다 작을 경우 MinScale 로 설정합니다.

 

[ IsOnlyContentScale : True, CanScale : True ]

 

 

[ IsOnlyContentScale : False, CanScale : True ]

 

 

[ CanRotate : True ]

 

 

 

 

[ CanScale : True, CanRotate : True ]

 

 

 

 

[ CanDrag : True ]

 

 

 

 

 

[ CanScale : True, CanRotate : True, CanDrag : True ]

 

 

SurfaceScrollViewerBehavior.zip

 

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

'Window > Surface' 카테고리의 다른 글

[ WPF ] TagVisualization  (0) 2010.07.15
[ WPF ] Surface LibraryStack & LibraryBar - Drag and Drop  (0) 2010.07.10
[ WPF ] Surface LibraryStack & LibraryBar  (0) 2010.07.04
[ WPF ] Surface ScatterView  (0) 2010.07.03
[ WPF ] Surface SDK 예제  (0) 2010.07.03
Posted by 열ㅇl
Window/Surface2010. 7. 15. 10:38

[ WPF ] TagVisualization

Surface SDK 는 기본적으로 태그 인식 기능이 내장되어 있어 이를 인식할 수 있습니다.

 

제공되는 태그는 Byte Tag와 Identity Tag 2가지 종류가 있습니다.

Byte Tag는 1byte의 data 값으로 256가지의 종류가 있고 Identity Tag는 16byte의 data값으로 종류가 제한되어 있지 않습니다.

또한 제공되는 태그 외에 사용자가 직접 만들어 낼 수 도 있습니다.

 

태그에 대한 자세한 내용은 다음 주소를 참고 하시면 됩니다.

ms-help://MS.VSCC.v90/MS.VSIPCC.v90/Microsoft.Surface/Microsoft.Surface.SDK/Development/TaggedObjects/

TaggedObjects.htm

 

TagVisualization 의 아키텍쳐와 인식 절차는 그림과 같습니다.

 

[ Architecture ]

 

[ Process ]

 

그럼 Tag를 인식하는 간단한 예제를 작성해 보겠습니다.

 

- Surface 프로젝트를 생성한 후 새 항목을 추가합니다.

 

- 다음과 같이 TagVisualization을 추가합니다.

 

- Surface Window XAML에 다음과 같은 코드를 작성합니다.

 

 

보시면 Grid 안에 TagVisualizer를 추가한 후 Definitions에 ByteTag를 인식할 수 있도록 추가하였습니다.

Value는 태그의 번호이며 TagRemovedBehavior는 태그의 인식이 사라질 때 어떤 식으로 사라지게 할 것인지에 대한 플래그 값입니다.

Fade는 Opacity값이 서서히 줄면서 사라지는 애니메이션입니다.

LostTagTimeout은 해당 태그와 연결된 Source가 사라지는 시간이고 Source는 태그가 인식 되었을 때 나타날 TagVisualization 입니다.

 

위에 추가한 TagVisualization 은 ScatterView를 Content로 검은색의 Ellipse를 바탕으로 가지고 있으며 이미지들을 자식들로

추가하는 코드가 작성되어 있습니다.

 

태그가 인식이 되어지면 Source로 연결된 객체가 새로 생성이 됩니다.

이 때 윈도우에서는 아키텍쳐와 같은 이벤트들이 발생하게 됩니다.

 

[ 결과 화면 ]

검은색 원 부분이 ImageTagVisualization 영역입니다.

테스트 해보시면 알겠지만 ImageTagVisualization에 추가된 이미지들은 해당 영역에서만 움직일 수 있고 윈도우 영역으로는

이동이 되어지지 않는데요. 서로 다른 영역이기 때문에 당연한 결과겠죠.

 

다음 포스팅에서는 DragandDrop 기능을 사용하여 윈도우 영역으로 이미지를 이동하는 방법에 대해 포스팅하겠습니다.

 

TagVisualization에 대한 자세한 내용은 다음 주소를 참고하세요.

ms-help://MS.VSCC.v90/MS.VSIPCC.v90/Microsoft.Surface/Microsoft.Surface.SDK/ProgrammersGuide/TagVisualization/

TagVisualization.htm

invalid-file

'Window > Surface' 카테고리의 다른 글

[ Surface 2.0 ] SurfaceScrollViewer Transform Behavior  (1) 2012.09.18
[ WPF ] Surface LibraryStack & LibraryBar - Drag and Drop  (0) 2010.07.10
[ WPF ] Surface LibraryStack & LibraryBar  (0) 2010.07.04
[ WPF ] Surface ScatterView  (0) 2010.07.03
[ WPF ] Surface SDK 예제  (0) 2010.07.03
Posted by 열ㅇl
Window/Surface2010. 7. 10. 20:56

[ WPF ] Surface LibraryStack & LibraryBar - Drag and Drop

지난번 포스팅에 이어 LibraryStrack 과 LibraryBar 컨트롤의 Drop 기능 구현에 대해 알아보겠습니다.

 

기본적으로 Drag and Drop 기능을 포함하고 있는 컨트롤 들이지만 다른 영역에서 컨트롤 안으로의 객체 삽입은

 

되지만 컨트롤 안에서 밖으로의 객체 삽입은 되지 않는데요. 이를 위해 구현되어 할 이벤트들이 있습니다.

 

ScatterView의 SurfaceDragDrop.Drop 이벤트와 ScatterViewItem.ScatterManipulationStarted 이벤트 입니다.

 

또한 ScatterView의 속성 중 변경 할 값들이 있습니다. Drop이벤트를 발생시키기 위해 AllowDrop 값을 True로

 

Background의 값을 지정해주어야 합니다. ( 투명하게 하기 위해 Transparent 값을 지정하였습니다. )

 

간단하게 소스를 통해 알아 보겠습니다.

 

        // Drop 이벤트

        private void ScatterView_Drop(object sender, SurfaceDragDropEventArgs e)

        {

            // 현재 커서로 만들어져 들어온 객체

            // 다른 영역으로의 Drag를 위하여 Surface에서는 BeginDragDrop 이벤트 발생 시

            // 커서를 선택된 객체로 변경하여 움직입니다.

            SurfaceDragCursor droppingCursor = e.Cursor;

 

            // 현재 Drop 된 영역이 SactterView 이고 Drag가 시작된 영역이 ScatterView 아니면

            if (droppingCursor.CurrentTarget == scatterView && droppingCursor.DragSource != scatterView)

            {

                // ScatterView의 아이템이 아니면

                if (!scatterView.Items.Contains(droppingCursor.Data))

                {

                    // 아이템을 추가 시킵니다.

                    scatterView.Items.Add(droppingCursor.Data);

 

                    // 커서로 넘어온 데이터를 ScatterViewItem으로 변경합니다.

                    var svi = scatterView.ItemContainerGenerator.ContainerFromItem(droppingCursor.Data)

                                      as ScatterViewItem;

 

                    if (svi != null)

                    {

                        // Center 및 Orientation등의 값들을 현재 커서 값으로 변경합니다.

                        svi.Center = droppingCursor.GetPosition(this);

                        svi.Orientation = droppingCursor.GetOrientation(this);

                        svi.Height = droppingCursor.Visual.ActualHeight;

                        svi.Width = droppingCursor.Visual.ActualWidth;

                        svi.SetRelativeZIndex(RelativeScatterViewZIndex.Topmost);

                    }

                }

            }

        }

 

        // ScatterView의 아이템이 선택되어질 때 발생

        private void ScatterView_ScatterManipulationStarted(object sender, 

                                                                                         ScatterManipulationStartedEventArgs e)

        {

            ScatterViewItem svi = e.OriginalSource as ScatterViewItem;

 

            // ScatterViewItem 아이템일 때만

            if (svi != null)

            {

                // Drag을 시작합니다.

                svi.BeginDragDrop(svi.DataContext);

            }

        }

 

[ 실행화면 ]

 

- ScatterView안의 Image 객체들

 

- LibraryBar 컨트롤 안에 옮겨진 객체 중 빨간 테두리의 객체를 선택하여 밖으로 꺼내었습니다.

 

- 현 위치에 삽입되어졌습니다.

 

특별히 어려운 내용은 없지만 Surface에서는 BeginDragDrop 이벤트 발생시 커서를 선택된 객체로 변경하게 되고

Drop 이벤트 발생 시 해당 객체의 정보들이 인자로 넘어온 다는 점을 아시면 되겠습니다.

 

다음 포스팅에서는 Tag를 인식하는 법에 대해 알아보겠습니다.

invalid-file

'Window > Surface' 카테고리의 다른 글

[ Surface 2.0 ] SurfaceScrollViewer Transform Behavior  (1) 2012.09.18
[ WPF ] TagVisualization  (0) 2010.07.15
[ WPF ] Surface LibraryStack & LibraryBar  (0) 2010.07.04
[ WPF ] Surface ScatterView  (0) 2010.07.03
[ WPF ] Surface SDK 예제  (0) 2010.07.03
Posted by 열ㅇl
Window/Surface2010. 7. 4. 23:21

[ WPF ] Surface LibraryStack & LibraryBar

Surface SDK에는 특별한 컨트롤들이 몇 가지 추가되어 있습니다.

그 중 LibraryStack과 LibraryBar에 대해 간단한 예제를 통해 알아보겠습니다.

 

컨트롤의 이름에서도 느낄 수 있듯이

LibraryStack은 Item으로 추가된 객체를 추가되는 순서에 따라 차곡차곡 쌓아 놓을 수 있는 컨트롤입니다.

객체를 터치 시 다음 객체가 앞으로 나오게 됩니다.

 

LibraryBar는 Item으로 추가된 객체들을 Bar모양의 컨트롤 안에 줄줄이 담을 수가 있습니다.

기본적으로는 가로 형태의 Bar로 좌우로 슬라이드 시키며 객체들을 볼 수 있습니다.

 

또한 두 컨트롤들은 기본적으로 Drag and Drop을 사용할 수 있습니다.

 

각 컨트롤들은 기본적으로 다음과 같은 생김새를 가지고 있습니다.

 

그림과 같이 컨트롤안의 객체를 밖으로 Drag 시킬 수 있습니다.

이 때 LibraryBar는 객체가 이동이 되어 지는 것이 아닌 복사된 이미지가 이동되며 해당 객체는 그림의 빨간  테두리가

쳐진 객체처럼 비활성화가 되어 집니다.

밖으로 Drag 되어진 객체는 기본적으로 다시 컨트롤 안으로 들어가게 됩니다.

이때 해당 객체를 현 위치에 위치 시키고 싶다면 Drop 이벤트에서 처리를 해주어야 합니다.

 

LibraryBar에 대해 좀 더 설명을 하자면,

기본적으로 2열로 객체가 추가되며 Rows 속성을 통해 값을 변경 할 수 있습니다.

또한 추가된 객체는 활성화 상태이며 SetIsItemDataEnabled 메서드를 통해 해당 객체의 활성화 여부를 변경할 수 있습니다.

그룹을 지정할 수 있는데 PropertyGroupDescription을 GroupDescriptions의 컬렉션에 추가시키면 됩니다.

자세한 내용은 SDK 문서를 참고 하시기 바랍니다.

 

예제의 소스는 다음과 같이 ItemTemplate를 사용하였습니다.

< XAML >

 

 

< C# >

   protected override void OnInitialized(EventArgs e)

  {

      base.OnInitialized(e);

 

      ObservableCollection<string> items = new ObservableCollection<string>();

 

      string[] imagesPath = Directory.GetFiles(@"C:\Users\Public\Pictures\Sample Pictures", "*.jpg");

 

      foreach (string path in imagesPath)

      {

          items.Add(path);

      }

 

      libraryStack.ItemsSource = items;

      libraryBar.ItemsSource = items;

  }

 

SDK URL :

LibraryStack : ms-help://MS.VSCC.v90/MS.VSIPCC.v90/Microsoft.Surface/Microsoft.Surface.SDK/ProgrammersGuide/

OtherSurfaceSpecificControls/UsingLibraryStackControl.htm

 

LibraryBar : ms-help://MS.VSCC.v90/MS.VSIPCC.v90/Microsoft.Surface/Microsoft.Surface.SDK/ProgrammersGuide/

OtherSurfaceSpecificControls/UsingLibraryBarControl.htm

 

다음 포스팅에서는 이 예제에 Drop 이벤트 처리를 추가하는 내용에 대해 다루겠습니다.

invalid-file

 

'Window > Surface' 카테고리의 다른 글

[ WPF ] TagVisualization  (0) 2010.07.15
[ WPF ] Surface LibraryStack & LibraryBar - Drag and Drop  (0) 2010.07.10
[ WPF ] Surface ScatterView  (0) 2010.07.03
[ WPF ] Surface SDK 예제  (0) 2010.07.03
[ WPF ] Surface SDK 설치  (2) 2010.07.02
Posted by 열ㅇl
Window/Surface2010. 7. 3. 21:17

[ WPF ] Surface ScatterView

이번 포스팅에서는 ScatterView를 사용하는 간단한 예제를 만들어 보겠습니다.

 

ScatterView는 Item으로 포함된 객체들을 이동, 회전, 크기조절을 가능하게 해주는 패널입니다.

Item으로 포함되는 객체들의 위치와 회전 각도는 항상 랜덤하게 설정됨으로 추가 시 항상 다른 위치와 각도로 나타납니다.

 

추가되는 Item의 형식은 ScatterViewItem으로 기본적으로 ScatterViewItem으로 추가 시키지 않아도

ScatterViewItem의 Content로 설정이 되어 추가가 되어 집니다.

 

ScatterViewItem는 다음과 같은 속성이 있습니다.

 MaxWidth

  최대 넓이 지정

 MaxHeight

  최대 높이 지정

 MinWidth

  최소 넓이 지정

 MinHeight

  최소 높이 지정

 Center

  부모 요소에서의 위치( 객체의 중심점을 기준으로 합니다. )

 Orientation

  회전 각도

 

ScatterViewItem은 RenderTransform의 영향을 받지 않음으로 Center와 Orientation의 속성으로 상태를 변경해야 합니다.

또한 Panel.SetZIndex 메서드를 통해 zindex 속성을 변경할 수 있습니다.

 

예제는 간단히 이미지들을 ScatterView에 추가시키는 내용으로 소스는 다음과 같이

ItemTemplate 을 사용하였습니다.

 

먼저 WPF용 Surface를 선택한 후 프로젝트를 생성합니다.

 

 

Surface에서는 다음과 같이 Surface 컨트롤을 사용해야만 터치를 할 수 있습니다.

 

< XAML >

         <s:ScatterView x:Name="scatterView">
            <s:ScatterView.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding"}" Stretch="Fill" />
                </DataTemplate>
            </s:ScatterView.ItemTemplate>
        </s:ScatterView>

 

< C# >

   private void SurfaceWindow_Loaded(object sender, RoutedEventArgs e)

  {

       scatterView.ItemsSource =

               Directory.GetFiles(@"C:\Users\Public\Pictures\Sample Pictures", "*.jpg");

   }

 

< 실행 화면 >

Simulator를 먼저 실행 시킨 후 실행을 해야 모든 기능을 사용하실 수 있습니다.

 

 

ScatterView의 자세한 내용은 SDK 문서를 참고 하시기 바랍니다.

URL : ms-help: //MS.VSCC.v90/MS.VSIPCC.v90/Microsoft.Surface/Microsoft.Surface.SDK/ProgrammersGuide/

ScatterView/ScatterView.htm

 

다음 포스팅에서는 LibrayStack과 LibraryBar를 사용한 간단한 예제에 대해 알아 보겠습니다.

invalid-file

'Window > Surface' 카테고리의 다른 글

[ WPF ] TagVisualization  (0) 2010.07.15
[ WPF ] Surface LibraryStack & LibraryBar - Drag and Drop  (0) 2010.07.10
[ WPF ] Surface LibraryStack & LibraryBar  (0) 2010.07.04
[ WPF ] Surface SDK 예제  (0) 2010.07.03
[ WPF ] Surface SDK 설치  (2) 2010.07.02
Posted by 열ㅇl
Window/Surface2010. 7. 3. 17:28

[ WPF ] Surface SDK 예제

이전 포스팅에서 Surface SDK를 설치하셨다면 이번에는 간단한 구성에 대해 알아보겠습니다. ^^

 

   

 

 

 

 

 

 

 

시작 프로그램에서 설치된 폴더를 열어 보시면 그림과 같이 항목들이 보입니다.

중요한 항목들은 다음과 같습니다.

 

Sample 들을 실행 및 소스를 보실 수 있습니다.

Surface SDK에 대한 문서를 보실 수 있습니다.

 

 

Identity Tag를 설정 합니다.

Surface Table과 같은 환경으로 프로그램을 실행시키기 위한 시뮬레이터 입니다.

 

Water 예제의 이미지를 변경합니다.

 

우선 Surface Simulator를 실행시켜 보겠습니다.

다음과 같이 물결 효과를 보실 수 있는 예제가 기본적으로 실행이 됩니다.

 

[ Tools ]

빨간 테두리 : 손가락 모양으로 터치 이벤트를 발생시킵니다.

파란 테두리 : 정해진 값의 태그를 인식할 수 있습니다. ( byte 태그 )

녹색 테두리 : 정해진 값의 태그를 인식할 수 있습니다. ( Identity 태그 )

 

[ Record ]

현재 화면을 녹화 하거나 파일을 재생할 수 있습니다.

 

다음은 샘플들을 실행시켜 보겠습니다.

우선 Sample 폴더에 들어가서 압축을 푼 후 더에 들어가면 다음과 같은 항목들이 있습니다.

 

빨간 테두리의 배치 파일을 실행시키면 프로젝트들을 일괄적으로 빌드 하면서 Simulator(Shell)의

실행 목록에 자동으로 추가 시켜 줍니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Simulator를 다시 실행시킨 후 화면의 네 귀퉁이를 누릅니다. ( 누른 위치에 따라 화면이 보여지는 상하 방향이 달라집니다. )

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

그림과 같이 추가된 프로그램들을 볼 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

몇 가지 예제들을 실행시킨 모습입니다.

         

 

작동법은 다음과 같습니다.

 

Drag :

마우스 왼쪽 버튼 클릭 후 이동합니다.

 

Scale & Rotate :

마우스 왼쪽 버튼을 클릭 후 오른쪽 버튼을 클릭 하여 

터치점을 인식시킨 후 마우스 왼쪽 버튼을 누른 후 

움직입니다.

 

- 터치점을 해제 하려면 터치점이 인식된 곳을

마우스 왼쪽 버튼을 누른후 오른쪽 버튼을 누릅니다.

 

         

다음 포스팅에서는 간단한 프로그램 작성을 해 보겠습니다.

'Window > Surface' 카테고리의 다른 글

[ WPF ] TagVisualization  (0) 2010.07.15
[ WPF ] Surface LibraryStack & LibraryBar - Drag and Drop  (0) 2010.07.10
[ WPF ] Surface LibraryStack & LibraryBar  (0) 2010.07.04
[ WPF ] Surface ScatterView  (0) 2010.07.03
[ WPF ] Surface SDK 설치  (2) 2010.07.02
Posted by 열ㅇl
Window/Surface2010. 7. 2. 18:10

[ WPF ] Surface SDK 설치

요즘 Surface 관련 프로젝트를 진행하고 있기 때문에 개발 과정에서 얻어지는 것들에 대해서

간단히 포스팅 하겠습니다. ^^

 

우선 Surface 개발을 하기 위해선 SDK를 설치해야 겠죠.

 

Surface SDK를 설치하기 위해선 다음의 선 과정들이 필요합니다.

 

 

 

기본적으로 비스타 환경 이상부터 실행이 되고 비주얼 C# 2008는 설치되어 있어야 합니다.

SDK 1.0 은 VS 2008 에서만 지원됩니다.

또한 XNA 개발을 지원하기 때문에

XNA Framework Redistributable 2.0 또는 XNA GameStudio Express 2.0 가 설치되어 있어야 합니다.

 

다운로드 주소:

XNA Framework Redistributable 2.0 : 

http://www.microsoft.com/downloads/details.aspx?FamilyID=15fb9169-4a25-4dca-bf40-9c497568f102&displaylang=en

 

Surface SDK 1.0 SP1 :

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=3db8987b-47c8-46ca-aafb-9c3b36f43bcc

 

Surface에 대한 자세한 내용은 다음의 홈페이지에서 확인하시면 됩니다.

http://www.microsoft.com/surface/en/us/default.aspx

 

- 설치가 완료된 후 비주얼 스튜디오를 실행하게 되면 다음과 같이 Surface 메뉴가 생기게 됩니다.

 

 

'Window > Surface' 카테고리의 다른 글

[ WPF ] TagVisualization  (0) 2010.07.15
[ WPF ] Surface LibraryStack & LibraryBar - Drag and Drop  (0) 2010.07.10
[ WPF ] Surface LibraryStack & LibraryBar  (0) 2010.07.04
[ WPF ] Surface ScatterView  (0) 2010.07.03
[ WPF ] Surface SDK 예제  (0) 2010.07.03
Posted by 열ㅇl

티스토리툴바