실버라이트4 웹에디터 만들기 (1)

예... 이제 설치 다했으니 뭐하나 만들어봐야겠지요? 실버라이트3에서 아기다리고기다리던게 바로 RichTextBox 죠. 현재 다이어리 독립사이트에서는 Vectorlight에서 개발한 실버라이트 3용 Richtextbox를 쓰고 있는데요. 이제 4부터는 정식 컨트롤도 지원이 되니...자체 개발을 해봅시다 ㅎㅎ 제목은 거창하게 웹에디터라고 했지만, xaml 기반 xml을 사용하기 때문에, 웹에디터와 웹뷰가 쌍으로 이루어져야 할듯합니다. 실버라이트 4 에서는 html을 지원한다고도 하던데... 아직은 둘러봐야알것 같고, 이왕 바꾸는거 호환성 만땅인 xaml로 나가보죠 뭐... html은 여러모로 짜증나쟎아요? ㅎ  저만 그런가........ 잡설이 길었네요. 한번 시작해 봅시다.~~ vsts2010을 실행합니다. 깔삼하네요~ 물결 원츄~ vsts 2010에서 실버라이트의 큰 장점은 아마도 디자인단에서 편집이 가능해진것? 애초에 블렌드는 디자이너툴, vsts는 개발자툴이라고 선언했지만, 3까지는 개발자들도 블렌드를 너무 많이 넘나들어야 했지요. 이제 4부터 그런 제약이 풀렸습니다. 특별한(섬세한 디자인, 스토리보드 등?) 작업이 아니라면 개발자는 그저 asp.net 처럼 개발하듯이 디자인단을 수정할수 있습니다. VSTS에서 디자인을 잡고 있는 화면입니다. 무지 감격입니다 .ㅠㅠ 일단은 웹에디터의 첫번째 기능이자 가장 간단한 기능! 글씨 크게하기, 작게하기, 진하게 하기 등등입니다. 저는 MS Word에서 그 아이콘들을 따왔습니다. 실버라이트 4 에서는 jpg도 지원을 하던데, 3하던 버릇이 있어서 그냥 png로 만들었습니다. 참고로 전, 그림판으로 작업합니다 ㅋㅋ 버튼을 하나 만들고, 거기에 백그라운드에 이미지를 추가시켰습니다. 위 속성에서 그게 가능하더라구요. 그런데... 백그라운드로 들어가니 너무 흐릿하게 나오네요. 그래서 그냥 수작업으로 버튼 컨트롤안에 image를 강제로 넣었습니다. 실버라이트의 계층 구조는 이게 참 자유롭죠 ^^; 이제 버튼들을 만들었으니 이벤트를 겁시다. 이벤트 거는거야 그냥 컨트롤 더블클릭 똑같고, 모든 버튼을 같은 이벤트에 몰아 넣었습니다. 그리고, 드디어 기다리던 RichTextbox를 올립니다. 저 도구상자에 늠름히 있는 RichTextbox!!!!!!!!!!!! 속성에 가로, 세로 Stretch로 해서 dock fill 형태로 만들었습니다. 위는 속성 버튼, 아래는 에디터가 되겠습니다. 소스코드는 아래와 같습니다. 버튼 클릭 이벤트에 걸었구요, UnderLine도 하고 싶었는데 아직 못찾았습니다 ㅋ 일케해서 생산된 결과물을 보시죠. [진하게] [이탤릭] [크게] [작게] 사실, 드래그 한 부분만 폰트를 바꾸고 싶었는데요. 어쩌다 보니 저리 됐습니다 ㅎㅎ 드래그만 바꾸는건 다음 이시간에........