Life is Dynamic

프로젝트 도중 키 이벤트를 강제로 발생시켜야 하는 상황이 생겼는데요;;
SendMessage로 WM_KEYDOWN을 보내놓고,  키가 입력되지 않는다고 화내고 있었습니다''
keybd_event라는 키보드 메세지를 생성해주는 훌륭한 Win32 API함수가 있더군요

keybd_event 함수의 원형은 다음과 같습니다.(USER32.DLL)

VOID keybd_event(      
    BYTE bVk,              // 가상 키코드
    BYTE bScan,          // 하드웨어 스캔 코드
    DWORD dwFlags,     // 동작 지정 Flag
    PTR dwExtraInfo     // 추가 정보
);

bVK
          가상키코드를 지정하는데 1~125 범위의 값이어야 합니다. 가상 키코드 확인하기

지난 3월 13일 Microsoft에서 주최하고 소프트웨어 올림픽이라고도 불리는 Imagine Cup 한국대표 선발전에
다녀 왔습니다.

 Imagine Cup 최초로 천안에서 행사를 진행하였는데요. 천안시청 봉서홀에서 진행하였습니다.

처음가본 천안시청은 굉장히 크더군요. 도착하였는데 고등학교에서 단체 견학을 왔는지 굉장히 붐볐습니다.
행사 시작하고 고등학생 분들이 너무 하더군요.. 떠드는건 둘째치고 PT 진행도중에 말끊고 끼어들고 하더라구요;
지도하시는 선생님은 뭐하는 분인가 싶을정도 였습니다. 천안시에서 손님없을까봐 학생을 어거지로 앉혀 놓은것같은데 제가 볼땐 천안시에 먹칠하는 행위였던것 같네요.. 본의아니게 흥분했습니다;;

다시 본론으로.. 과연 한국대표의 실력은 어떨지 궁금해서 가본 행사였는데요;
감히  평가를 해보자면 '와우' 하고 감탄까지는 나오지 않았습니다.

이번 대회의 주제는 '기술이 우리가 직면한 난제들을 해결할 수 있는 세상을 상상하라!'였습니다. 제가 감탄할 정도가 아니라고 한건 어쩌면 저런 난해한 주제 탓일 수도 있겠네요;

과연 저 주제로 어떤 프로젝트를 만들었을지 굉장히 궁금했는데요.


대상을 수상한 Wanna be Alice팀은 선행 쪽지를 선행을 한후 다음사람에게 전달하고 또 선행을 하고 전달하는
방식으로 세상을 떠돌게 되고, 쪽지에 적힌 코드를 홈페이지에 입력하면 그 쪽지가 세상을 떠돌며 선행을 한
히스토리를 보여주고, 기부도 할수 있는 대략 이런 프로젝트였습니다.
제 소감은 행사에 참가한 4팀중에서 가장 이상적인(?) 프로젝트 였던것 같습니다. 저런 바람대로 되면 세상이 정말 좋아질텐데..라는 생각도 들었구요. 어쩌면 난제를' 상상'하라는 주제와는 더 맞을수도 있겠더군요..
또 한가지 인상 깊었던 점은 프로젝트 발표를 맡은 여자분의 발표 실력이 정말 감탄할 정도더군요; 

금상을 수상한 WaFree팀은 UN이 지정한 대체 식량으로 꼽히는 곤충 사육에 관한 내용이었습니다.
이 팀의 홈페이지에서는 곤충중 가장 저비용으로 효율적인 '사슴벌레'를 키우는 환경을 체크 / 관리해주는
홈페이지 였으며, 저렴한 비용으로 사육장을 만들었습니다.
사슴벌레를 어떻게 먹는지 이해가 가지 않았었는데 사슴벌레로 만든 쿠키를 들고 나와 PPT를 진행하는걸보고
이해가 가더군요.. 발표하시는 분의 따듯한 마음이 돗보이는 발표였습니다.

