C# 입문 : 이론과 실습

Transcription

1

2 리스트뷰 트리뷰 업다운컨트롤 트랙바 프로그레스바 타이머컴포넌트 [2/42]

3 리스트상자와유사한형태를지니며목록을구조적으로장식할수있는컨트롤 리스트상자 + 추가적인정보 ( 아이콘, 설명 ) [3/42]

4 ImageList 컴포넌트의작성 리스트뷰작성에앞서리스트뷰에서사용할아이콘을 ImageList 컴포넌트에등록 도구상자 ImageList 를선택하여 ImageList 컴포넌트를폼에추가 속성브라우저 Images 를선택하여 Image 컬렉션편집기를표시 [4/42]

5 ImageList 컴포넌트의작성 (cont.) Image 컬렉션편집기 추가 버튺을클릭하여 열기 대화상자를표시 등록할이미지파일을검색하여이미지로등록 [5/42]

6 ListView 컨트롤의추가 도구상자 ListView 를선택하여폼에추가 ListView 에사용할아이콘을설정 ListView 의 LargeImageList 와 SmallImageList 프로퍼티의값으로이미작성한 ImageList 컴포넌트의이름을배정 LargeImageList 프로퍼티 큰아이콘 (32x32) 에해당하는 ImageList 를설정 SmallImageList 프로퍼티 작은아이콘 (16x16) 에해당하는 ImageList 를설정 [6/42]

7 리스트뷰의열 (column) 을설정 리스트뷰를다수의열 (multi-column) 로작성할경우 속성브라우저 Columns 를선택하여 ColumnHeader 컬렉션편집기를표시 ColumnHeader 컬렉션편집기 추가 버튺을클릭하여리스트뷰에표시할열을추가 Text 프로퍼티 : 각열의표제에표시될문자열 [7/42]

8 리스트뷰의항목추가 속성브라우저 Items 를선택하여 ListViewItem 컬렉션편집기를표시 ImageIndex 프로퍼티 : ListView 의항목에대한아이콘설정 [8/42]

9 하나의항목에대한부항목입력 리스트뷰의열이설정되어있을경우 ListViewItem 컬렉션편집기에서 SubItems 프로퍼티를선택하여 ListViewSubItem 컬렉션편집기를표시 Text 프로퍼티 : 추가할항목을위한이름이나설명을설정 [9/42]

10 View 프로퍼티의값에따라다양한형태를가짐 System.Windows.Forms 네임스페이스에포함된 View 열거형을값으로가짐 View 열거형 기호상수 설명 LargeIcon 큰아이콘의형태 (1) SmallIcon 작은아이콘의형태 (2) List 갂단한리스트형태 (3) Detail 자세한리스트형태 (4) [10/42]

11 SelectedItems 프로퍼티 리스트뷰에서선택된항목을저장하는프로퍼티반환형 ListViewItem 클래스형리스트뷰의 MultiSelect 프로퍼티가거짒일경우 ListViewItem 클래스의배열형리스트뷰의 MultiSelect 프로퍼티가참일경우 [11/42]

12 [ 예제 11.1 ListViewApp.cs] 1) 폼설계 2) 컴포넌트 컴포넌트 : (Name) 프로퍼티인덱스값 ImageList : imagelist1 Images 0 FLGSKOR.ICO 1 FLGUSA2.ICO 2 FLGITALY.ICO 3 FLGCAN.ICO 4 FLGFRAN.ICO 이미지경로 : C:\Program Files\Microsoft Visual Studio.NET 2003\Common7\Graphics\icons\Flags [12/42]

13 3) 프로퍼티 컨트롤 : (Name) 프로퍼티 값 Form : Form1 Text ListViewApp RadioButton : radiobutton1 Text LargeIcon Checked True RadioButton : radiobutton2 Text SmallIcon RadioButton : radiobutton3 Text List RadioButton : radiobutton4 Text Details Label : label1 Text columnheader1 Columns columnheader2 ListView : listview1 LargeImageList imagelist1 SmallImageList imagelist1 ColumnHeader : columnheader1 Text 국가 ColumnHeader : columnheader2 Text 국가번호 [13/42]

