ScrollViewer Zoom And Panning Behavior

Tutorial/WPF 2011/05/05 14:39 |

TAG : C#, MouseWheel, panning, SilverLight, Wit, witstudio, wpf, zoom, 드래그, 확대축소

Introduction

일반적으로 Image Viewer 등과 같이 화면에 출력해야할 내용이 화면크기보다 클 경우 ScrollViewer를 이용해 내용을 스크롤할 수 있도록 구현을 하는데요, 이번시간에는 화면을 스크롤하기 위해서 스크롤바를 조작하지 않고 간단한 마우스조작으로 컨텐츠를 직접 드래그하는 방식으로 View를 조절하고 확대 축소할 수 있는 기능을 구현해보았습니다. 아래는 이번시간에 구현한 결과물 영상입니다.

Create ZoomAndPanning Behavior

Zoom 또는 Panning의 경우 자주 사용될 수 있는 기능이기 때문에 재사용을 용이하게 하기 위해서 Behavior의 형태로 작성했습니다. ZoomAndPanning Behavior의 기본적인 구성은 와래와 같습니다.

public class ZoomAndPanning : Behavior<ScrollViewer>
{
    static ZoomAndPanning();
    public ZoomAndPanning();

protected override void OnAttached();
    protected override void OnDetaching();
    private void OnContentChanged();

protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e);
    private static object CoerceZoomRate(DependencyObject Target, object Value);
    private double GetCoerceZoomRateValue(double ZoomRate);

private Point GetCenterOfViewport();
    private Point GetContentMousePosition();

private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e);
    private void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e);
    private void OnMouseMove(object sender, MouseEventArgs e);
    private void OnPreviewMouseWheel(object sender, MouseWheelEventArgs e);
    private void OnScrollViewerScrollChanged(object sender, ScrollChangedEventArgs e);

protected bool CanPadding { get; }
    protected bool CanZooming { get; }
    protected FrameworkElement ContentElement { get; }
    private Point? LastCenterOfViewport { get; set; }
    private Point? LastContentMousePosition { get; set; }
    private Point? LastDragPoint { get; set; }
    public double MaximumZoomRate { get; set; }
    public double MinimumZoomRate { get; set; }
    public Cursor PanningCursor { get; set; }
    public Key PanningKey { get; set; }
    public Key ZoomingKey { get; set; }
    public double ZoomRate { get; set; }
}

ScrollViewer의 기본적인 마우스 이벤트와 ScrollChanged이벤트를 수신하고 각 이벤트마다 적적할 처리를 진행 해줬습니다. 그리고 추가적으로 최대 확대배율이나 최소 확대배율, Zoom And Panning 단축키등을 통해 다양한 조작환경을 제공 할 수 있도록 구현됬습니다.

소스코드자체가 어려운 내용들은 아니기 때문에 이번시간에는 별도의 코드 설명은 생략하겠습니다. 아래는 이번시간에 사용한 전체소스코드 파일이며 VisualStudio 2010에서 작업되었습니다. 기타 질문이나 문의사항은 이메일이나 댓글남겨주시면 답변드리겠습니다. 감사합니다.

WIT.WPF.Sample.ZoomAndPanningBehaviorExample.zip

Trackback 0 : Comment 0

사용자 지정 Attached Property의 이해

Tutorial/WPF 2011/04/18 23:47 |

TAG : attached property, C#, SelectedItems, wpf, XAML

안녕하세요.
이번 포스팅에서는 사용자 지정 Attached Property에 대해 이해와, 예제를 다룹니다.

1. 다른건 다 기본 내용을 쓰고싶은데, 이거 하나만 추가하고싶어,,

예를 들어서, ListBox에서 여러개를 선택가능하게 하되, 최대갯수를 제한하고 싶은 경우를 봅시다.
기본의 ListBox에서는 MultiSelect를 할수있게/없게 하는 기능은 있어도, 최대 갯수를 지정할 수는 없습니다.
이를 구현하는데 쉽게 생각할 수 있는 방법은 상속입니다. 부모의 기능은 그대로 사용하고 싶은데, 내것 하나만 추가됬으면 하는 경우 니까요