은상을 수상한 HearScope팀은 선진국의 관심꺼리인 임산부의 건강을 손목에 찬 시스템으로 관리하여주고
여기에서 얻은 수익을 이용하여 개발도상국에 싼이자로 대출을 해주어 난재를 해결한다하는 내용이 었습니다.
모바일과 손목에 찬 시스템을 이용한 헬스케어 시스템이 돗보였고, 어떻게 보면 가장 현실적인 해결책이라는 
생각도 들었습니다. 참..이쪽 개발자분중에 C# MVP이신 김대욱님도 있더군요.

대상수상한 Wanna be Alice팀이 한국대표로 이집트 카이로 대회에 나가게 되는데, 좋은 결과 있었으면 좋겠습니다.

 

안녕하세요? 맨날맑음입니다.
Multi Touch Screen을 구현하기 위해서 멀티터치 스크린의 동작 원리를 이해하는 것이 필요합니다.




터치 스크린을 구현하는 방법에는 감압 방식(Resistive/Pressure Sensitive), 전압 방식(Capacitive/Electrostatic), 적외선 방식(Infrared)로 크게 3가지 방식이 있습니다.

감압방식은 핸드폰에서 많이 사용하는 방식입니다. 다른 터치 방법에 비해 가격이 저렴하고 뛰어난 내구성과 긴 수명을 가지고 있습니다. 감압방식의 5-wire 타입의 경우 3500만번의 터치를 수명으로 가지고 있다고 합니다.

이 방식의 원리는 오른쪽의 그림처럼 2개의 레이어
사이에  플라스틱으로 이루어진 점이 존재 합니다.
 이 점을 이용하여 압력이 가해지면 전기 신호가 흐르게 되고 전기 신호를 인식하여 터치가 된 위치를 알수 있습니다.
 이 방식의 단점은 멀티터치가 불가능 하다는 것입니다. 한번에 하나의 신호만을 측정하기 떄문에 멀티터치를 구현할 수 없습니다. 또한 이것은 장점이자 단점이 될 수 있는데요. 압력을 이용하기 때문에 다른 도구를 사용할수 있는 장점이 있구요, 다르게 생각하자면 손이 아닌 다른것에 눌려 원치않는 조작이 일어 날 수 있다고도 생각해 볼수 있습니다.



두번째 방법으로는 전압 방식이 있습니다. 
손가락이나 기타 전기가 흐를수 있는 물체(도체)를 이용하는 방법입니다. 전기가 흐르는 물체가 스크린을 터치하게 되면 스크린에 흐르고 있던 전기의 흐름을 방해하여 바뀌게 됩니다.
바뀐 전기의 흐름을 인식하여 터치의 위치를 알 수 있습니다.  전압방식은 가격이 비싸다는 단점이 있습니다. 하지만 멀티터치를 지원하고 2억 2500만번의 터치를 할수 있는 내구성이 장점입니다.





마지막으로 우리가 사용할 적외선 방식입니다.
적외선 방식은 광학 방식과 열감지 방식이 있습니다.

광학방식은 사람에게는 보이지 않는 적외선빔을 사용합니다. 오른쪽의 그림처럼 보이지 않는 격자로 구성한 스크린 위쪽과 주변에 센서를 배치시켜 터치가 이루어지면 센서로 적외선을 인식하여 위치를 파악할수 있습니다. 적외선방식의 단점이라면 가장 큰 비용이라고 할수 있고, 또한 주변에서 나오는 적외선때문에 빛이 강한곳에서는 터치가 원활하지 않다는 단점이 있습니다,



터치의 여러 방식에 관해 알아보았으니 이제 우리가 사용할 FTIR방식에 대해 알아보겠습니다.
FTIR방식은 빛의 전반사를 이용 합니다. 전반사는 빛이 밀한 매질(굴절률이 큰)에서 소한 매질(굴절률이 작은)로 입사할때, 입사각이 특정 각도 이상이면 그 경계면에서 빛이 모두 반사되는 현상을 말하는 것입니다.

