Silverlight 2.0

IE8 에서 실버라잇 딥링크(Deep Link)와 브라우저 네비게이션을 지원

한누리 — Fri, 11 Jul 2008 12:00:32 +0900

기뿐 소식이 있어서 알립니다. 저는 IE8에 대해 특별한 관심이 없었습니다만, 아래의 글에서 언급한 것처럼 실버라잇에서 딥링크와 네비게이션을 지원할 수 있게 해준다는 군요. 원래는 Ajax에서 발생하는 문제를 해결하는 기능으로 개발되었는데, 동일한 문제가 노출되는 실버라잇까지 확장해서 지원하게 된다는 것 같습니다.
아래의 기사는 해당 기능을 지원하기 위하여 실버라잇 1.0에서 설정하는 방법에 대한 글이고, 실버라잇 2에 관한 내용은 다음에 다시 올린다는 내용입니다. 제일 마지막 부분에 보시면 Deep Link 가 어떤식으로 작동하는 지를 보여주는 링크가 있으니 확인해 보시길. 페이지를 넘기면 주소창에 해당 페이지의 링크주소가 자동 변경됩니다.

How IE8 Will Enables Silverlight Deep Linking and Browser Back/Forward Navigation

Published 10 July 08 04:29 PM | Michael S. Scherotter

One of new features in the next version of Internet Explorer (IE8) was created specifically for AJAX applications and can add significant functionality to Silverlight applications as well. Here is the description of the feature (from Better AJAX Development):

In IE8 mode, Internet Explorer treats window.location.hash updates like navigations and saves the previous document URL. The following actions occur as a result:

The previous URL, which may be from the previous hash fragment, will be updated in the Address bar, Back button and other browser components.
A “click” sound will play as if a traditional navigation occurred.
A new hashChanged event will fire.

In a Silverlight application, an issue that affect usability is that the Back/Forward navigation buttons are not used because all of the "paging" and navigation occurs in the context of a single page. This can be problematic because people are used to seeing their page history and navigating their page history. This new feature in IE8 can enable a Silverlight application to both add these pseudo page-views to the browser history and lets the user navigate among those page views and easily deep link to them. These techniques make the most sense for Silverlight applications that provide a full-page browser experience. To see it in action,take a look at pages from a Journal that I created from studying architecture in Europe in1992.

Here is how you would enable the functionality in your Silverlight 1 application:
Download and install the IE8 Beta
On the HTML page that your Silverlight application is hosted, add this meta tag to the <head> section:
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
In the startup code for the page, add an event handler to the document.body for the onhashchange event
document.body.onhashchange = OnHashChange
Implement the OnHashChanged event callback to programatically navigate to the page/view within the Silverlight application (only if the hash changed happened via back/forth & history navigation). Here's how I implemented the OnHashChange handler for my Page Turn sample:
NavigationManager.prototype.OnHashChange = function()
{
  var journalPage = this.nextOddPage - 2;
  var hashPage = Number(document.location.hash.substr(5));
    
  if (hashPage != journalPage)
  {
    this.jumpToPage(hashPage);
  }
}
In your Silverlight code, when the page/view of your application changes, update the document.location.hash value accordingly. In the Page View sample, I adapted it to use hashes like #Page00, #Page01, #Page12 for each page. You should also update the document.title here so that the page history title shows useful information about the state of the application. Updating the document.location.hash will also update the URL in the browser. This basically enables a "deep link" to the page/view in the Silverlight application. An important aspect of the code to note is that if you update the window.location.hash and the document.title, you should update the hash before updating the title.
In my page turn sample app, this TrackPage() function is called whenever the page changes:
NavigationManager.prototype.TrackPage = function()
{
  var number = this.nextOddPage - 2;
  var hash = "";
  var title = this.Title;
    
  if (number == 1)
  {
    hash = "Page" + getTwoDigitInt(number);
    title = this.Title + " Page " + String(number);
  }
  else if(number > 1)
  {
    hash = "Page" + getTwoDigitInt(number);
    title = this.Title + " Pages " + String(number-1)
          + " & " + String(number);
  }
  window.location.hash = hash;
  document.title = title;
  TrackEvent(hash);
}
Add code to your application so that if a document.location.hash value is specified, the starting application view/page will reflect that state. In the page view sample, I added the following code to the PageTurn.prototype.downloadComplete event handler:
this.navigationManager.jumpToPage(pageNumber);
Once you have done these steps, your Silverlight 1 application can take better advantage of the IE8 browser capabilities and provide an easy way for your users to navigate and share (with deep links) the application. To see a deep link in action, go to this page and download the source code here. My next article will show how to do the same thing with a Silverlight 2 application.

Filed under: Silverlight, Code Gallery, IE8

Synergist : How IE8 Will Enables Silverlight Deep Linking and Browser Back/Forward Navigation

실버라잇2 베타2 설치.

한누리 — Sun, 8 Jun 2008 23:59:59 +0900

원래 TechEd 행사에 맞춰서 공개할려고 했는데, 갑자기 치명적인 버그가 발견되어, 수정해서 주말에 발표한다길레, 금요일에 베타1에 대한 것 다 지우고 기다렸는데, 헛짓했다. 어쩐일로 ms가 친절하게도 silverlight_chainer.exe 라는 파일에 기존 것 찾아서 지워주고 새 버전으로 업그레이드까지 시켜주게 만들어놨다.
그런데 이게 실행해보니 설치중에 문제가 생겨서 중지가 되었다. 난 내가 미리 지워서 문제가 된줄 알았으나 설치와 관련된 도큐먼트를 찾아보니 그런건 아닌 것으로 보였다. 그래서 좀더 자료를 읽어보니 설치시 문제가되는 경우는 수동으로 KB949325 를 제거하라고 한다. 그런데 제어판에가서 설치된 프로그램 목록을 찾아보니 찾는게 안보인다. 그래서, 몇 가지 삽질을 한 후에 겨우 KB949325가 있는 곳을 발견할 수 있었다.
글쎄, 내가 비스타 RTM 나올때부터 사용했는데 어쩐지 HotFix들이 하나도 안보이더만, 이것만 따로 모아 놓고 있었던 것이었다, 사실 이것들까지 설치목록에 우루루 몰려 나올때를 생각하면 아주 잘 한짓인데 나만 모르고 있었던건가 싶다. 혹시 나같이 당황하시는 분이 계실까봐 이 글을 쓰니 참고하시길. 내가 영문 비스타를 쓰고 있고 해서 영문판용 그림으로 링크를 걸었다. 왼쪽 상단의 "View installed updates"를 누르면 된다.
실버라잇2 베타2를 설치할려면 Silverlight 2 Beta 2 Launches를, 나머지 설치시 문제와 관련된 내용은 다음 링크를 참고하시길. Upgrading to Silverlight Tools Beta 2 and Visual Studio 2008 SP1 Beta - BradleyB's WebLog