14 4) ListView의 Items 프로퍼티 Items 프로퍼티 값 프로퍼티 값 ImageIndex 0 ListViewItem0 ListViewSubItem0 Text 대한민국 SubItems ListViewSubItem1 Text 82 ImageIndex 1 ListViewItem1 ListViewSubItem0 Text 미국 SubItems ListViewSubItem1 Text 1 ImageIndex 2 ListViewItem2 ListViewSubItem0 Text 이탈리아 SubItems ListViewSubItem1 Text 39 ImageIndex 3 ListViewItem3 ListViewSubItem0 Text 캐나다 SubItems ListViewSubItem1 Text 1 ImageIndex 4 ListViewItem4 ListViewSubItem0 Text 프랑스 SubItems ListViewSubItem1 Text 33 [14/42]

15 5) 이벤트처리기 컨트롤 : (Name) 이벤트메소드명 RadioButton : radiobutton1 CheckedChanged radiobutton1_checkedchanged RadioButton : radiobutton2 CheckedChanged radiobutton2_checkedchanged RadioButton : radiobutton3 CheckedChanged radiobutton3_checkedchanged RadioButton : radiobutton4 CheckedChanged radiobutton4_checkedchanged ListView : listview1 Click listview1_click() private void radiobutton1_checkedchanged(object sender, EventArgs e) { if (radiobutton1.checked) // 리스트뷰의항목을큰아이콘형태로보여준다. listview1.view = View.LargeIcon; } private void radiobutton2_checkedchanged(object sender, EventArgs e) { if (radiobutton2.checked) // 리스트뷰의항목을작은아이콘형태로보여준다. listview1.view = View.SmallIcon; } private void radiobutton3_checkedchanged(object sender, EventArgs e) { if (radiobutton3.checked) // 리스트뷰의항목을갂단한리스트형태로보여준다. listview1.view = View.List; } [15/42]

16 private void radiobutton4_checkedchanged(object sender, EventArgs e) { if (radiobutton4.checked) // 리스트뷰의항목을자세한리스트형태로보여준다. listview1.view = View.Details; } private void listview1_click(object sender, EventArgs e) { foreach (ListViewItem item in listview1.selecteditems) { ListViewItem.ListViewSubItemCollection subitem = item.subitems; // 각항목에대한부항목을얻기위해 SubItems 프로퍼티를사용 label1.text = subitem[0].text + " 의국가번호는 " + subitem[1].text + " 입니다."; } } 실행방법 : 1 라디오버튺중하나를선택한다. 2 리스트뷰의항목을선택한다. 실행결과 : [16/42]

17 목록을계층적으로보여주기위한컨트롤 노드를계층적으로표시 노드에이미지아이콘을추가할수있음 [17/42]

18 ImageList 컴포넌트의작성 트리뷰작성에앞서리스트뷰에서사용할아이콘을 ImageList 컴포넌트에등록 리스트뷰에서작성했던 ImageList 생성과정과동일 TreeView 컨트롤의추가 도구상자 TreeView 를선택하여폼에추가 TreeView 에사용할아이콘을설정 TreeView 의 ImageList 프로퍼티값으로이미작성한 ImageList 컴포넌트의이름을배정 [18/42]

19 TreeView 의노드작성 속성브라우저 Nodes 를선택하여트리노드편집기를표시 1 루트추가 (R) 버튺을클릭하여트리의루트노드를생성 2 자식추가 (C) 버튺을클릭하여특정노드의자식노드를삽입 3 삭제 (D) 버튺을클릭하여특정노드를제거 4 이미지 (I) 와선택한이미지 (S) 콤보상자를통해노드에아이콘추가 [19/42]

20 트리노드편집기를통해생성 TreeNode 클래스의객체 TreeView 컨트롤의 Nodes 프로퍼티에 TreeNodeCollection 형으로저장 TreeNodeCollection 클래스의메소드를통해노드의편집이가능함 TreeNodeCollection 클래스의메소드 메소드 Add(TreeNode node) Clear() Insert(int index, TreeNode node) Remove(TreeNode node) 설명트리뷰에새로운노드를추가트리뷰의모든노드를삭제트리뷰의지정된인덱스에노드를삽입트리뷰의노드중매개변수에해당하는노드를삭제 [20/42]

21 트리뷰의노드는 TreeNode 클래스의객체 TreeNodeCollection 클래스의메소드를사용할경우 TreeNode 클래스의객체를생성해야함 TreeNode 클래스의생성자 public TreeNode(string label); public TreeNode(string label, int idx1, int idx2); label : 노드이름에해당하는문자열 idx1 : 노드가선택되지않았을때의이미지인덱스 idx2 : 노드가선택되었을때의이미지인덱스 [21/42]

22 [ 예제 11.2 TreeViewApp.cs] 1) 폼설계 2) 컴포넌트 TreeView : treeview1 TextBox : textbox1 Button : button1 Button : button2 컴포넌트 : (Name) 프로퍼티인덱스값 0 CLSFOLD.ICO ImageList : imagelist1 Images 1 AUDIO.ICO 이미지경로 : C:\Program Files\Microsoft Visual Studio.NET2003\Common7\Graphics\icons\Win95 3) 프로퍼티 컨트롤 : (Name) 프로퍼티 값 Form : Form1 Text TreeViewApp Form : Form1 TextBox : textbox1 Text Button : button1 Text 노드추가 Button : button2 Text 노드삭제 TreeView : treeview1 Nodes 4) 멤버 public Form1() { treeview1.expandall(); // 트리뷰의모든노드를펼침 } [22/42]

23 5) TreeView Nodes Node의레이블 프로퍼티 이미지 ( 인덱스 ) 선택한이미지 ( 인덱스 ) CLSDFOLD.ICO(0) CLSDFOLD.ICO(0) 클래식 베토벤 AUDIO.ICO(1) AUDIO.ICO(1) 슈베르트 AUDIO.ICO(1) AUDIO.ICO(1) 모짜르트 AUDIO.ICO(1) AUDIO.ICO(1) CLSDFOLD.ICO(0) CLSDFOLD.ICO(0) 팝 Britney Spears AUDIO.ICO(1) AUDIO.ICO(1) Mariah Carey AUDIO.ICO(1) AUDIO.ICO(1) Capenters AUDIO.ICO(1) AUDIO.ICO(1) CLSDFOLD.ICO(0) CLSDFOLD.ICO(0) 가요 이승철 AUDIO.ICO(1) AUDIO.ICO(1) 이미자 AUDIO.ICO(1) AUDIO.ICO(1) 송대관 AUDIO.ICO(1) AUDIO.ICO(1) 6) 이벤트처리기 컨트롤 : (Name) 이벤트메소드명 Button : button1 Click button1_click() Button : button2 Click button2_click() [23/42]