우리가 사용할 멀티터치 스크린은 기본적으로 아크릴과 적외선 LED, 적외선 CAM, 거울을 사용하여 아래와 같이 구현하게 될것입니다.


그림에 설명 되어 있지만, 간단히 설명을 붙이자면 아크릴에 적외선 LED가 적외선을 발사(?)하고
터치가 일어날 경우에 그 적외선이 손을 만나 전반사를 일으키게 됩니다. 그렇게 들어온 적외선을 거울과 CAM을 사용하여 인식하여 최종적으로 터치를 감지 하게 됩니다.

안녕하세요? 맨날맑음 입니다.
UX라고 하면 사용자가 제품을 사용하는 UI로 이루어 지는 경우가 많이 있습니다.
그중 우리는 최근 많이 사용되는 멀티 터치를 사용하여 흥미와 좀더 조작하기 쉬운 직관적인 인터페이스로 사용자들의 참여를 유도해 보려고 합니다.

현재 우리가 만들려고 하는 멀티 터치형 테이블탑(?) 형식의 컴퓨터는 이미 작년에 MS사에서 Surface 라는 제품을 상용화 하였구요.(대략 1000만원) 터치 방식은 ipot이나 각종 휴대폰에도 많이 적용되어 친숙해진 상태입니다.

터치를 인식하는 방법은 적외선의 전반사를 이용한 FTIR(Frustated Total Internal Reflection) 현상을 이용할 생각이구요.

아직 구체적인 하드웨어 스펙은 정해지지 않았지만 800*600정도의 대형 스크린으로 구현할 생각입니다.

앞으로 6월 중순까지(약 3개월)간 진행할 프로젝트이고 하드웨어나 소프트웨어 구현 중간중간 진행사항을 포스팅하도록 하겠습니다.

 이미 FTIR 방식은 많이 알려진 방식이지만 구체적인 하드웨어 스펙(저는 소프트웨어만 다뤄보아서)에 대한 정보는 얻기 힘들더군요..

 그리고 소프트웨어로는 구체적으로 정하지는 않았지만 멀티 터치를 활용할 수 있는 실용적인 컨텐츠로 구현해 보려고 합니다.

 지금은 자료 수집 중이고요 각 부품들의 자세한 스펙은 다음주에 부품들을 구입하여 만들어 보는대로 다시 포스팅 하겠습니다. 

영상1. Microsoft Surface. 출처 : http://blog.naver.com/clover0513/58078413

선문비트교육센터 Windows Developer 과정  최종프로젝트로 3개월간 만든 프로젝트를 소개하려 합니다.

우선 프로젝트명이 좀 특이한데요. MC Opner는 미디어 컨텐츠 시장의 선두주자라는 뜻입니다.

 컴퓨터를 이용해서 TV 방송 다시보기나 영화 시청을 하시는 분들이 많이 계십니다, 또한 UCC 열풍으로 인해
자신이 만든 동영상을 올리고 기업에서는 전략적으로 UCC를 광고처럼 이용하기도 합니다.
 또한 UCC나 동영상 하나 보려면 원치도 않는 광고를 동영상 앞과 뒤에서 억지로 보게 되기도 합니다.

 그렇다면 여러분은 해당하는 미디어를 보다가 화면에 나오는 옷, 신발, 배경음악, 악세사리, 장소에 관해
궁금하다던지 사고싶다..라는 느낌을 받아본 적이 있을것 입니다.

 실제로 여러포털사이트에는 특정 영상에 노출된 아이템에 관한 정보를 얻으려고 질문하는 사람을 쉽게 찾아
볼 수 있으면 우리 또한 궁금할 때에는 그에 대한 정보를 얻으려고 노력해야 합니다.

 이러면 어떨까요? 화면에 노출된 특정 아이템들에 대한 정보를 단순히 궁금한 아이템의 마우스 클릭한번으로
그 아이템에대한 정보, 쇼핑몰로 연결, 여러 블로그의 사용기, 온라인 마켓의 최저가 등을 바로 보여준다면 참 편리할 것입니다.

 우리 MC Opener는 이러한 편리한 서비스를 제공하는 Player와 동영상을 웹상에서 Active X 없이 손쉽게