Dynamic DataGrid II

한누리 — Mon, 19 May 2008 19:46:35 +0900

어제 동적으로 DataGrid에 항목을 추가하는 예제를 작성했는데요, 거기서는 INotifyCollectionChanged가 자체적으로 구현되어 있는 ObservableCollection 을 사용하였습니다.
그러나 이 ObservableCollection은 사용가능한 기능이 우리가 가장 많이 사용하는 List에 비해서는 제한적입니다. 예를 들어 Sort가 필요하다면 List를 사용해야 할 것입니다.
그래서, List가 제공하는 기능을 활용하면서 one-way 바인딩을 통한 동적인 DadaGrid 바운딩이 가능하도록 구현하려고 시도해 보았습니다. 완벽한 구현은 아니지만 참고할 만한 정도는 될것입니다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.Specialized;

namespace SilverlightTwoDatagrid2
{
public partial class Page : UserControl
{
  MyList<string> list;

  public Page()
  {
    InitializeComponent();

    dgOld.ItemsSource = "One Two Three Four Five Six".Split();
    btAdd.Click += new RoutedEventHandler(btAdd_Click);

    list = new MyList<string>();
    list.Add("Hello World!");
    dgNew.ItemsSource = list;
  }

  void btAdd_Click(object sender, RoutedEventArgs e)
  {
    list.Add(dgOld.SelectedItem.ToString());
  }
}

public class MyList<T> : List<T>, INotifyCollectionChanged
{
  public event NotifyCollectionChangedEventHandler CollectionChanged;

  protected virtual void OnCollectionChanged
      (NotifyCollectionChangedEventArgs e)
  {
    if (CollectionChanged != null)
    {
      CollectionChanged(this, e);
    }
  }

  public new void Add(T item)
  {
    base.Add(item);
    OnCollectionChanged(new NotifyCollectionChangedEventArgs
      (NotifyCollectionChangedAction.Reset));
 // 정상적으로는 이벤트 발생시 Add Action을 전송해야 하는데,
 // 위치조정이 어려워 Reset Action을 대신 전송했으니 차후에
 // 실전 사용시는 적절히 수정해서 사용해야 할 필요가 있습니다.
 // OnCollectionChanged((new NotifyCollectionChangedEventArgs
 //   (NotifyCollectionChangedAction.Add, o, 0));
  }

  public new void Remove(T item)
  {
    base.Remove(item);
    OnCollectionChanged(new NotifyCollectionChangedEventArgs
      (NotifyCollectionChangedAction.Reset));
 // 
 // OnCollectionChanged(new NotifyCollectionChangedEventArgs
 //   (NotifyCollectionChangedAction.Remove, o, 0));
  }
}
}

소스파일첨부:

SilverlightTwoDatagrid2.zip

Dynamic DataGrid (ObservableCollection, INotifyCollectionChanged)

한누리 — Sun, 18 May 2008 19:42:15 +0900

아마도 다음 달 초까지는 실버라잇2 베타2가 발표될 것 같습니다. 새로운 기능의 추가는 별로 기대하지 않고 있습니다만, 그래도 베타2에 대해 여전히 기다려지는 건 어쩔수 없네요.

그동안 글을 쓰지 못한 이유중 하나는 갑자기 눈이 안좋아져서 컴퓨터 사용시간을 줄이느라 그만큼 공부도 소흘해져서 입니다. 여러분도 건강에 신경 쓰시기 바랍니다.

이 번 글에서는 동적인 DataGrid의 구현에 대한 것으로, 위의 DataGrid에서 선택된 행의 데이터를 아래 DataGrid에 추가시켜주는 것으로, 자동적으로 add(), remove() 한 것을 반영시킬려면 INotifyCollectionChanged 를 구현해주어야 합니다.

부연 설명을 하자면, binding의 방식은 only once, one-way, two-way 가 있는데, only once는 binding 시를 기준으로 하는 것이고, one-way 는 source에 변화가 생기면 즉시 자동적으로 target에 반영을 시켜주는 방식입니다.

one-way 가 작동하기 위해서는 Collection type에 INotifyCollectionChanged를 구현해주어야 하는데, 이런 번거러움을 제거하기 위해서, 실버라잇에서는 INotifyCollectionChanged가 구현되어 있는 Collection을 제공해주고 있는데 이것이 바로 ObservableCollection입니다.

-------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace SilverlightTwoDatagrid
{
public partial class Page : UserControl
{
ObservableCollection<string> col;

public Page()
{
InitializeComponent();

dgOld.ItemsSource = "One Two Three Four Five Six".Split();
btAdd.Click += new RoutedEventHandler(btAdd_Click);

col = new ObservableCollection<string>();
col.Add("Hello World!");
dgNew.ItemsSource = col;
}

void btAdd_Click(object sender, RoutedEventArgs e)
{
col.Add(dgOld.SelectedItem.ToString());

// throw new NotImplementedException();
}
}
}

예제소스파일첨부:

SilverlightTwoDatagrid.zip

실버라잇 2 베타를 기다리며.

한누리 — Mon, 3 Mar 2008 14:45:17 +0900

실버라잇 2 베타를 기다리며, 뭔가 한마디는 언급하고 넘어가야 한다는 생각이었는데 게으름을 피우다가 이제야 한마디 남기려고 합니다. 그냥 편하게 읽어주세요.