24 private void button1_checkedchanged(object sender, EventArgs e) { if (textbox1.text!= && treeview1.selectnode!= null) { // 선택된노드가있으면, 그노드의자식노드로추가한다. treeview1.selectednode.nodes.add(new TreeNode(textBox1.Text, 1, 1)); textbox1.text = ; textbox1.focus(); } } private void button2_click(object sender, EventArgs e) { treeview1.nodes.remove(treeview1.selectednode); } 실행방법 : 1 자식노드를추가할노드를선택한다. 2 텍스트상자에텍스트를입력한다. 3 노드추가버튺을클릭한다. 실행결과 : [24/42]

25 SelectedNode 프로퍼티 트리뷰에서선택된노드를저장하는프로퍼티 반환형 TreeNode 클래스형 TreeNode 클래스의프로퍼티를이용하면선택된노드를기준으로부모, 이젂형제, 다음형제, 자식노드를참조할수있음 TreeNode 클래스의프로퍼티 (p.486, 예제 11.3 참조 ) 메소드 Parent PrevNode NextNode Nodes 설명현재트리노드의부모노드현재트리노드의이젂형제노드현재트리노드의다음형제노드현재트리노드의자식노드들 [25/42]

26 주어진목록에서항목을선택할수있는컨트롤 업다운버튺을이용하여필요한값을선택스핀컨트롤 (spin control) 영역업다운컨트롤 문자열로이루어진항목에서특정한항목을선택할수있는컨트롤 수치적업다운컨트롤 지정한범위내에서수치적값을선택할수있는컨트롤 [26/42]

27 영역업다운컨트롤의추가 도구상자 DomainUpDown 을선택하여폼에추가 영역업다운컨트롤의항목입력 속성브라우저 Items 를선택하여문자열컬렉션편집기를표시 영역업다운컨트롤의목록을위한항목을입력 [27/42]

28 [ 예제 11.4 DomainUpDownApp.cs] 1) 폼설계 2) 컴포넌트 3) 이벤트처리기 컨트롤 : (Name) 프로퍼티값 Form : Form1 Text DomainUpDownApp Button : button1 Text 선택 DomainUpDown : domainupdown1 Items Wrap 프로그래밍언어컴퓨터구성데이터베이스 True 컴파일러알고리즘운영체제 컨트롤 : (Name) 이벤트메소드명 Button : button1 Click Button1_Click() private void button1_click(object sender, EventArgs e) { MessageBox.Show(domainUpDown1.SelectedItem.Tostring()); } 실행방법 : 도메인업다운컨트롤에서항목을선택한후, 선택버튺을클릭한다. 실행결과 : [28/42]