편집&메타정보 삽입, CCL 정보를 삽입하는 Editer로 이루어져 있습니다..

 아직 프로젝트를 호스팅할 서버가 마련되어 있지 않아서 실제 서비스는 추후에 공개 하겠습니다.

프로젝트 시연동영상은 여기를 참조하시고, 프로젝트에 관해 더 자세히 보고 싶은분은 PPT를 참고해주세요!

 

1. 프로젝트 개요
 특정 영상에 노출된 수많은 컨텐츠(음악, 옷, 지리정보)들의 정보 입력툴과 서비스 해줄 수 있는 플레이어를 제공하는 프로젝트입니다. 

2 프로젝트 개발 목적    
  최근 들어 웹2.0의 부상과 정보 유통 채널의 다양화 등으로 UCC는 큰 관심을 얻기 시작했다. UCC가 이처럼 시장에서 주목 받고 있는 이유는 바로 뉴미디어 시대의 킬러 컨텐츠로 성장할 수 있는 잠재력 때문이다. 우리는 이점에 주목하여 영상에 수많은 컨텐츠들을 노출 시키고 시청자 들에게는 컨텐츠의 정보를 손쉽게 얻을 수 있고 구매까지 이어질 수 있는 환경을 제공하였다. 또한 UCC저작권의 대안으로 떠오른 CCL을 단순희 노출하는데 그치지 않고 Media Data안에 CCL정보를 삽입하므로 써 좀 더 높은 수준의 저작권 보호를 이룰 수 있도록 구현하였다. 

3. 프로젝트 개발범위
 - 에디터를 통해 영상의 정보를 입력
 - 플레이어를 통해 입력된 정보와 MashUp 된 각종 정보 보여주기
 - 효과적인 게시물을 보기 위한 두가지 게시판기능  
 - 자신이 올린 영상에 대한 편집 및 다운로드 기능
 - Player
     ○ 동영상 재생
     ○ 전체 화면시 사물에 대한 Rect 표시
     ○ 관련 사물 클릭시 각종 정보 제공(웹,쇼핑,이미지)
 - Editor
     ○ 동영상 업로드
      ○ 영상 편집기능
     ○ CCL 데이터 검사 및 입력기능
     ○ 각종 데이터 입력 기능 

4. 시스템 구성도

4.1 EnCode Service
ㆍ동영상 편집기능(자르기, 이미지삽입)을 한다.
ㆍ미디어 파일을 서버로 업로딩 
ㆍ사용자가 올린 동영상을 WMV로 인코딩한다.

4.2 Info Service
ㆍ미디어 파일 정보 관리
ㆍ썸네일 추출

4.3 XMP Service
ㆍCCL정보 파일에 삽입하기
ㆍ미디어 파일에 CCL정보 읽기

4.4 XML Service
ㆍ에디터를 통해 저장한 모든 메타데이터 정보를 XML파일로 기록
ㆍPlayer에서 요구시 미디어에 맞는 정보를 보여준다.

4.5 Webjet Service
ㆍ OpenAPI를 통해 영상에 노출된 사물에 대한 ,이미지,웹검색 내용을 보여줌
ㆍ RSS 서비스와 OpenAPI를 통해 관련 동영상 순위 검색어 순위 날씨 NEws정보 제공

4.6 Comment Service
 ㆍ 시간별로 달린 댓글을 영상 재생시 말풍선으로 해당시간에 보여준다.

4.7 Player
ㆍ동영상 미디어 재생 기능 
ㆍXML 파일로부터 영상에 노출된 컨텐츠에 대한 정보 제공 
ㆍ웹 메쉬업을 통한 쇼핑 이미지 사용기 검색 내용 제공

4.8 Authoring Tool
ㆍ업로드시 동영상 편집 기능  
ㆍCCL 정보 입력 기능  
ㆍ메타 데이터 입력 기능  

5. 개발환경
 (1)서버
