ScrollViewer 에 ScrollToTop, ScrollToBottom, ScrollToLeftEnd, ScrollToRightEnd 구현하기

WinForm에서는 TextBox.ScrollToCaret() 같은 메소드를 이용하여 TextBox에 AppendText("텍스트") 된 내용을 현재 캐럿 위치까지 스크롤이 가능하게 하고, WPF에서는 ScrollViewer.ScrollToTop, ScrollToBottom 등을 이용하여 Scroll의 위치를 컨텐츠의 상,하,좌,우로 이동 할 수 있습니다.
헌데, Silverlight에서는 ScrollToCaret도, ScrollToTop, ScrollToBottom 등도 없기 때문에 이와 같은 기능을 직접 구현 해 줘야 합니다. 그래서, 확장 메서드를 이용해서 ScrollViewer에 직접 ScrollToTop, ScrollToBottom, ScrollToLeftEnd, ScrollToRightEnd 메소드를 구현 해 보겠습니다.

실버라이트에서 ScrollViewer 컨트롤의 메소드를 찾아보시면, ScrollToVerticalOffset, ScrollToHorizontalOffset 이란 메소드가 있습니다. 두 메서드는 모두 double 값을 파라미터 인자로 받는데요, 여기에 double 값을 주게 되면, 각각 Vertical, Horizontal의 위치로 Scroll이 이동하게 됩니다.

그리고, ScrollViewer 컨트롤의 Property를 찾아보시면, ScrollableHeight, ScrollableWidth 가 있습니다. 각각의 Property를 이용하면 스크롤 할 수 있는 컨텐츠 요소의 세로, 가로의 값을 알 수 있습니다.

ScrollToVerticalOffset, ScrollToHorizontalOffset 메소드와 ScrollableHeight, ScrollableWidth Property를 이용해서 다음과 같이 구현하게 되면 Top, Bottom, LeftEnd, RightEnd 로 스크롤을 이동할 수 있습니다. 

// ScrollToBottom
    scv.ScrollToVerticalOffset(scv.ScrollableHeight);

// ScrollToTop
    scv.ScrollToVerticalOffset(0);

// ScrollToLeftEnd
    scv.ScrollToHorizontalOffset(0);

// ScrollToRightEnd
    scv.ScrollToHorizontalOffset(scv.ScrollableWidth);

저는, 같은 프로젝트 내(어셈블리)에서 모두 사용 가능 하도록 확장 메서드를 사용했습니다. 확장 메서드를 사용하게 되면, 이미 존재하는 ScrollViewer 컨트롤에 메서드를 추가 해 주기 때문에, 동일 어셈블리 상에서 또 다른 ScrollViewer를 사용 하게 될 때에도 반복된 코드가 필요 없이 ScrollViewer 자체의 메소드를 쓰는 것처럼 사용하실 수 있습니다.

[ 확장 메서드 구현부 ]

public static class ExtensionScrollViewer
{
    public static void ScrollToBottom(this ScrollViewer scv)
    {
        scv.ScrollToVerticalOffset(scv.ScrollableHeight);
    }

    public static void ScrollToTop(this ScrollViewer scv)
    {
        scv.ScrollToVerticalOffset(0);
    }

    public static void ScrollToLeftEnd(this ScrollViewer scv)
    {
        scv.ScrollToHorizontalOffset(0);
    }

    public static void ScrollToRightEnd(this ScrollViewer scv)
    {
        scv.ScrollToHorizontalOffset(scv.ScrollableWidth);
    }
}

[ 확장 메서드 사용 ]

this.btnTop.Click += (s, e) =>
{
    this.scvMain.ScrollToTop();
};

this.btnBottom.Click += (s, e) =>
{
    this.scvMain.ScrollToBottom();
};

this.btnLeftEnd.Click += (s, e) =>
{
    this.scvMain.ScrollToLeftEnd();
};

this.btnRightEnd.Click += (s, e) =>
{
    this.scvMain.ScrollToRightEnd();
};

[ Sample ]