29 수치적업다운컨트롤의추가 도구상자 NumericUpDown 을선택하여폼에추가 수치적업다운컨트롤의항목에대한범위와증가 / 감소량을설정 수치적업다운컨트롤의프로퍼티를통해설정 프로퍼티 설명 Minimum 수치적업다운컨트롤의최소값. Maximum 수치적업다운컨트롤의최대값. Increment 수치적업다운컨트롤의증가 / 감소양. Value 수치적업다운컨트롤의현재값. DecimalPlaces 수치적업다운컨트롤에표시할소수자릿수. ThousandsSeparator 10진수 3자리마다구분기호를삽입여부. Hexadecimal 수치적업다운컨트롤의값을 16진수로표시. [29/42]

30 [ 예제 11.5 NumericUpDownApp.cs] 1) 폼설계 2) 프로퍼티 3) 이미지처리기 컨트롤 : (Name) 프로퍼티값 Form : Form1 Text NumericUpDownApp Label : label1 Text Log 0 = Label : label2 Text 0 * 0 = Label : label3 Text 0 = TextBox : textbox1 TextBox : textbox2 TextBox : textbox3 NumericUpDown : numericupdown1 Text Text Text Minimum 0 Maximum 1000 Increment 0.5 DecimalPlaces 1 컨트롤 : (Name) 이벤트메소드명 NumericUpDown : numericupdown1 ValueChanged numericupdown1_valuechanged() [30/42]

31 private void numericupdown1_valuechanged(object sender, EventArgs e) { decimal d = numericupdown1.value; label1.text = Log + d + = ; textbox1.text = System.Math.Log10((double)d).ToString(); label2.text = d + * + d + = ; textbox2.text = System.Math.Pow((double)d,2).ToString(); label3.text = " " + d + " = "; textbox3.text = System.Math.Sqrt((double)d).ToString(); } 실행방법 : 수치적업다운컨트롤의값을변경한다. 실행결과 : [31/42]

32 범위내에서값을선택할수있는컨트롤 슬라이더와눈금으로구성 슬라이더의이동 마우스드래그슬라이더의좌우공갂클릭마우스휠의회젂키보드의좌우방향키, 페이지업다운키 [32/42]

33 트랙바의추가 도구상자 TrackBar 를선택하여폼에추가 트랙바의값에대한범위와이동량을설정 트랙바의프로퍼티를통해설정 프로퍼티 설명 Minimum Maximum Value LargeChange SmallChange TickFrequency TickStyle Orientation 트랙바의최소값트랙바의최대값트랙바의현재값마우스클릭이나 PageUp/PageDown 키에대한이동량마우스휠의회젂이나키보드의방향키에대한이동량눈금이표시되는값의범위트랙바에눈금이표시되는위치트랙바의방향 (Horizontal Vertical) [33/42]

34 슬라이더형태와눈금이표시되는위치설정 TickStyle 프로퍼티에 TickStyle 열거형값을배정하여설정 TickStyle 열거형 기호상수슬라이더설명 None 눈금을표시하지않음. TopLeft BottomRight 트랙바의 Orientation 프로퍼티가 Horizontal 로설정된경우슬라이더의상단에눈금표시. 트랙바의 Orientation 프로퍼티가 Vertical 로설정된경우슬라이더의좌측에눈금표시. 트랙바의 Orientation 프로퍼티가 Horizontal 로설정된경우슬라이더의하단에눈금표시. 트랙바의 Orientation 프로퍼티가 vertical 로설정된경우슬라이더의우측에눈금표시. Both 슬라이더의양쪽에눈금표시. [34/42]

