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