ㆍ운영체제 : Microsoft Windows Server 2008 sp1
ㆍ웹서버 : IIS 7.0
ㆍDatabase : Microsoft SQL Server 2005
ㆍ개발 툴 : Microsoft Visual Studio 2008 

(2)클라이언트
ㆍ운영체제 : Microsoft Windows XP SP3
ㆍ개발 툴 : Microsoft Visual Studio 2008 , Blend2.5, Expression Encoder SDK,
   XMP SDK Toolkit, Silverlight 2.0 SDK 

드디어 기다리던 비트 수료식을 마치게 되었습니다!(사실..시연회를 하고 수료식을 한지도 2주나 되었지만..);

밑은 우리조가 만든 MC Opner 시연 동영상입니다;
MC Opner에 관한 자세한 설명은 다음 포스팅에서 하겠습니다.

정말 오랜만의 포스팅입니다. (이제부터 예의바른 블로거가 되기위해 존댓말로 포스팅하기로 했습니다)
핑계없는 무덤은 없다지만 핑계를 대자면,, 지금 진행하는 프로젝트에 쫒겨 시간이 없었다고,,라고 하고싶지만
게을러서 입니다. 게으른 블로거가 되서는 안되는데 큰일입니다;;

아무튼 이번 포스트에서는 FindName(); 메서드에 대해 알아보려 합니다.
여러분은 Silverlight App를 개발하면서 FindName()을 사용하십니까?
사실 일찌감치 FindName() 메서드의 존재와 역할을 알았지만 필요없는 메소드라 생각하여 잊어버렸습니다.
사용하지 않았죠...;

FindName();
System.Windows.Documents 네임스페이스의 Inline 클래스의 멤버매서드
역  할 : 개체의 x:Name 또는 Name 특성 값을 참조하여 Silverlight 개체를 가져온다.
인자값 : string
리턴형 : object

Page에 Rectangle이 있고 x:Name이 MyRect라고 할때  Page.xaml.cs에서는 MyRect라는 x:Name만으로도
Rectangle객체의 컨트롤이 가능합니다.
 예를들어 이런것이죠  >>   this.MyRect.Width = 100;
x:Name만 알아도 충분히 컨트롤이 가능한데 굳이 아래와 같이 복잡하게 객체를 알아올 필요성을 못느낀것이죠.

object o = this.FindName("MyRect");
Rectangle myrect = o as Rectangle;
if (myrect != null)
{
     // to do..
 }

그럼 FindName을 어떤때 써야될까요? 저는 이런 경우에 활용해 보았습니다.
를들어 보자면 로그인하는 시나리오가 적당하겠네요.

Page에서 로그인 버튼을 누르면 로그인 컨트롤(UserControl로 만들어진)이 새로 뜨고 사용자는 ID와 PW를 입력하여 로그인 하게 됩니다. 로그인 된다면 Page의 TextBlock에 사용자가 입력한 ID가 나타나게 한다고 합시다.

Page는 로그인 컨트롤을 알고 있지만(로그인 컨트롤의 Public한 속성에 접근할수 있지만) 로그인 컨트롤은
Page를 알지 못합니다. 물론 로그인컨트롤의 비하인드코드에서 this.parent를 이용하여 부모는 알수있을 겁니다.
하지만 (Page)this.parent;처럼 Page클래스로 캐스팅하면 컴파일 타임에 오류를 일으킵니다. 캐스팅 할수가 없죠.

저는 이걸 해결하기 위해 로그인 컨트롤의 생성자를 오버로딩하여 Page의 TextBlock 컨트롤을 인자로 넘겨주는 방법으로 코딩해왔습니다.

하지만 FindName을 이용하여 해결 할 수도 있습니다. this.parent를 찾아서 Panel로 캐스팅후
FindName() 메서드를 호출하여 TextBlock 개체를 찾으면 되는것이죠!
굳이 생성자에 넘기고 자시고 할 필요가 없습니다.