ms는 "개발자 경험(?)"을 중요하게 생각하는듯 합니다. asp.net에서의 webform이라는 개념도 winform의 개발 경험을 그대로 웹으로 옮기려고 한 것이지요. WPF의 개발자들을 RIA영역으로 끌고 갈려는 노력이 silverlight 2 일겁니다. 우리와는 전혀 다른 환경인 미국은 ms와 관련된 독립 소프트웨어 개발사들이 엄청나게 많은 것으로 알고 있습니다. 이들이 기업용 App 개발을 맡와 왔을건데, 이들을 거르리고 RIA시장에 입성하겠다는 전략을 펼치는 것은 어쩌면 당연한 행보일걸로 보입니다. ms가 최근에 강조하는 것은 자신들은 플랫폼을 제공하는 회사라는 것입니다. 자신들이 제공하는 플랫폼상에서 개발사들이 솔루션을 개발하게되는 생태계를 구축하려는 전략은 아주 성공적이고 바람직하다고 보고 있습니다.

그런데 모든걸 성공적으로 이끌어 온 듯한 ms가 현시점에서 갖는 고민은 어떤게 있을까요? 우선 수익의 대부분을 차지하는 윈도와 오피스 시장에 대한 수익성의 한계가 아닐까 합니다. 이 두 가지 스테디셀러로 버텨오긴 했지만, 앞으로의 진로는 그리 탄탄해 보이지 않는다는 것이 공통된 시각인 것 같습니다. 그동안 미디어, 게임기, 웹포털서비스, 검색엔진서비스 등 사업 다각화에 많은 시도는 있었지만 성공한 예는 없는듯 합니다.

윈도 NT개발을 시작으로 기업시장 진출에 성공하면서, 안정적인 시장을 확보하긴 했지만, 이는 이미 성숙된 시장으로 더이상의 큰 발전을 기대하기는 힘들거고 이미 마켓쉐어 경쟁의 단계로 들어갔다고 봐야할 것입니다. 또한 독점에 대한 견제와 규제도 점점더 커져가는 것 같습니다. 이런 외부적인 환경에 제대로 대처하지 못할 경우 매우 위험한 상황에 처하게 될지도 모르는 일입니다.

그렇다면 이를 극복하기 위해서는 당연히 모험을 감수하고서라도 새로운 변화에 대한 수용과 이를 넘어서 새로운 진로의 모색이 필수적일 것입니다. 최근의 변화라면 사용자들의 활동이 거의 웹상에서 이루어지고 있고, 주로 컨텐트의 생산과 소비활동이 주를 이룬다는 것입니다. 그러면서, 주로 온라인 광고를 중심으로, 이 쪽 시장이 엄청나게 커져가고 있다는 것입니다.

따라서, 기존의 기업시장을 지키고, 일반 사용자를 위한 서비스 시장에 새로이 진출해야만 하는 것이 ms의 현재의 과제라고 봐야 할 것입니다. 이 두 가지를 만족시키기 위해 제공하는 것이 바로 실버라잇 + live.com 플랫폼이라고 봅니다. 즉 Software+Service 전략이죠. 물론 ms의 S+S은 원래 온라인 서비스의 장점을 수용하면서도, 윈도나 오피스 같은 제품의 판매를 지속시키 위한 Desktop App + Service 전략이겠지만 말입니다.

ms는 2000년을 넘어오면서, 닷넷 플렛폼으로 이행을 추진하면서 처음부터 가져온 패키지 판매와 온라인 서비스로의 유료구독간의 고민을 최근에서야 두 가지를 절충한 S+S전략으로 결심한듯합니다. 그렇지만, 이것은 자신들의 캐쉬카우인 윈도와 오피스를 지키기 위한 전략이며, 새로운 일반 사용자용 웹서비스를 위해서는 실버라잇 + live.com 플랫폼이 절대로 필요한 것이 아닌가 싶습니다.

따라서, ms 플랫폼상에서 새로이 웹서비스 시장에 진출할려고 하는 경우라면, 실버라잇과 live.com 서비스와 자신의 독자적인 웹서비스가 적절히 조합됨으로써, 새로운 서비스를 제공할 수 있을 것으로 봅니다.

실버라잇 2 미리보기.

한누리 — Mon, 25 Feb 2008 16:19:29 +0900

드디어 실버라잇2 베타의 정체가 조금씩 드러나고 있습니다. 자세한 내용은 3월 초에 MIX에서 발표가 되겠지만, 개발을 총지휘하는 스캇 구쓰리의 블로그에 실버라잇 2에 대한 글이 지난 주말에 올라왔습니다. 자세한 내용은 직접 방문하시면 될 것입니다.

WPF와 거의 유사하다는 말로는 부족하고, 완전한 WPF의 Subset이라는 표현이 많은 의미를 전달해 준다고 봅니다. 따라서, 당장 WPF에 대한 공부를 하여야 할 것 같습니다. 그리고, 구쓰리의 게시물에 있는 코멘트중에 구쓰리가 대답한 내용이 참고할 만한 정보들이 많이 있으니, 관심이 있는분들은 죽 훑어보세요.

아래는 참고할만한 링크들을 모아 보았습니다.
첫째는 구쓰리의 글이고,
둘째는 구쓰리의 데모 프로젝트를 보고 정리한 내용들이고,
셋째는 구쓰리의 데모 프로젝트를 보고 정리한 컨트롤들의 구조이며,
네째는 실버라잇 2를 위해 당장 참고삼아 볼만한 WPF의 문서링크들이고,
나머지는 공도님의 관련글들입니다.

1. First Look at Silverlight 2 - ScottGu's Blog

2. My notes from the First Look at Silverlight 2 | Adam Kinney, Silverlight Surfer

3. About Silverlight 2 Beta 1 Controls

4. Michael Sync » (Links) - Silverlight 2/WPF Tutorials

5. Silverlight 2와 퍼가기(유령회사 공도소프트)

6. WPF에 가까워지는 Silverlight(유령회사 공도소프트)

추가: 한국마이크로소프트 직원의 관련 게시물.

bkchung's WebLog : Silverlight 2 엿보기(First Look)

백터그래픽작업시 고려할만한 프로그램 소개

한누리 — Tue, 15 Jan 2008 19:55:29 +0900