35 [ 예제 11.6 TrackBarApp.cs] 1) 폼설계 2) 프로퍼티 3) 이미지처리기 컨트롤 : (Name) 프로퍼티값 Form : Form1 Text TrackBarApp TrackBar : trackbar1 NumericUpDown : numericupdown1 Minimum 0 Maximum 100 LargeChange 5 SmallChange 1 TickFrequency 10 TickStyle Orientation Both Horizontal Minimum 0 Maximum 100 컨트롤 : (Name) 이벤트메소드명 TrackBar : trackbar1 Scroll trackbar1_scroll() NumericUpDown : numericupdown1 ValueChanged numericupdown1_valuechanged() [35/42]

36 private void trackbar1_scroll(object sender, EventArgs e) { numericupdown1.value = trackbar1.value; } private void numericupdown1_valuechanged(object sender, EventArgs e) { trackbar1.value = (int)numericupdown1.value; // 수치적업다운컨트롤의 Value 프로퍼티는 Decimal 형 // trackbar 의 Value 프로퍼티는정수형 } 실행방법 : 트랙바의슬라이더를이동하거나수치적업다운컨트롤의값을변경한다. 실행결과 : [36/42]

37 작업의진행상황을보여주는컨트롤 좌측에서우측으로사각형의조각을채우면서진행 애플리케이션의설치과정이나파일복사과정에서사용 [37/42]

38 프로그레스바의추가 도구상자 ProgressBar 를선택하여폼에추가 프로그레스바의값에대한범위를설정 프로그레스바의프로퍼티를통해설정 Maximum 프로그레스바의최대값 Minimum 프로그레스바의최소값 [38/42]

39 [ 예제 11.7 ProgressBarApp.cs] 1) 폼설계 2) 컴포넌트 3) 이벤트처리기 컨트롤 : (Name) 이벤트메소드명 private void button1_click(object sender, EventArgs e) { for (int i = 0; i < ; i++) progressbar1.value += i; } 실행방법 : Start 버튺을클릭한다. 실행결과 : 컨트롤 : (Name) 프로퍼티값 Button : button1 Click button1_click() Form : Form1 Text ProgressBarApp Button : button1 Text Start ProgressBar : progressbar1 Minimum 0 Maximum [39/42]

40 주기적인갂격으로이벤트를발생시키는컴포넌트 배경작업을처리할때주로사용 일정한갂격에따라 Tick 이벤트를발생 Interval 프로퍼티를통해갂격을설정 밀리초 (millisecond, 1/1000 초 ) 를사용 주기적으로발생시키기위해서는 Enable 프로퍼티를참으로설정 항상 Interval 프로퍼티의갂격에따라 Tick 이벤트가발생하는것은아님 Tick 이벤트가다른이벤트에비해우선순위가낮기때문 타이머컴포넌트의추가 도구상자 Timer 를선택하여폼에추가 [40/42]

41 [ 예제 11.8 TimerApp.cs] 1) 폼설계 2) 컴포넌트컴포넌트 : (Name) 프로퍼티값 Enable True Timer : timer1 Interval 100 3) 프로퍼티 컨트롤 : (Name) 프로퍼티 값 Form : Form1 Text TimerApp Label : label1 Text BorderStyle Fixed3D 4) 멤버 private int index; private Image[] images; public Form1() { // Form1 의생성자에추가 images = new Image[8]; string imagepath for (int i = 0 ; i < 8 ; i++) images[i] = Image.FromFile(imagePath + i + ".jpg"); } [41/42]

42 5) 이벤트처리기 private void timer1_tick(object sender, EventArgs e) { if (index < 8) label1.image = images[index++]; else { index = 0; label1.image = images[index++]; } } 실행결과 : 컴포넌트 : (Name) 이벤트메소드명 Timer : timer1 Tick timer1_tick() >> 이미지는 C:\penguin 폴더에위치한다고가정 >> 파일명은 penguin0.jpg, penguin1.jpg,..., penguin7.jpg >> 펭귄이미지는 사이트에서다운받을수있음 [42/42]