자.. 방법을 알았으니 간단한 스텁 프로그램을 작성해 보도록 하겠습니다.(앞에서 말한 로그인 예제로 하죠)

1. 우선 실버라이트 응용프로그램을 생성하구요 (프로젝트명을 FindNameTesting으로 했습니다.)
2. Page.xaml을 블랜드에서 열어 디자인 합니다. 간단하게 TextBlock(x:Name = "txtUserID")과
   버튼(x:Name = "btnLog")을 하나 넣었습니다.
   버튼은 Grid로 만들었구요.. Grid안에 Rectangle 객체와 TextBlock(x:Name = "txtLogMSG")를 넣었습니다.


2. Silverlight 사용자정의 컨트롤(UserControl)을 추가 합니다.(LogInControl이라 명명 했습니다.)
    LogInControl을 블랜드에서 열어 디자인해 줍니다. 저는 아래와 같이 했구요;

  그냥 간단하게 ID를 입력받는 TextBox(x:Name = "txtInputID") 와  PW를 입력받는 PasswordBox(x:Name = "txtInputPW")를 추가하고 버튼(x:Name = "btnLogIn")도 하나 놓습니다.

3. 이제 LogInControl의 비하인드 코드(LogInControl.xaml.cs)로 가서 이벤트 처리 메서드를 작성합니다.

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace FindNameTesting
{
    public partial class LogInControl : UserControl
    {
        public LogInControl()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(LogInControl_Loaded);
        }

        void LogInControl_Loaded(object sender, RoutedEventArgs e)
        {
            btnLogIn.MouseLeftButtonDown += new MouseButtonEventHandler(btnLogIn_MouseLeftButtonDown);
        }

        void btnLogIn_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (!CheckedIdAndPw())            
            {
                Storyboard1.Begin();
                return;
            }
            object o = ((Panel)this.Parent).FindName("txtUserID");
            TextBlock txtuserid = o as TextBlock;
            if (txtuserid != null)
            {
                txtuserid.Text = string.Format("{0}님 환영합니다^^",txtInputID.Text);
            }

            object o2 = ((Panel)this.Parent).FindName("txtLogMSG");
            TextBlock txtlogmsg = o2 as TextBlock;
            if (txtlogmsg != null)
            {
                txtlogmsg.Text = "LogOut";
            }
            ((Panel)this.Parent).Children.Remove(this);            
        }

        private bool CheckedIdAndPw()
        {
            if (txtInputID.Text != "맨날맑음" || txtInputPW.Password != "silverlight")
            {
                return false;
            }
            return true;
        }
    }
}

    로그인 버튼을 누르면 LoginControl의 부모인 Page에서 txtUserID개체를 찾아 입력받은 ID를 대입했구요
    같은방법으로 Page에 있는 로그버튼의 TextBlock을 찾아 LogIn이라는 글자도 LogOut으로 변경하였습니다.
    그후에 생성된 LoginControl을 Page에서 제거 하였습니다.

4. 마지막으로 Page.xaml.cs를 작성합니다.

using System.Windows.Controls;
using System.Windows.Input;

namespace FindNameTesting
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            this.btnLog.MouseLeftButtonDown += new MouseButtonEventHandler(btnLog_MouseLeftButtonDown);
        }

        void btnLog_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (txtLogMSG.Text == "LogIn")
            {
                this.LayoutRoot.Children.Add(new LogInControl());
            }
            else
            {
                txtLogMSG.Text = "LogIn";
                txtUserID.Text = "안녕하세요? 로그인하세요";
            }
        }
    }
}

매우 간단합니다. 버튼을 누르게 되면 로그인컨트롤(LogINControl)을 생성합니다자..이제 로그인하게되면
로그인한 화면이 Page의 TextBox를 갱신시킬까요?... 네~잘됩니다
아래는 지금 만든 예제를 조금 수정한 것입니다~(ID : 맨날맑음, PW : silverlight) 테스트 해보시면 잘되는걸 볼 수있습니다.