public class MaxSelectionListBox : ListBox    // 1. 리스트 박스를 상속받습니다.
{
    public int MaxSelectionCount   // 2. 필요한 Property를 DependencyProperty로 구현합니다.
    {
        get { return (int)GetValue(MaxSelectionCountProperty); }
        set { SetValue(MaxSelectionCountProperty, value); }
    }

// Using a DependencyProperty as the backing store for MaxSelectionCount.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty MaxSelectionCountProperty =
        DependencyProperty.Register("MaxSelectionCount", typeof(int), typeof(MaxSelectionListBox), new UIPropertyMetadata(int.MaxValue));

// 3. 새로 추가한 Property가 제대로 동작할 수 있도록 적절히 구현해줍니다.
    protected override void OnSelectionChanged(SelectionChangedEventArgs e)
    {
        base.OnSelectionChanged(e);

if (this.SelectedItems.Count > MaxSelectionCount)
        {
            for (int i = this.SelectedItems.Count; i > MaxSelectionCount - 1; i--)
            {
                if (this.SelectedItems.Count <= i) continue;
                this.SelectedItems.Remove(this.SelectedItems[i]);
            }
        }

}
}

상속을 이용한 MultiSelectionCount 구현

하지만, 이렇게 구현하게되면 하나의 프로퍼티 때매, 전체를상속 받아야 하며, 새로 구현한 아이만을 사용해서 구현하여야 합니다.
좀 더 효과적으로 구현할 수 있는 방법이 있까요?!

이번 포스팅에서 설명하고하 하는 사용자 지정 Attached property를 사용하면 됩니다.

우선
사용자 지정 Attached property를 설명하기 앞써, 사용자 지정을 뺀 Attached property에 대해 이야기 해봅시다.

2.  Attached property란?
   Attacted Property란 어떤 객체에서든지 설정할 수 있는 global한 속성입니다.
    보통의 경우 부모요소에 포함된 값을 부모가 직접 지정할 수는 없고, 자식요소가 지정해야할 경우에 사용할 수 있도록 해줍니다.
    그러기 위해서  global하게 구현이 되어 있고요.
    먼가 말로 표현하니 어렵게 느껴지는데요, 평소에 많이 사용하던 Property로 예제를 보면 무릎을 탁 치시게 될꺼에요.

평소에도 많이 사용하는 Attatced Property. (DockPanel.Dock)

즉, 여기서 DockPanel.Dock속성은 부모인 DockPanel에서 정할 수 있는 것이 아니라,
DockPanel안에 포함되는 자식 요소에서 설정되어야 하기 때문에, DockPanel 클래스 안에서는 DockProeperty를 static Dependency Property로 만든 다음 GetDock과 SetDock Metheod를 public으로 제공합니다.

바로 이게 정의는 내가하나, 남들이 정의해서 써야할때-_-!! 사용하는 것이 Attached Property입니다.
평소에도 사용하시면서 보셨거죠?

자 , 그럼 본론으로 들어가 봅시다.

3. 사용자 지정 Attacted Property란?

위에서 구현하고자 했었던 ListBox에서 여러개를 선택가능하게 하되, 최대갯수를 제한하려고 해 봅시다.
바로 이 Attacted Property를 이용해서 말이지요.
다음과 같이 구현하면 됩니다.

public static class SimpleHelper  // 1. static으로 class를 만듭니다. 여기서는 SimpleHelper라고 하지요.
{
    public static int GetMaxSelectionCount(DependencyObject obj)
    {
        return (int)obj.GetValue(MaxSelectionCountProperty);
    }

public static void SetMaxSelectionCount(DependencyObject obj, int value)
    {
        obj.SetValue(MaxSelectionCountProperty, value);
    }

// 2. propa를 이용해서 MaxSelectionCount Property를 생성합니다.        
    // Using a DependencyProperty as the backing store for MaxSelectionCount.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty MaxSelectionCountProperty =
        DependencyProperty.RegisterAttached("MaxSelectionCount", typeof(int), typeof(SimpleHelper), new UIPropertyMetadata(int.MaxValue, OnMaxSelectionCountChanged));  // 3. 새로 추가한 Property가 제대로 동작할 수 있도록 적절히 구현해줍니다.

// * 위의 OnSelectionChanged와 구현내용은 비슷합니다.
    private static void OnMaxSelectionCountChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        ListBox MultiSelector = sender as ListBox;
        if ((int)e.OldValue == int.MaxValue)
        {
            MultiSelector.SelectionChanged += (ss, ee) => CoerceSelectionCount(MultiSelector);
        }

CoerceSelectionCount(MultiSelector);

}