두 가지를 소개해 드리려고 합니다.

1. 저는 디자인너가 아니기 때문에 그래픽에 관해서는 거의 아는게 없을 뿐더러 아트적인 것이라고는 전혀 찾아볼 수 없는 사람으로 이런걸 소개하려니 다 아는 이야기를 하는가 싶기도 하고, 잘못된 정보를 전할까 싶기도해서 좀 머쓱하군요.
90년대 중반에 디자이너들은 대부분 맥에서 일러스트레이터라는 프로그램을 사용했으며, PC에서는 코럴드로우라는 프로그램이 나오면서 백터그래픽에 대한 관심이 고조되었었습니다.
90년대 후반에 가면서 인터넷의 웹문서 제작이 일반화되면서 이미지그래픽용 프로그램의 사용이 압도적으로 주류를 이루게되어서 인지, 특히 코럴드로우라는 프로그램은 거의 존재감이 없어진듯합니다. 물론 일러스트레이터가 PC에서도 사용가능해진 영향도 크겠지만요. 이렇게 벡터그래픽을 위한 편집프로그램은 그 중요성이 거의 잊혀겨 가는가 싶었는데, 최근에 실버라잇이 관심을 받으면서 이제 웹에서도 택터그래픽을 위한 편집프로그램의 필요성이 증대될거라 봅니다.
실버라잇에 사용되는 백터그래픽을 작업하기 위해서는 익스프레션 디자이너(Designer)나 블랜드(Blend)를 사용합니다. 아마도 기존의 디자이너들은 일러스트레이터(Illustrator)를 사용하시겠죠. 그런데 이들은 상용 프로그램이기도 하고, 또 다른 선택은 없을까하고 생각하시는 분들이 계시다면 Inkspace 라는 오픈소스 백터그래픽 에디터를 고려해 보실 수도 있을 것 같아서 소개드립니다. 조만간 xaml로 export하는 기능이 구현이 된다는 소식입니다.
이 Inkspace는 앞에서 언급한대로 Illustrator, CorelDraw 와 유사한 기능을 하는 프로그램으로 W3C의 표준 백터 그래픽 포멧인 SVG을 기본으로 채택하고 있습니다.