이외에도 WPF에서는 FindName() 메서드로 개체를 불러와야만 개체의 컨트롤이 가능합니다~
이 방법을 사용하면 부모든 부모의 부모든 상관없이 type만 알고있다면 모든 컨트롤을 제어할수 있겠고,
public한 속성들도 제어할 수 있습니다!
다른 쓰임새가 많겠지만 아직 실력이 미천하여 이럴때 사용하고 있습니다;
다른곳에 활용하신분들은 피드백이나 댓글 부탁드립니다.

티스토리 블로그에 실버라이트 올리기!

실버라이트를 빌드하면  Debug 폴더나 ClientBin 폴더내에 xap 파일이 생성된다;
정확히는 모르겠으나 여기저기 웹서핑과 MSDN 참조 결과 xap 파일만 있으면 실버라이트 결과물을
HTML에 <Object> 태그로 집어 넣을 수 있겠다 싶어서 티스토리에 올릴려고 무진장 많이 노력했지만
계속 흰화면만 뜨는것이었다;

<object  data="data:application/x-silverlight-2," type="application/x-silverlight-2">
    <param name="source" value="xap 파일의 경로"/>
  
    <!-- Display installation image. -->
    <a href="http://go.microsoft.com/fwlink/?LinkID=124807"
        style="text-decoration: none;">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181"
            alt="Get Microsoft Silverlight"
            style="border-style: none"/>
    </a>
</object>  

주석아래 <a href>와 <img> 태그는 실버라이트 런타임이 설치되지 않았을때 나올 다운로드 이미지이다!
HTML의 <BODY> 태그내에 저 구문을 넣어주면 된다고 MSDN에는 나와있는데;;
이게 로컬에 xap 파일이 있는경우에는 잘되지만 다른곳에 있으면 잘안되서 고민한 끝에;

약간 편법으로 저 HTML 파일과 xap 파일을 웹서버에 함게 업로드하고
HTML 문법인 IFRAME을 사용하여 저 HTML을 띄우는 방법으로 했더니만 아주 잘됬다!!

<IFRAME  src="HTML의 경로">
</IFRAME>

성공(?)기념 !! Silverlight DeepZoom Sample!!(사실 LiveDK 블로그에 있는 딥줌이 부러워서'')
 마우스로 클릭하거나 휠을 돌려보세요


PS. 먼가 다른 방법을 아시는분은 댓글이나 피드백을... 부탁드려요'' 굽신굽신

실버라이트로 준비하고 있는 프로젝트가 막바지 인데 아직도 갈길이 멀다;;
옆자리 태욱이가 -_-; 물어본게 있었지만 실버라이트에선 안된다고 우긴게 부끄럽게도;
담배피고왔더니 "병재님" (특별히 님을 붙임!)의 도움으로 어떻게 하는지 알아버렸다


하고 싶었던 기능은 특정한 영역안에서만 표시되는 일종의 플래쉬의 '마스크' 같은 효과였는데
패널들의 Clip 기능을 사용하면 되는것이었다;;

우리조의 히어로 동규씨의 도움으로 블로그에 실버라이트를 넣는 방법을 배웠기때문에''
(이것에대해선 다음에 포스팅 할께요)
일단 구현하려는 예제부터 보도록 하겠다;

이렇게 하려고 하는데;  문제는 저 안쪽에 움직이고 있는 사각형이 영역 밖으로 삐져나오는;
이런결과 밖에 할수 없었다;; 적어도 Clip을 알기전엔..


이제 삐져나오지 않는법을 설명하자면
보이고싶은 영역(Grid)에 Clip을 설정하면 된다;

<Grid Margin="0,0,0,0" Width="100" Height="100" x:Name="MaskGrid">
            <Grid.Clip>
                <RectangleGeometry Rect="0,0,100,100"/>
            </Grid.Clip>
</Grid>

이렇게 <Grid.Clip>
                <RectangleGeometry Rect="0,0,100,100"/>
            </Grid.Clip>
