WPF 차트 바인딩 하는 법 - 기초편 (크몽 개발의뢰건)

이 프로젝트는 크몽에서 받은 WPF 개발 의뢰 건입니다.

기존 소스에 기능 추가 하는 개발 의뢰건 입니다. 단가가 낮은 대신에 단순해서수락 하였고 개발 착수에 들어 갑니다.

WPF 차트 

 체크 여부에 따라 시리즈를 제어 할 수 있는 체크 박스 기능을 추가 해달라고 한 것 입니다. 

이 기능을 범례기능 추가라고 하겠습니다.

 

생소 하신 분들을 위해 Chart 컨트롤의 용어 들을 요약 했습니다.

Series: 데이터 일련의 집합으로 오른쪽 차트 기준으로 빨간색 전체가 하나의 Series 라고 합니다. 

현재는 총 3가지 (빨간색, 노란색, 파란색) Series 가 표현되어 있습니다.

바인딩: 구체적인 값을 확정 하는 것을 말합니다. 즉 값을 할당을 의미 합니다.

Legend: 범례 라고 하며 차트에 표현된 계열의 종류를 말합니다.

 

이제 코드 설명을 하겠습니다.

WPF는 UI를 표현 할 때 XAML(Extensible Application Markup Language)의 마크업 

언어와 C# 코드로 구성 되어 있습니다.  

 

XAML :닷넷 객체를 인스턴스화 하기 위한 태그로 컨트롤 배치를 정의 하는 용도로 사용 됩니다. 

Ex) C#: Button btn = new Button();

   XAML: <Button>   </Button>  동일한 기능 입니다.

 

[XAML]

 

위 XAML 코드는 범례표현 을 위해 StackPanel 안에 Orientation=”Horizontal” 속성을 이용해

가로 방향으로 3개의 체크 박스가 정렬되도록 하였습니다.

 

StackPanel: 가로 또는 세로 방향으로 지정할 수 있는 단일 선에 따라 자식 요소를 정렬하는 Panel 입니다.

표현된 UI에 기능 작동이 될려면 C#코드가 필요 한데요 아래 내용을 살펴 봅시다.

 

[C#]

차트에 바인딩시킬 데이터를 담는 List 클래스 를 전역으로 설정 하였습니다.

① 전역으로 설정된 변수에 값을 할당 시키고 실제로 차트에 바인딩 할 BindingChartData() 함수를 생성합니다.

② 차트에 표현될 데이터를 생성 하는 구문 입니다.

③ 차트 3개의 시리즈 (Series[0], Series[1], Series[2] 에 데이터 바인딩을 하는 구문입니다.

 

① UserControl_Loaded 함수는 UI가 최초로 로드 될 때 호출 되는 이벤트 함수로

앞전에 만들어둔 BidingChartData() 함수를 호출 합니다.

그렇게 되면 3개의 차트가 데이터가 바인딩 된 모습을 확인 할수 있습니다.

 

② Chk1_Checked 함수 는 범례에 있던 체크 박스가 체크 와 언체크 되었을 때 처리 하는 이벤트 함수 입니다.

Chart.Diagram.Series[series_idx].Visible =false 구문을 상세히 살펴보면

Chart 는 XAML 에 정의한 차트 컨트롤이고 그 안에 Diagram.Series 속성을 접근 할수 있는데 

[] 대괄호 안에는 인트값으로 인덱스별 로 제어 할 수 있습니다.

 

그레서 3개의 체크 박스(Chk1,Chk2, Chk3) 이벤트에 따라  UI 표현이 가능 합니다.

Chart.Diagram.Series[0].Visible =false, Chart.Diagram.Series[0].Visible =true

Chart.Diagram.Series[1].Visible =false, Chart.Diagram.Series[1].Visible =true

Chart.Diagram.Series[2].Visible =false, Chart.Diagram.Series[2].Visible =true

 

이정도 내용을 알게 되면 위 와 비슷 한 개발 건 이 들어 왔을 때 어느 정도 개발은 가능 하지만

많이 부족한 상태 일 겁니다.  WPF 로 개발을 하기 위해서는 XAML 로 UI를 구성 하기 때문에

기본적인 컨트롤 배치 와 이벤트 연결을 스스로 학습 해보시고 C# 코드에는 실제로 기능 구현

되는 코드들을 다른 예제를 통해서 살펴 보시면 도움이 됩니다.