[WPF] 텍스트 에디터 - AvalonEdit 사용/제어

/*
* 그냥 일반 회사원이 정리하는 프로그래밍
*/

WPF를 이용해서 소스코드 에디터와 유사하게 만들고 싶은데
일반적인 TextBox를 이용하게 되면
하나 하나 이벤트를 걸어줘서 손좀 많이 봐줘야한다.

울면서 작업하던중 스택오버플로에서 AvalonEdit이라는 패키지를 써봐라라는 글을 보고
바로 실행

정말 편하다.



I. AvalonEdit 설치 및 기본 사용법

1. wpf 기본 도구가 아니기 때문에 NuGet에서 패키지 다운로드를 하자





2. 참조 선언
MainWindow.xaml 



xmlns:avalonedit="http://icsharpcode.net/sharpdevelop/avalonedit" <-- 추가

MainWindow.xaml.cs
using ICSharpCode.AvalonEdit.CodeCompletion;
using ICSharpCode.AvalonEdit.Folding;
using ICSharpCode.AvalonEdit.Highlighting;

using ICSharpCode.AvalonEdit;    <-- 추가





3. WPF Grid안에 삽입
    
        
            
            
        
        
    





실제 VC 화면



해당 코드 실행 화면



아주 간단한 방법으로 메모장보다는 훨씬 보기 좋은 소스코드 에디터가 생성됬다.




II. AvalonEdit 제어
#솔직히 다른 제어는 그냥 배포사이트가서 보면 뭐 색갈 바꾸기 뭐 이벤트 추가하기(뭐 .을 입력하면 미리 준비한 함수명 입력한다던가) 다 쉽게 설명되어있다

난 그중에서 정말 어려웠던 구현 중 1개가 바로
특정 라인에 이동 및 해당 라인 강조 
이게 정말 어려웠다.

사실 코드만 보면 저것도 못해? 라고 생각할 수 있겠지만... 난 사무직이라 정말 고생했다.

!! AvalonEdit 에서 지정된 (특정) 라인으로 이동하기 
!! AvalonEdit 에서 지정된 (특정) 라인 Select

이게 뭔말이고 하면



이런식으로 36열을 클릭하면 AvalonEdit에서 해당라인을 찾아 화면에 띄우고 select를 통해 강조하는 방식이다.



그래서 버튼을 누르면 해당 라인이동 및 강조(select)하는 코드 샘플을 작성해보겠다. ㅎㅎ


1.기능 수행 함수 
line offset 지점을 찾는게 어려웠다. 이게 아무리 스택오버플로를 찾아봐도 없더라 ㅠ

단순하게 Select(10,10) 이런식으로 코딩할 경우 text의 10번째 문자부터 10개 문자열을 선택하지만 위와 같이 GetLineByNumber로 라인 시작점을 지정하면 
해당 라인에서 text 시작이 된다.


private void Line_Selected(int moveLine)
        {
            try
            {
                int GetLine = moveLine;
                int FocusLine = (GetLine - 1);
                /*스크롤바 셋
                 *라인이동
                 */
                double offset = (CodeEdit.TextArea.TextView.DefaultLineHeight) * FocusLine;
                var a = CodeEdit.TextArea.TextView.GetVisualTopByDocumentLine(GetLine);
                CodeEdit.ScrollToVerticalOffset(offset);

                /* 셀렉트 셋
                 * 해당 라인의 offset 설정 (이게 정말 어려웠음)
                 */
                CodeEdit.TextArea.TextView.EnsureVisualLines();
                ICSharpCode.AvalonEdit.Document.DocumentLine line = CodeEdit.Document.GetLineByNumber(GetLine);
                CodeEdit.Select(line.Offset, line.Length);
            }
            catch { }
        }





다음은 아래함수를 사용하여 만든 코드에디터 라인 선택 화면이다.



비록 허접한 코드이지만 다른사람들에게 도움이되었으면 좋겠다.




해당 프로젝트 Full 코드


xaml

    
        
            
            
        
        


        




cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using ICSharpCode.AvalonEdit.CodeCompletion;
using ICSharpCode.AvalonEdit.Folding;
using ICSharpCode.AvalonEdit.Highlighting;


namespace WPF_st
{
    /// 
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Line_Selected(int moveLine)
        {
            try
            {
                int GetLine = moveLine;
                int FocusLine = (GetLine - 1);
                /*스크롤바 셋
                 *라인이동
                 */
                double offset = (CodeEdit.TextArea.TextView.DefaultLineHeight) * FocusLine;
                var a = CodeEdit.TextArea.TextView.GetVisualTopByDocumentLine(GetLine);
                CodeEdit.ScrollToVerticalOffset(offset);

                /* 셀렉트 셋
                 * 해당 라인의 offset 설정 (이게 정말 어려웠음)
                 */
                CodeEdit.TextArea.TextView.EnsureVisualLines();
                ICSharpCode.AvalonEdit.Document.DocumentLine line = CodeEdit.Document.GetLineByNumber(GetLine);
                CodeEdit.Select(line.Offset, line.Length);
            }
            catch { }
        }


        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Line_Selected(1);
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            Line_Selected(2);
        }

        private void Button_Click_2(object sender, RoutedEventArgs e)
        {
            Line_Selected(3);
        }

        private void Button_Click_3(object sender, RoutedEventArgs e)
        {
            Line_Selected(4);
        }

        private void Button_Click_4(object sender, RoutedEventArgs e)
        {
            Line_Selected(5);
        }
    }
}








댓글

이 블로그의 인기 게시물

파이썬 코드 윈도우 WPF(C#) UI로 배포(exe파일)

(아이온 매크로)아이온 일반 키보드로 H/W스왑 매크로