을 지정해주면 100 * 100 사이즈의 Rect 영역 안에서만 그리드의 자식 객체들이 보이게 된다!!!
Rect 뿐 아니라 Ellipse, Line, Path 등도 가능하니 응용하면 멋진 효과를 낼수 있을 듯 하다!

실버라이트에는 각 컨트롤에 Style을 적용시켜 사용할수 있다''

스타일은 HTML의 CSS의 개념과 흡사한 개념이며;
실버라이트에서는 스타일과 더불어 템플릿이라는 개념을 제공하여 사용자가 컨트롤을 쉽게
만들수 있게 하였다;

스타일은 쉽게 말해 컨트롤들의 속성을 미리 정의해 놓고 나중에 불러서 쓰는것이고
템플릿은 컨트롤내의 모양, 형태, 이벤트발생시 처리로직이라던지 그런것을 바꿔줄수 있는것이다;

이번 포스트의 목적인 스타일을 알아보자면
스타일의 사용하는 이유는 재사용성이라는 측면이 가장 큰것 같고, 속성의 변경시 쉽게 정의 부분만
변경하게되면 그 스타일을 적용받는 모든 컨트롤의 속성이 변경되기 때문에 간단하게 유지보수 할수 있게 된다;
그리고 마지막 장점이라면 코드가 간결해진다 이정도로 생각해 볼수 있지 않을까;;


그럼 스타일을 어떻게 정의하고 어떻게 적용시키는지 알아보겠다;

>> 실버라이트 응용프로그램 프로젝트를 생성하여 page.xaml에 아래와 같이
    버튼 9개를 넣어 보았다;

<Button  Content="버튼1" Grid.Row="0" Grid.Column="0"/>
<Button  Content="버튼2" Grid.Row="0" Grid.Column="1"/>
<Button  Content="버튼3" Grid.Row="0" Grid.Column="3"/>
<Button  Content="버튼4" Grid.Row="1" Grid.Column="0"/>
<Button  Content="버튼5" Grid.Row="1" Grid.Column="1"/>
<Button  Content="버튼6" Grid.Row="1" Grid.Column="2"/>
<Button  Content="버튼7" Grid.Row="2" Grid.Column="0"/>
<Button  Content="버튼8" Grid.Row="2" Grid.Column="1"/>
<Button  Content="버튼9" Grid.Row="2" Grid.Column="2"/>

>> 스타일을 정의 하기 위해 app.xaml 코드로 가서
     <Application.Resources> 태그속에 스타일을 적용한다!

 <Style TargetType="Button" x:Key="MyButtonStyle">
       <Setter Property="FontFamily" Value="Gungsuh"/>
       <Setter Property="FontSize" Value="20"/>
       <Setter Property="Foreground" Value="#FFFF0000"/>           
</Style>

       TargetType은 변경할 컨트롤의 타입명 x:Key는 나중에 불러다 쓸 스타일의 이름이다;
         Setter 어트리뷰트 값으로 Property에는 변경하고 싶은 속성을  Value에는  값을 입력하면 된다;
         간단하게 나는 폰트를 궁서체로 글씨 크기는 20 폰트 색상을 빨강으로 입력해 보았다;  쉽다;


>>이제 page.xaml에 있는 버튼들에 속성을 줘보자;

<Button  Content="버튼1" Grid.Row="0" Grid.Column="0"
Style="{StaticResource MyButtonStyle}"/>

Style="{StaticResource MyButtonStyle} 간단하게 이 구문만 추가하면 버튼에 스타일이 입혀지게 된다!
여기서 StaticResource 옆에 자신이 정의한 스타일의 Key를 넣으면 된다;
버튼이 궁서체 20pt 빨간색으로 바뀐것을 볼수있다

버튼 색상을 파란색으로 바꾸어야할때..

스타일을 쓰지 않은 코드에서는 9개에 속성값을 일일이 변경해야하는 번거로움이 있겠지만
스타일을 사용한 코드는 app.xaml에있는 스타일의 정의만 살짝 변경해주면 쉽게 컨트롤의
속성을 변경 할 수있다