안녕하세요. 두 번째 실버라이트에 관련 된 글입니다. 저번 글에서 실버라이트 개발 환경설정을 소개하였습니다. 그런데 글을 쓰는 오늘(10월 14일) 실버라이트2 정식 버전이 출시 되었다고 합니다. 저번 글을 실버라이트2 Beta2 를 기준으로 작성했는데 다음날 실버라이트2 정식 버전이 출시 되어서 조금 당황이 되는 기분이네요. 그래도 도움이 되실 분들이 있으리라 생각합니다. 어쨌든 그래서 이번 글의 첫 부분에서는 실버라이트2 정식 버전에 관련 된 뉴스와 설정에 대해서 링크를 소개합니다. 사실 아직 한글 버전이 출시 되지 않았기 때문에 저도 설치를 해보지 않은 상태입니다. 한글 버전은 약 일주일 정도 후에 출시되지 않을까 생각합니다.
실버라이트2 와 관련된 이야기는 http://cafe.naver.com/mssilverlight.cafe 실버라이트 정보 공유 카페에서 활발하게 진행이 되고 있습니다. 이 카페에 방문하시면 많은 정보를 얻으실 수 있을 것 같습니다. 이클립스에서 실버라이트 플러그인을 지원한다는 얘기 등이 눈에 띄고 있습니다.
오늘은 C#으로 실버라이트를 이용한 프로그램을 만들 때 도움이 될만한 기초 팁이나 정보 몇 가지를 소개해 드리고자 합니다.
1. 실버라이트와 C#으로 개발한 프로그램 배포하기
실버라이트는 웹에서 실행되기 때문에 웹 서버가 필요합니다. 자체서버를 구축할 수도 있고 웹 호스팅을 받는 방법도 있습니다. 개인이라면 대부분 후자 쪽을 선택하리라 생각합니다. 웹 호스팅 업체는 무척 많습니다. 호스팅 업체를 선택해서 웹 호스팅을 받고 FTP 접속해서 자신이 개발한 파일을 올리면 됩니다. 실버라이트 프로젝트를 만들면 웹 프로젝트와 함께 만들어지는데 해당 폴더를 올리면 쉽게 실행시킬 수 있습니다. 실제 실행되는 파일은 .xap 라고 생각이 됩니다. 올리고 나서 HTML 페이지에 접속하면 실버라이트가 실행됩니다.
2. 실버라이트 런타임이 없는 사용자가 실버라이트로 개발한 프로그램을 실행하기
실버라이트 런타임이 설치되어 있지 않은 컴퓨터에서는 실버라이트 프로그램이 있는 웹 페이지에 접속하면 실버라이트 런타임을 설치하는 페이지 링크가 달린 이미지가 나오게 될 것입니다. 웹 페이지마다 이용하는 실버라이트 버전이 다를 수 있기 때문에 이 링크는 HTML 페이지에서 수정을 할 수 있습니다. HTML 페이지에 보면 <a href 태그를 이용한 링크가 있는 것을 볼 수 있는데 이 링크 URL을 수정하면 됩니다. 만약 Beta 버전으로 프로젝트를 만들다가 정식 버전이 나왔다면 이때 정식 버전을 받을 수 있는 페이지로 수정되었는지 확인해야합니다.
3. UserControl 에서 다른 UserControl 을 자신의 화면에 띄우기
제목이 살짝 애매한 것 같습니다. 윈도우 프로그래밍을 생각하면 부모와 자식 윈도우의 관계를 실버라이트로 보여주려면 어떻게 하는 것이 좋을지에 대한 것입니다. 실버라이트도 하나의 컨버스에 모든 UI와 화면을 표현할 수 없어서 여러 개의 컨버스를 만들게 되고 UserControl 이 그런 역할을 하게 됩니다. 어떤 AccountUI 이라는 UserControl 을 자신의 UserControl 에 붙이고 싶다고 합시다.
public AccountUI accountUI = null;
public UIControl()
{
InitializeComponent();
accountUI = new AccountUI();
this.LayoutRoot.Children.Add(accountUI);
}
이렇게 자식으로 Add를 하게 되면 UIControl 이라는 UserControl 안에 AccountUI 라는 UserControl 이 작동하게 됩니다. 간단하게 코드로 작업할 수 있습니다.
4. xaml 코드와 c# 코드에서 각각 이벤트 처리하기
private void btnChat_Click(object sender, RoutedEventArgs e)
{
Page.Instance.logicClient.SendChatMsg(ChatTextBox.Text,
ChatNickTextBox.Text);
}
위와 같이 버튼을 클릭 했을 때 동작해야하는 코드가 있다고 합시다. xaml 에서 이 이벤트를 연결시켜 줄 수도 있고 C# 코드에서도 할 수 있습니다. 밑에는 xaml 의 예제를 보여주고 있습니다.
<Button Style=”{StaticResource ButtonStyle}” Content=”Chat” Click=”btnChat_Click” Width=”55″ x:Name=”ChatButton”/>
개인적으로 C# 코드에서 하는 것을 선호합니다 그 이유는 여러 가지가 있지만 실수를 막기 위함이 가장 큰 것 같습니다. 프로그래머에게 더 명시적이라고 생각합니다.
public AccountUI()
{
InitializeComponent();
ChatButton.Click += btnChat_Click;
}
위와 같이 x:Name 으로 선언한 이름을 인스턴스로 하여 Click 이라는 맴버 변수에 함수 포인터를 + 해주는 것이라고 생각합니다. 저렇게 코드로도 위에서 봤던 xaml 과 같은 작동을 하도록 할 수 있습니다.
추가적으로 Keydown 이벤트는 KeyDown=”ChatBox_KeyDown” 과 같이 xaml 에서 추가하여 사용 할 수 있고 ChatButton.KeyDown += ChatBox_KeyDown; 과 같이 하여 사용 할 수 있습니다. 그리고 Keydown 의 함수는 구현은 아래와 같습니다.
/// <summary>
/// 채팅창에서 엔터를 눌렀을 때 버튼과 같은 효과를 내도록 한다.
/// </summary>
/// <param name=”sender”></param>
/// <param name=”e”></param>
private void ChatBox_KeyDown(object sender, KeyEventArgs e)
{
if (e.Key == Key.Enter)
{
btnChat_Click(sender, null);
}
}
5. Blend 툴로 만든 스토리보드를 코드로 제어하기
Blend 툴로 스토리보드를 이용하여 동작을 만들었다면 그것을 적절한 시기에 코드에서 실행을 해주거나 멈추거나 제어를 하고 싶을 때가 있을 것입니다.
LoginSuccess.Begin();
단순히 스토리보드이름.Begin(); 을 하면 실행이 됩니다. 다만, 코드에 따라서 Begin() 을 했음에도 동작이 실행되지 않는 경우가 있었습니다. UserControl 이 아닌 다른 class 함수에서 호출했을 때 그렇게 동작이 실행되지 않았습니다. 그래서 Dispatcher.BeginInvoke 함수를 이용하여 Begin() 을 호출하는 함수를 인자로 넣어주니 작동을 하였습니다. 그런 부분만 조금 조심한다면 사용하는 것 자체는 무척 쉽습니다. 그리고 스토리보드를 특정 타겟을 지정해서 동작하게 할 수 있습니다.
private void AnimateBall(Image onBall, Image offBall)
{
Page.Instance.FadeIn.Stop();
Storyboard.SetTarget(Page.Instance.FadeInAnimation, onBall);
Storyboard.SetTarget(Page.Instance.FadeOutAnimation, offBall);
Page.Instance.FadeIn.Begin();
}
{
Page.Instance.FadeIn.Stop();
Storyboard.SetTarget(Page.Instance.FadeInAnimation, onBall);
Storyboard.SetTarget(Page.Instance.FadeOutAnimation, offBall);
Page.Instance.FadeIn.Begin();
}
위와 같은 경우가 그 예제라고 할 수 있습니다. 이미지를 타겟으로 설정하여 애니메이션을 정지하고 재생할 수 있습니다.
위의 내용들은 실버라이트2 Beta2 를 기준으로 하고 있기 때문에 다른 버전에서는 문제가 있을 수 있습니다. 혹시 문제가 발생하면 버전을 확인해 주시길 바랍니다.