private static void CoerceSelectionCount(ListBox MultiSelector)
    {
        int MaxSelectedCount = GetMaxSelectionCount(MultiSelector);
        if (MultiSelector.SelectedItems.Count > MaxSelectedCount)
        {
            for (int i = MultiSelector.SelectedItems.Count; i > MaxSelectedCount - 1; i--)
            {
                if (MultiSelector.SelectedItems.Count <= i) continue;
                MultiSelector.SelectedItems.Remove(MultiSelector.SelectedItems[i]);
            }
        }
    }

}

사용자 정의 Atteched Property를 사용할 경우

* 10원 팁 : 아래와 같이 propa를 치게되면 인텔리센스가 적당히 atteched Property를 생성하는것을 도와줍니다.

4. 사용을 해보자.

xaml에서 그럼 실제로 구현한 내용을 적용해 봅시다.

사용자 정의 Attacted Property를 사용할 경우 vs ListBox를 상속받아 구현할 경우 사용

* 별첨

C#코드에서 사용자 정의 Property를 사용하는 방법

어찌보면 extention method 와 비슷하다고 보실 수 있네요.
전체 예제는 아래에 첨부합니다.

Trackback 0 : Comment 0

Retrieve all computers on network

Tutorial/C# 2011/02/14 14:49 |

TAG : .NET, ADSI, C#, NetworkComputer, 네트워크컴퓨터

Introduction

이번시간에는 "찌니남편"님께서 방명록을 통해 질문해주신 내용대로, 네트워크 상의 컴퓨터 목록을 가져오는 방법에 대해 소개합니다. 윈도우를 제어하는 작업이다보니 이를 구현하는 방법은 다양하지만 이번시간에는 간단히 .Net Framework상에서 제공하는 기능들을 이용해 네트워크 상에 존재하는 컴퓨터이름, 아이피주소, 연결상태등을 확인하는 방법에 대해 설명드리겠습니다. 아래는 이번시간에 구현할 내용의 결과물 이미지 입니다.

Using Active Directory Services Interfaces

Active Directory Service Interfaces(ADSI)는 여러 네트워크 공급업체들이 제공하는 다양한 디렉터리 서비스의 기능을 이용해 네트워크 자원을 관리하는 디렉터리 서비스 인터페이스 집합으로, 간단하게 네트워크 디렉토리에 접근하고 제어 할 수 있도록 돕습니다. .Net Framework에서도 System.DirectoryServices 네임스페이스를 통해 ADSI를 사용할 수 있기 때문에, 이번시간에는 이를 통해 구현해보도록 하겠습니다.

※ System.DirectoryServices 네임스페이스는 System.DirectoryServices어셈블리를 참조 추가 한 뒤 사용할 수 있습니다.

사용법은 매우 간단합니다. WinNT를 이용해 네트워크영역을 DirectoryEntry를 생성하고 Workgroup을 탐색해가며 네트워크 상에 연결된 컴퓨터의 목록을 가져올 수 있습니다. 아래는 소스코드입니다.