2. 컴퓨터 비젼이란 분야에서는 영상을 해석해서 필요한 정보를 얻어야 하는데, 이를 위해 반드시 거쳐야 하는 과정이 있습니다. 그게 바로 윤곽선을 추출하는 과정인데요. 이게 잘 되어야 이후의 과정에서 좀더 정확하고, 많은 정보를 획득할 수 있으므로 절대적으로 중요한 분야라 할 수 있겠습니다.
이와 매우 유사한 기술이 사용되는 분야가 이미지 그래픽을 백터화시키는 작업 같습니다. 바로 이렇게 기존의 이미지를 백터화시키는 Image Tracing 작업을 웹상에서 가능하도록 하는 서비스인 VectorMagic 을 소개해드리려고 합니다. 스탠포드대학의 인공지능 연구실에서 개발해서 서비스하는 것으로 사용법이 단순하고 결과도 기존의 상용프로그램에서 번들로 제공되는 것에 비교해도 결코 뒤지지 않는 우수한 서비스 인걸로 이야기 되는군요. 제가 앞서 컴퓨터비전을 언급한 이유는 이 벡터매직이라는 서비스에 사용된 기술이 아마도 컴퓨터비전에서 사용되는 기술과의 연관성이 있을 것으로 추측이 되어서 입니다.
일러스트레이터와 코럴드로우에 이런 기능이 있다고 합니다. 그리고 Inkspace도 이 기능이 포함되어 있다고 하네요. 그런데 백터매직은 웹상으로 서비스된다는 차이점이 있습니다. 프로그램을 구입하거나 설치할 필요가 없다는 것이죠. 사용법도 위저드식으로 되어서 두 세 가지 단계만 거치면 바로 결과가 나오므로 아주 쉬우며 결과도 만족스럽습니다. 또한 자신의 사진을 가지고 케리커쳐를 만드는데 응용할 수도 있을 것입니다. 한 번 도전해보세요.(Let's give it a try.)

관련 링크들
Inkscape to support XAML export
Impressive Bitmap Vectorization with VectorMagic
VectorMagic Review
VectorMagic

내용추가:
SVG를 XAML로 변환시키는 방법을 빼먹었네요.
구글에서 SVG2XAML으로 찾으면 몇 가지가 나올겁니다.

이 tracing이라는 것이 해보니, 파일 크기가 원 이미지보다 커지는 경향이 있군요. 좀 아쉬운 부분이네요.

오픈소스 실버라잇 2.0(1.1) 컨트롤과 사용법 모음

한누리 — Wed, 9 Jan 2008 23:28:34 +0900

공개용 실버라잇2.0 컨트롤들을 정리해서 소개하고 그 사용법과 예제 코드들을 추가해서 제공하고 있네요. 지금 당장 실버라잇을 통해서 작업을 할려는 분들에게 도움이 될 것 같아 소개해 드립니다. 전체 분량의 압박 때문에 도입부만 번역을 하였지만, 읽으시는 데 크게 불편하지는 않을 것으로 보입니다. 그리고, 결론 부분에 보면 곧 몇 가지를 추가한다고 했으니 확인해 보세요.

OpenSource Silverlight 2.0 Controls and how to use them

9 Jan, 2008 Silverlight

이 글에서 언급된 것처럼, 실버라잇 2.0 베타는 1사분기에 발표될 것이며, 많은 개선된 기능들과 textbox, button 등과 같은 UI 컨트롤들이 포함되어 나올 것이다. 그러나, 곧 나오지는 않을 것이다. 우리는 아마도 이 것을 얻기 위해서 좀 더 기다려야 할 필요가 있다. 그런데, 지금 실버라잇 알파용 애플리케이션을 개발하기를 원하는 경우는 어떻게 할 것인가? 아마도 직접 커스텀 실버라잇 컨트롤을 만들거나, 다른 개발자가 만들어 놓은 오픈소스 컨트롤을 찾아야 될지 모르겠다. 그래서, 이 작업을 지금 내가 하고 있는 중이다. 내 블로그 구독자들에게 이 글을 통해서 내가 만들었거나 찾아서 테스트까지 한 컨트롤들을 공유할 것이다. 이 작업이 여러분의 시간을 많이 절약해 주게되길 바란다.

사람들이 각기 다른 버전의 실버라잇을 쓰기 때문에 일부 컨트롤에서 발생된 약간의 문제들이 존재하기 때문에, 내 샘플의 모든 커트롤들에 대한 소스코드를 첨부했다. 이들에 대해서는 모두 수정해서 테스트한후 업로드했다. 그렇지만, 여러분들은 대부분의 공로를 제공한 원 저작자에게 감사해야 할것이며, 모든 공은 그들에게 부여되어야 한다.

또 한 가지 더 말해두어야 할 것은, 이 들이 아직 초기 상태 이기 때문에 이들 컨트롤들에 대하여 너무 많은 기대를 해서는 안된다는 것이다. 일부는 약간의 버그가 있을 수 있을 것이고, 다른 일부는 사용이 쉽지 않을 수도 거나, 또 다른 일부는 지원 기능이 부족할 수 있을 것이다. 어쨋든, 최소한 컨트롤에서 무언가를 배우게되고, 자신만의 컨트롤을 위한 영감을 얻을 수 있게 되었으면 좋겠다.

Download : Demo Silverlight project and all controls sourcecode

Contents

Freshy Toolbar
Vivekdalvi’s Toolbar
Silverlight ToolBar DotNetNuke site
Silverlight 2.0 Alpha SDK (Button Control)
Silverlight XP-style Button
Silverlight 2.0 Alpha SDK (Slider Control)
Silverlight 2.0 Alpha SDK (ScrollViewer Control)
Silverlight 2.0 Alpha SDK (Listbox Control)
Vivekdalvi’s Progressbar
Vivekdalvi’s Hyperlink
Silverlight Combobox Control
Silverlight Checkbox Control

Freshy Toolbar

This is the toolbar control that I created based on Vivekdalvi’s toolbar. After downloading the sample from this article, You can find the sourcecode of this control under Toolbars folder of SilverlightUIControls project (attached sample).

How to use it?
Add the SilverlightUIControls project in your solution file.
Add the code below in the base Canvas of your xaml file (e.g. page.xaml) that you want to load (not silverlight user control)
view plain copy to clipboard print ?

xmlns:controls="clr-namespace:Silverlight.Samples.Controls;assembly=ClientBin/Silverlight.Samples.Controls.dll"
xmlns:controls="clr-namespace:Silverlight.Samples.Controls;assembly=ClientBin/Silverlight.Samples.Controls.dll"
Add the code below in xaml file where you want to show that toolbar. (Note: You probably need to adjust the left, top, width and height properties of toolbar control to meet your need. )
view plain copy to clipboard print ?

<controls:FreshyToolbar x:Name="Freshytoolbar"
Width="500" Height="31" Canvas.Left="20" Canvas.Top="70"
/>
<controls:FreshyToolbar x:Name="Freshytoolbar"
Width="500" Height="31"  Canvas.Left="20" Canvas.Top="70"
/>
The following code is for adding the toolbar items to the toolbar.
view plain copy to clipboard print ?

FreshyToolbar freshytoolbar = (FreshyToolbar)this.FindName("Freshytoolbar");if (freshytoolbar != null) {
freshytoolbar.ToolBarCollection.Add(new FreshyToolbarButton("Home", new Uri("http://michaelsync.net")));
freshytoolbar.ToolBarCollection.Add(new FreshyToolbarButton("About", new Uri("http://michaelsync.net/about-2")));
freshytoolbar.ToolBarCollection.Add(new FreshyToolbarButton("Guest", new Uri("http://michaelsync.net/guest-book")));
}
FreshyToolbar freshytoolbar = (FreshyToolbar)this.FindName("Freshytoolbar");if (freshytoolbar != null) {
freshytoolbar.ToolBarCollection.Add(new FreshyToolbarButton("Home", new Uri("http://michaelsync.net")));
freshytoolbar.ToolBarCollection.Add(new FreshyToolbarButton("About", new Uri("http://michaelsync.net/about-2")));
freshytoolbar.ToolBarCollection.Add(new FreshyToolbarButton("Guest", new Uri("http://michaelsync.net/guest-book")));
}
Vivekdalvi’s Toolbar

This toolbar is created by Vivekdalvi from Microsoft. (I’m not sure whether this is his real name or not. I found that name with his photo in one comment so let me call him like that.)

It looks a lit bit strange. I’m not so sure why he created like that. But I’m sure that if you read the sourcecode, you will definitely get the way for inspiring your own custom toolbar or menu.

How to use it?
Follow step 1 to 3 from Freshy Toolbar sample
Put the line below in xaml file that you want the control to show.
view plain copy to clipboard print ?

<controls:Toolbar x:Name="toolbar" Canvas.Top="190" Canvas.Left="20" Height="50" Width="500"/>
<controls:Toolbar x:Name="toolbar" Canvas.Top="190" Canvas.Left="20" Height="50" Width="500"/>
The following code is for adding toolitems to the toolbar.
view plain copy to clipboard print ?

Toolbar _toolbar = this.FindName("toolbar") as Toolbar;for (int i = 0; i < 8; i++) {
ToolbarButton tb = new ToolbarButton();
string uri = "images/image" + (i + 1).ToString() + ".jpg";
tb.Image = new Uri(uri, UriKind.Relative);
tb.ToolTip = uri;
//tb.Click += new EventHandler<EventArgs>(tb_Click);
_toolbar.ToolBarCollection.Add(tb);
}
Toolbar _toolbar = this.FindName("toolbar") as Toolbar;for (int i = 0; i < 8; i++) {
ToolbarButton tb = new ToolbarButton();
string uri = "images/image" + (i + 1).ToString() + ".jpg";
tb.Image = new Uri(uri, UriKind.Relative);
tb.ToolTip = uri;
//tb.Click += new EventHandler<EventArgs>(tb_Click);
_toolbar.ToolBarCollection.Add(tb);
}
Note: Here is the instruction from original author.

Silverlight ToolBar DotNetNuke site

This is the toolbar control for DotNetNuke users.

Here is the original post for that control. As I’m not using DotNetNike, I didn’t add the sourcecode in my sample file. So, you will have to go and read the instruction about that toolbar.

Silverlight 2.0 Alpha SDK (Button Control)

This button control (including sourcecode) is released with Silverlight 2.0 Alpha SDK. It doesn’t look good that much but if you read the sourcecode then you will get the idea how to create your own button control for Silverlight application.

How to use it?
Follow step 1 to 3 from Freshy Toolbar sample
Paste the following code in XAML file.
view plain copy to clipboard print ?

<controls:Button Canvas.Top="480" Canvas.Left="20" Text="Button1" />
<controls:Button Canvas.Top="480" Canvas.Left="150" Text="Button2" />
<controls:Button Canvas.Top="480" Canvas.Left="280" Text="Button3" />
<controls:Button Canvas.Top="480" Canvas.Left="20" Text="Button1" />
<controls:Button Canvas.Top="480" Canvas.Left="150" Text="Button2" />
<controls:Button Canvas.Top="480" Canvas.Left="280" Text="Button3" />
Run the application. That’s all.
Silverlight XP-style Button

This button is available to download from this link. It looks exactly like XP button. But there are a few issues with this button. (e.g: Width or height can’t be increased. or etc) For the time being, the sourcecode is not available but I asked the original author of this control. He said that he is implementing more features for that control and he will write the step-by-step guide for making this control in his blog. (Hey The Reddest! I’m waiting your article. )

How to use it?

You can read this article “How to use the custom control in Silverlight?” if you want to know how to use that control in your own project.

Silverlight 2.0 Alpha SDK (Slider Control)

This is the horizontal slider bar that come along with Silverlight 2.0 Alpha SDK. You can easily change the orientation at runtime. In my example, I used the sliderbar control with image control. If you move the slider then the opacity property of image will be changed. There is very important notes as below that you must read in that sample.

A slider needs to be provided a Range in order to be functional and show up on screen. Currently you can only do this in code-behind, not in XAML markup because there is no type converter support.

BTW, that photo looks cool, isn’t it? (Thanks to Phitar for that photo.)

How to use it?
Follow step 1 to 3 from Freshy Toolbar sample
Add the code in XAML file
view plain copy to clipboard print ?

<controls:Slider x:Name="hSlider" Canvas.Top="580" Canvas.Left="140" />
<controls:Slider x:Name="hSlider" Canvas.Top="580" Canvas.Left="140"  />
Specify the Range from cs file.
view plain copy to clipboard print ?

hSlider.Range = new ValueRange(0, 11);
hSlider.Value = 10;
//vSlider.Orientation = Orientation.Vertical;
hSlider.ValueChanged += new EventHandler(hSlider_ValueChanged);void hSlider_ValueChanged(object sender, EventArgs e) {}
hSlider.Range = new ValueRange(0, 11);
hSlider.Value = 10;
//vSlider.Orientation = Orientation.Vertical;
hSlider.ValueChanged += new EventHandler(hSlider_ValueChanged);void hSlider_ValueChanged(object sender, EventArgs e) {}
Silverlight 2.0 Alpha SDK (ScrollViewer Control)

This is the Scrollviewer control for Silverlight application. This control is shipped with Sliverlight 2.0 Alpha SDK. What I did in my sample is that I created the big canvas with image in code. Then, add that canvas to the content property of ScrollViewer control. (I think there are some issues with calculating the height and width of canvas. )

Note: Thanks to lorna87 for this photo.

How to use it?
Follow step 1 to 3 from Freshy Toolbar sample
Add the scrollbar in XAML file
view plain copy to clipboard print ?

<controls:ScrollViewer x:Name="scrollViewer1" ScrollableHeight="60" ScrollableWidth="2"
Width="300" Height="300" Canvas.Left="20" Canvas.Top="950" />
<controls:ScrollViewer x:Name="scrollViewer1" ScrollableHeight="60" ScrollableWidth="2"
Width="300" Height="300" Canvas.Left="20" Canvas.Top="950" />
then, you have to set something that you want to show in ScrollViewer to the content property of Scrollviewer. For the time being, you won’t be able to place any control inside the ScrollViewer tag. In order to solve this problem, there are two wordaround so far. 1) You can create the base canvas in XAML view and place all controls that you want in that canvas. Then, remove that canvas from the page at runtime and set it to the content of Scrollviewer control. This is the way which is used in SDK sample. 2) If you don’t want to do that, you can create all controls that you want on the fly. then, set it to the content of Scrollviewer. This is the way that I used in my sample. Actually, those two workarounds are so similar. So, you can choose either way.In my example, the following code is written in PageLoad event.
view plain copy to clipboard print ?

