Window/Surface2010. 7. 10. 20:56

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

 

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

 

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

 

ScatterViewSurfaceDragDrop.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를 인식하는 법에 대해 알아보겠습니다.

'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

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

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

 

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

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

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

 

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

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

 

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

 

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

 

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

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

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

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

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

 

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

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

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

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

자세한 내용은 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 이벤트 처리를 추가하는 내용에 대해 다루겠습니다.

 

'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

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

 

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

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

 

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

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

 

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

 MaxWidth

 최대 넓이 지정

 MaxHeight

 최대 높이 지정

 MinWidth

 최소 넓이 지정

 MinHeight

 최소 높이 지정

 Center

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

 Orientation

 회전 각도

 

ScatterViewItemRenderTransform의 영향을 받지 않음으로 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를 사용한 간단한 예제에 대해 알아 보겠습니다.

'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. 2. 18:10

요즘 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