public static void DisplayAllNetworkComputers()
{
    using (DirectoryEntry NetworkRoot = new DirectoryEntry("WinNT:"))
    {
        foreach (DirectoryEntry Workgroup in NetworkRoot.Children)
        {
            foreach (DirectoryEntry Computer in Workgroup.Children)
            {
                if ((Computer.Name != Computer.SchemaClassName))
                {

Console.WriteLine("==================================================");
                    Console.WriteLine(string.Format("Workgroup : {0}\tName : {1}", 
                                        Workgroup.Name, Computer.Name));
                    Console.WriteLine();
                    IPHostEntry HostEntry = Dns.GetHostEntry(Computer.Name);
                    foreach (IPAddress IP in HostEntry.AddressList) Console.WriteLine(IP.ToString());
                    Console.WriteLine();

PingReply PingReply = new Ping().Send(HostEntry.HostName, 300);
                    Console.WriteLine("Sate : {0}\tRoundtripTime : {1}ms", 
                                        PingReply.Status, PingReply.RoundtripTime);
                    Console.WriteLine("==================================================");

Console.WriteLine();
                }
            }
        }
    }
}

위 코드를 간단히 설명하면, DirecotryEntry를 이용해 네트워크상의 컴퓨터 이름을 가져온뒤 DNS를 이용해 해당 컴퓨터의 IP주소 목록을 가져옵니다. 그리고 Ping을 통해 대상 컴퓨터의 상태와 응답속도를 확인합니다. 소스가 크게 복잡하지 않기 때문에 코드에 대한 설명은 여기까지로 하며, 혹시 더 궁금하신 부분이나 문의 사항은 이메일이나 댓글로 남겨주시면 답변드리도록 하겠습니다.

Trackback 0 : Comment 2

ListView Sorting And Filtering Sample

Tutorial/WPF 2011/01/20 15:51 |

TAG : C#, Filtering, listview, Sorting, Wit, wpf, 위트, 위트스튜디오

Introduction

ERP 관련 Application을 제작할때 자주 사용되는 컨트롤 중의 하나가 ListView입니다. 많은 양의 데이터를 손쉽게 출력하기에는 용이하지만 컨트롤 자체적으로 데이터의 정렬이나 필터링등의 기능을 제공하고 있지 않기 때문에 이부분을 직접 구현하거나 상용 컴포넌트를 구입해서 사용해야 합니다. 이번시간에는 ListView의 Column을 클릭해 데이터를 정렬하거나 필터링 하는 방법에 대해 소개합니다. 아래는 이번시간에 구현하게 될 내용의 데모 동영상입니다.

이번 예제의 경우 한번의 포스팅에서 다루기 힘든 양의 소스코드이기 때문에 이번시간에는 기본적인 부분만 설명하고 나머지 부분은 추후 다시 포스팅을 하거나 소스코드를 보시고 이해가 안되신다고 하시는 부분을 위주로 먼저 설명 드리겠습니다.

ListView Sorting

ListView의 데이터를 정렬하기 위해서는 CollectionView의 SortDescriptions을 이용합니다. ListBox나 ListView와 같이 ItemsPresenter를 사용하는 컨트롤의 경우 화면에 출력될때 CollectionView를 이용해 출력될 데이터를 구성하는데 이때 SortDescription을 지정해주면 간단하게 데이터를 정렬 할 수 있습니다. 아래는 정렬 기준 속성이름과 정렬방향 그리고 ItemsSource를 통해 화면에 출력될 데이터를 정렬하는 방법입니다.

ListView Filtering

데이터 필터링도 마찬가지로 CollectionView를 이용해 간단히 구현 할 수 있습니다. CollectionView에는 Predicate<object>형식의 대리자를 통해 해당 요소가 화면에 출력될 때 필터링 되야 하는지 여부를 결정하는데 하나의 Predicate<object>에서 여러개의 필터링 규칙을 지정하는 것은 효율적이지 않기 때문에 아래와 같은 PredicateList<T>를 생성해 여러 상황의 Filtering 기준을 지정 할 수 있습니다.

public class PredicateList<T> : List<Predicate<T>> { public bool Predicate(T obj) { foreach (Predicate<T> Predicate in this) { if(Predicate(obj) == false) return false; } return true; } }
아래는 이번시간에 사용된 전체 소스코드입니다.

WIT.WPF.Samples.ListViewSortAndFilterSample.zip

※ 이번 시간 이후로 등록되는 포스팅의 소스코드를 열기 위해서는 VisualStudio2010버전이 필요합니다.