Canvas canvasForScrollViewer = new Canvas();
Image _img = new Image();
canvasForScrollViewer.Width = 1200;
canvasForScrollViewer.Height = 1200;
_img.Source = new Uri("images/waferfall.jpg",UriKind.Relative);
canvasForScrollViewer.Children.Add(_img);
scrollViewer1.Content = canvasForScrollViewer;
Canvas canvasForScrollViewer = new Canvas();
Image _img = new Image();
canvasForScrollViewer.Width = 1200;
canvasForScrollViewer.Height = 1200;
_img.Source = new Uri("images/waferfall.jpg",UriKind.Relative);
canvasForScrollViewer.Children.Add(_img);
scrollViewer1.Content = canvasForScrollViewer;
Silverlight 2.0 Alpha SDK (Listbox Control)

This control is shipped with Silverlight Alpha SDK. It doesn’t look nice in original so that I made a few minor changes and make it look like that below.

How to use it?
Follow step 1 to 3 from Freshy Toolbar sample
Add the listbox control in XAML file.
view plain copy to clipboard print ?

<controls:ListBox x:Name="listBox" Canvas.Top="960" Canvas.Left="400" Width="200" Height="249"/>
<controls:ListBox x:Name="listBox" Canvas.Top="960" Canvas.Left="400"  Width="200" Height="249"/>
Write the code in Constructor
view plain copy to clipboard print ?

