기술문서 [21기 이종찬] SilverLight 차트

[21기 이종찬]

SilverLight 차트	4조
	작성자 : 이종찬
	작성일 : 2011. 6. 7
제목 : SilverLight 차트

1. 실버라이트 툴킷 설치

  - 차트를 띄우려면 툴킷을 설치해야 한다.

  - 참고된 홈페이지 가서 SilverLight 최신 툴킷을 받는다.

    ( 툴킷 사이트 : http://silverlight.codeplex.com/releases/view/43528 )

  - 홈페이지에서 보이는 2010년 4월 15일날 최신 릴리즈 버전인 툴킷을 받는다.

  - 어셈블리만 필요한 경우에는 Silverlight 4 Toolkit April 2010.zip 을 받으면 되지만

    설치파일인 Silverlight 4 Toolkit April 2010.msi 을 받아 설치한다.

  - 설치를 마치면, 참조 추가를 할 때 .Toolkit 이라는 DLL 을 추가 할 수 있게 보인다.

  

2. 참조 추가 및 메타데이터 생성

  - 실버라이트 프로젝트 생성 후에 툴킷을 설치한 참조를 추가해 준다.

  - 그림과 보이는 것과 같이 두 개의 DLL을 선택해서 추가해 준다.

     System.Windows.Controls.DataVisualzation.Toolkit

     System.Windows.Controls.Toolkit

   

  - 이제 차트에 들어갈 메타데이터를 생성 해준다.

- Person Class

  - 데이터의 요소인 Person 클래스를 생성한다.

  namespace SilverlightChartTest

  {

    public class Person

    {

        public String Name

        {

            get;

            set;

        }

        public int Age

        {

            get;

            set;

        }

    }

  }

- Persons Class

  - Person 객체를 콜렉션으로 상속 받아야 되므로 Persons 콜렉션 클래스를 생성해준다.

  - System.Collections.ObjectModel 을 추가한다.

  - ObjectModel 을 사용해서 생성자에 Collection item을 Add 한다.

  namespace SilverlightChartTest

  {

    public class Persons : Collection<Person>

    {

        public Persons()

        {

            Add(new Person { Name = "김민기", Age = 25 });

            Add(new Person { Name = "정윤영", Age = 28 });

            Add(new Person { Name = "정연규", Age = 26 });

            Add(new Person { Name = "이종찬", Age = 25 });

            Add(new Person { Name = "이수영", Age = 23 });

        }

    }

  }

  - 이제 Persons 콜렉션 클래스로 차트를 구성할 것이다.

3. blend 4 설치

  - 블렌드로 차트를 구성한다.

  - Visual Studio 버전이 2008은 blend 3 으로 하지만 2010 버전은 blend 4 를 설치 해줘야 한다.

  - 아래 사이트로 가서 다운받는다.

   (http://www.microsoft.com/downloads/en/confirmation.aspx?FamilyID=04438f30-cc6d-4e10-80a3- 3b3dce129e88&displaylang=en)  ※ 60일 제한의 Trial 버전

  - 아래 사이트에서 서비스팩 1 을 다운받는다.

   (http://www.microsoft.com/downloads/en/confirmation.aspx?FamilyID=17872a3a-4620-4b87-9d62-f29173d12625)

  - 두 설치 파일을 설치해 준다.

4. blend 차트 구성하기

  - 이제 블랜드로 프로젝트를 열어준다.

  - 아래와 같이 차트를 추가해서 MainPage.xaml에 크기에 맞춰 그려준다.

  

  - DataContext 에 있는 new를 선택해서 Persons 클래스를 선택해 OK 버튼을 누른다.

 

  - DataContext 옆에 있는 New 버튼의 흰색을 누르면 좌측 창이 뜨는데 리소스를 생성해준다.

  - 여기서는 리소스 이름을 persons01 로 지정한다,

 

  - 좌측에서 Layout아래에 있는 Chart 선택 후 오른쪽 속성창 보면 Series의 (Collection) 이 있다.

  - 버튼을 누르고 아래 Add another item 버튼을 누르면 우측 창이 보인다.

  - System.Windows.Controls.DataVisualzation.Toolkit 트리 안에 보면 차트 종류가 다양하게 볼 수 있는데 원하는

   차트를 선택해서 추가해 준다.

  - 여기서는 BarSeries 를 선택한다.

  - 그 밖의 차트들을 선택하고 사용하고 싶다면 아래 사이트를 참고

   (http://www.silverlight.net/content/samples/sl2/toolkitcontrolsamples/run/default.html )

 

  - 이제 차트 속성을 수정해 주어야 한다.

  - ItemSource 오른쪽 사각형 버튼을 누르면 Local Resource 가 나오는데 아까 리소스를 추가한 persons01 을

   선택한다.

  - 그러면 DataContext 에 Persons Collecion이 바인딩 되었다고 나타난다.

  - 이제, DependentValuePath 에 수치가 되는 Age를 입력하고 IndependentValue 에는 Name을 입력 후 OK

    버튼을 누른다.

  

  - 그러면 메인 창에 다음과 같은 차트가 보인다.

 

5. DataPoint 사용해서 스타일 적용시키기

  - 왼쪽에서 BarDataPoint 를 찾아서 페이지 안에 그려준다.

  - 아무곳에다 그려도 상관없고 컨트롤의 템플릿을 수정하기만 하면 된다.

  - 수정을 하면 컨트롤의 특성이 모두 살아 있고, 수정만 하는 것이라 편하게 스타일을 지정할 수 있다.

  - 그려준 템플릿 오른쪽 마우스 버튼을 눌러 Edit Control Part 부분의 Edit a Copy를 선택해서 이름을

    지정한다.

 

  - 그리고 좌측에서 BarSeries 를 선택하면 오른쪽 속성창에 DataPointStyle이 있다.

  - 오른쪽 사각형을 선택하면 저장한 BarDataPoint 를 선택해 주면 색깔이 변화된 차트를 볼 수 있다.

  - 그리고 범례가 series1이 아닌 나이이기 때문에 '나이'로 수정해 준다.