for ( int i = 0; i < 15; i++ )
{
listBox.Items.Add (ListItem (i));
}
listBox.UpdateItems ();
for ( int i = 0; i < 15; i++ )
{
listBox.Items.Add (ListItem (i));
}
listBox.UpdateItems ();
Add the following function
view plain copy to clipboard print ?

static int colorCounter = 50;
// The ListItem method creates and returns one FrameworkElement
// Each call results in an element with a different background color
// then the previous
private FrameworkElement ListItem(int i) {
// our FrameworkElement will be a Canvas
Canvas canvas = new Canvas();
canvas.Width = 200;
canvas.Height = 31;// in it we add a rectangle...
Rectangle rect = new Rectangle();
Color color = Color.FromArgb(0xff, (byte)(colorCounter % 256),
(byte)((colorCounter + 50) % 256),
(byte)((colorCounter + 120) % 256));rect.StrokeThickness = 1;
rect.Stroke = new SolidColorBrush (Color.FromArgb (0xFF, 0x84, 0x7E, 0x7E));
rect.Width = 200;
rect.Height = 31;
rect.SetValue(Canvas.TopProperty, 0);
rect.SetValue(Canvas.LeftProperty, 0);
colorCounter += 21;
canvas.Children.Add(rect);//... and some text
TextBlock tb = new TextBlock();
tb.Text = "Item" + i;
tb.Height = 21;

tb.SetValue(Canvas.TopProperty, 6);
tb.SetValue(Canvas.LeftProperty, 50);
canvas.Children.Add(tb);

return canvas;

}
static int colorCounter = 50;
// The ListItem method creates and returns one FrameworkElement
// Each call results in an element with a different background color
// then the previous
private FrameworkElement ListItem(int i) {
// our FrameworkElement will be a Canvas
Canvas canvas = new Canvas();
canvas.Width = 200;
canvas.Height = 31;// in it we add a rectangle...
Rectangle rect = new Rectangle();
Color color = Color.FromArgb(0xff, (byte)(colorCounter % 256),
(byte)((colorCounter + 50) % 256),
(byte)((colorCounter + 120) % 256));rect.StrokeThickness = 1;
rect.Stroke = new SolidColorBrush (Color.FromArgb (0xFF, 0x84, 0x7E, 0x7E));
rect.Width = 200;
rect.Height = 31;
rect.SetValue(Canvas.TopProperty, 0);
rect.SetValue(Canvas.LeftProperty, 0);
colorCounter += 21;
canvas.Children.Add(rect);//... and some text
TextBlock tb = new TextBlock();
tb.Text = "Item" + i;
tb.Height = 21;

tb.SetValue(Canvas.TopProperty, 6);
tb.SetValue(Canvas.LeftProperty, 50);
canvas.Children.Add(tb);

return canvas;

}
Vivekdalvi’s Progressbar

This is another control created by Vivekdalvi.

I fixed two issues in that control. If you run my example, you can click one of those buttons to change the progress color.

Vivekdalvi’s Hyperlink

This is also another control created by Vivekdalvi. I used it in my previous article.

Silverlight Combobox Control

I found this control from this link. The original control is written in Javascript and XAML. I changed that control to Silverlight 2.0 User control.

There are two issues in that controls. First, it won’t show the scrollbar in Itemlist. Second, if you click somewhere in Canvas while the combobox is opening, it won’t close. As I said earlier, you will get the idea about how to create combobox in Siliverlight. Plus, you will be able to use that control in your project with a few minor modification.

How to use it?
You can bind the combobox with list<string> as below.
view plain copy to clipboard print ?

List<string> data = new List<string>();
data.Add ("Michael Sync");
data.Add ("Michelle");
data.Add ("Lilian");
data.Add ("Julia");
data.Add ("Alice");

combobox1.DataSource = data;
combobox1.DataBind ();
List<string> data = new List<string>();
data.Add ("Michael Sync");
data.Add ("Michelle");
data.Add ("Lilian");
data.Add ("Julia");
data.Add ("Alice");

combobox1.DataSource = data;
combobox1.DataBind ();
Silverlight Checkbox Control

This is the modified version of Checkbox control created by one MVP. I converted this control to Silverlight 2.0 user control and added one feature which you can select to show “cross” (middle one) or “mark” (last one) in the checkbox.

I think it would be great if we can some animations for hovering.

Conclusion

That’s all for now. Three more controls (Textbox, Radiobutton and Chart) will be coming soon. (Hey don’t forget to subscribe my feed.) Even though those controls are not so perfect, you will be able to use them in your silverlight project with very minium efforts before Microsoft release the Silverlight 2.0 beta. If you have cool Silverlight 2.0 controls (not Javascript), please let me know. If you found some issues and want to contribute the fixes that you made, please contact me. I’m really appreciate it. Thanks a lot for visiting my blog.

Michael Sync » OpenSource Silverlight 2.0 Controls and how to use them

Silverlight Spy in 2008

한누리 — Thu, 3 Jan 2008 00:00:10 +0900

실버라잇 스파이가 실버라잇1.0만 지원되었었는데, 앞으로 실버라잇2.0(1.1)도 지원하도록 작업을 하겠답니다. 이게 사용해보니 재미있군요. 실버라잇1.0으로 구성된 웹페이지에 접속하면 어떻게 구성되어 있는지를 편하게 볼 수 있습니다. 물론 실버라잇1.1을 지원하는 비슷한 걸로 Reflector용 실버라잇 플러그인이 있은 것으로 아는데 사용은 안해봐서 비교는 못하겠네요. 아래는 관련된 정보가 있는 링크들입니다.

First Floor: Silverlight Spy
Silverlight Spy : A Silverlight X-Ray useful tool
View Source Reflector tool for .NET Silverlight Sites

Silverlight Spy in 2008

First of all; happy new year to all of you! Let's start the year with some great news regarding Silverlight Spy. It has been a while since the last update, mainly because I was stuck trying to get the Spy to support Silverlight version 1.1.

But I have seen the light lately and managed to get a Spy prototype working that does support both Silverlight 1.0 and Silverlight 1.1 Alpha (including DLR driven applications)! I am super excited about this and while there's still a lot of terrain to cover, I'm absolutely positive the current approach is the way to go.

What to expect

Along with support for all Silverlight versions there are a lot of new features and fixes planned. Among others:

Full support for properties of types that are normally not accessible in JScript (points, rectangles, etc.)
Access to Silverlight 1.1 user control content
An event monitor
A preview pane where a single UI element will be taken out of the application tree and shown in a separate window (see also screenshots below).
XAML view with syntax coloring

When?

Good question. As said, I just finished a prototype and still need to do a lot of work. It depends on the amount of spare time I can devote to this project. I'm pretty sure I will be busy for at least a couple of weeks. I might throw in a (limited) preview version if possible.

Although there are still a lot of things unknown about Silverlight 2.0, I will do everything in my power to make sure the Spy will support this upcoming version as well.

Screenshots

I've put together some screenshots of the current prototype to illustrate the new features of the upcoming Silverlight Spy;

Published: Wednesday, January 02, 2008 8:32 AM
Tags: Silverlight Spy

실버라잇 2.0이란?

한누리 — Tue, 1 Jan 2008 16:09:00 +0900

웹은 원래 텍스트가 중심이 되는 문서를 네트웍을 통해 공유하기 위해서 설계되었기 때문에 가지는 한계들이 존재합니다. 따라서 화면 디스플레이 기능이 단순하고, 동적인 표현이나 서버와의 상호대화적 능력이 부족하여, 웹 애플리케이션 구현이 쉽지 않다는 문제점이 있습니다.

따라서 이러한 단점들을 극복하기 위한 여러 가지 노력들이 시도되어 왔으며, 부분적으로는 성공적인 사례들이 만들어지면서 차츰 발전을 거듭해왔습니다. 그러나 구현상 생산성이 떨어지는 등 근본적인 문제점들은 여전히 남아 있습니다.

여러 가지 중에서도 가장 성공적인 것을 뽑으라면 플래쉬(+플렉스)와 ajax을 꼽을 수 있습니다. 특히 ajax가 웹서비스에 강점을 가지고 있지만 여전히 html을 사용하므로 풍부한(Rich) 표현을 하기에는 한계가 있으며, 개발 생산성이 떨어지는 한계는 여전히 존재합니다. 따라서 현재로써는 플래쉬(+플랙스)가 가장 가능성이 있는 방식으로 받아들여지고 있지만 이 것 역시 문제점들을 가지고 있습니다.

플래쉬(+플래스) 방식에서 지적될 수 있는 문제점들중에서 MS가 주목하는 것들을 보면, swf가 바이너리 형식이기 때문에 검색엔진이 인식하지 못한다는 점과 ActionScript이 가지는 문제점들이 지적되고 있으며, 플랙스 서버를 두어야 한다는 것을 꼽을 수 있습니다.

MS의 실버라이트는 대략 이러한 플랫폼상의 문제를 해결해줌으로써 강력한 경쟁력을 발휘하도록 만들어진 것으로 볼 수 있습니다. 특히 MS에서는 개발자와 디자이너간 작업의 독립성과 협업의 효율성을 보장해야 한다는 관점을 강조하고 있습니다. 그렇지만 MS는 아직 저작툴들의 성능이 검증되지 않은 상태라 향후 어도비와의 경쟁에서 어떻게 될지 예측하기는 쉽지 않습니다.

대략적으로 디자이너들은 플래쉬(Adobe)를 선호할 것으로 보이며, 개발자들은 실버라이트(MS)에 더 호감을 가질 것으로 예측하는 것이 일반적입니다. 아도비는 플래쉬+플랙스+포토샵+일러스트레이터로, MS는 Silverlight + Visual Studio + Expression Studio 라인업으로 서로간에 세력을 확보하는 경쟁이 벌어질 것으로 보입니다.

MS는 2007년 9월에 실버라이트 1.0을 정식 발표했지만 스크립트로만 개발해야 한다는 점과 현재 제공되는 기능이 제한적이다는 약점이 있습니다. 이는 단순 웹페이지를 만드는 경우는 문제가 없겠지만, 아마도 개발자들중 많은 수는 2008년에 발표될 CLR(C#, VB.NET)과 DLR(IronPython, Ruby.Net)이 지원되는 실버라이트 2.0에 초점을 맞추고 있을 것으로 짐작됩니다. 2.0은 3월초에 베타발표 일정이 잡혀있고, 하반기중에 정식 릴리즈될 것으로 보입니다.

일단 MS가 다양한 운영체제와 브라우저를 동시에 지원하는 플랫폼을 발표하며 도전한다는 것은 상당한 부담이었을 것입니다. 그런데도 불구하고 이를 추진한다는 것은, 기존의 윈도 기반의 독점적 지위에 더이상 안주할 수 없는 상황으로 판단하고, 웹에서의 정면 승부를 준비하는 것이 아닌가 싶습니다.

이와 같은 RIA(Rich Internet Application)방식의 보급이 일반화될수록 디자인이 차지하는 비중이 더 커질 것으로 보입니다. 따라서, MS가 디자이너들을 끌어들일 수 있느냐가 성패의 핵심이 될것이며, 아니면 이를 보완할 수 있는 다양한 디자인 템플릿 보급이나 지침서 제공 같은 것들이 풍부하게 제공되어야 할 것으로 판단됩니다.

제가 특히 관심을 가지고 보는 관점은, 완전히 실버라잇만으로 구성된 대중적인 사이트들이 등장하게 될지, 이런 사이트들이 성능상의 문제가 발생하지는 않을지, 또 UX/UI가 어떤 식으로 바뀌어갈지, 과연 사용자들이 더 선호하게될 것인지 등 궁금한 점이 한 두 가지가 아닙니다.

이상으로 실버라잇 2.0이란 주제로 티스로리에 블로그를 개설하면서 종합적인 상황을 정리해봤습니다. 여기서는 주로 제가 실버라잇을 공부하면서 필요한 자료정리와 외국의 블로거들이 제공하는 실버라잇에 대한 글들을 소개하는 내용이 주를 이룰 것 같습니다. 2008년은 실버라잇과 함께하는 해가 될것 같습니다.

감사합니다. 새해 복 많이 받으세요.