설계및프로젝트기본I 2017년 1학기(02분반).

Presentation on theme: "설계및프로젝트기본I 2017년 1학기(02분반)."— Presentation transcript:

1 설계및프로젝트기본I 2017년 1학기(02분반)

2 1주차 수업 2월 27일(월) Form Login

3 1주차 목차 수업소개 ACE 리더 선발 레벨테스트 노트 블로그 프로그래밍 -> 폼, WPF 시험보지 않고 프로젝트 할거다
팀구성 -> 4주 후 계획 -> 진도 -> 최종(성과전시회) 가르쳐주지 않는다 하지만 수시로 가르쳐준다 ACE 리더 선발 권예림 레벨테스트 카톡으로 하겠음 노트 블로그 프로그래밍 -> 폼, WPF

4 로드맵 LAB

5 프로그래밍 WinForm WPF GUI, Visual Program 클래스가 다르다 객체지향언어의 기본 구조 VS2015

6 Visual Studio 프로젝트 시작 Solution : 프로젝트의 집합 Project : 파일들의 집합 파일들…
Visual C# Windows Form WPF Solution : 프로젝트의 집합 Project : 파일들의 집합 프로젝트 하나가 실행파일 하나 파일들…

7 윈도우 프로그램 작성 순서 디자인 속성을 변경시킨다 코딩 Form 컨트롤(Control) 배치 크기, 위치, 색깔, 내용…
이벤트 코딩 C#으로 코딩 이벤트 함수

8 Form 이벤트처리 button1, button2에 Click 이벤트 설정 디자인 창에서 버튼을 더블클릭하여 이벤트 함수 생성
private void button1_Click(object sender, EventArgs e) { if (textBox1.Text == "의료IT" && textBox2.Text == "1234") MessageBox.Show("성공"); else MessageBox.Show("실패"); } private void button2_Click(object sender, EventArgs e) // 끝내라 Close();

9 WPF 프로젝트 만들기 템플릿을 WPF로 선택하여 프로젝트 만들기 지난 시간에 Form 로그인
Solution 오른쪽 마우스 버튼 -> 추가 -> 새프로젝트 시작 프로젝트로 설정 지난 시간에 Form 로그인 WPF 로그인 프로그램을 완성시켜라

10 2주차 강의 3월 6일(월) WPF Login

11 2주차 수업내용 지난 시간에 Form 로그인 WPF 로그인 프로그램을 완성시켜라

12 1. 디자인하는 창의 이름이 달라졌다 *보통은 XAML 파일로 디자인한다 2. XAML 창이 생긴다

13 Design과 XAML(자멜이라고 읽는다)이 연동되어 있다
<Grid> <Label x:Name="label" Content="Label" HorizontalAlignment="Left" Margin="60,52,0,0" VerticalAlignment="Top“ /> <TextBox x:Name="textBox" HorizontalAlignment="Left" Height="23" Margin="157,52,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/> <TextBox x:Name="textBox2" HorizontalAlignment="Left" Height="23" Margin="157,152,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/> </Grid>

14 Xaml 코딩이 좋다 <Grid Background="Orange"> <TextBlock FontSize="50" FontWeight="Bold" Foreground="Blue" HorizontalAlignment="Center" VerticalAlignment="Center">HelloWorld </TextBlock> </Grid> Tag : <>로 시작하고 </>로 끝 Control을 사용할 때 <> 안에 속성을 넣는다 반드시 자동완성기능을 사용한다

15 MainWindow.xaml <Grid Name="grid1" Background="Orange">
<TextBlock FontSize="50" FontWeight="Bold" Foreground="Blue" HorizontalAlignment="Center" VerticalAlignment="Center" MouseDown="TextBlock_MouseDown">HelloWorld</TextBlock> </Grid> MainWindow.xaml.cs // TextBlock이 눌렸을 때의 이벤트 함수 private void TextBlock_MouseDown(object sender, MouseButtonEventArgs e) { grid1.Background = Brushes.White; }

16 실행모습

17 WPF login <Grid> <TextBlock>ID</TextBlock>
<TextBox></TextBox> <TextBlock>PASSWORD</TextBlock> </Grid> Container를 써야 한다

18 <Grid> <Button Margin="30">Button</Button> </Grid>

19 StackPanel – 가로로 쌓기 <Grid> <StackPanel Orientation="Horizontal"> <Button Margin="10" Height="40" Width="150"> Button1</Button> <Button Margin="10" Height="40" Width="150"> Button2</Button> <Button Margin="10" Height="40" Width="150"> Button3</Button> </StackPanel> </Grid>

20 세로로 쌓기 <Grid> <StackPanel > <Button Margin="10" Height="40" Width="150"> Button1</Button> <Button Margin="10" Height="40" Width="150"> Button2</Button> <Button Margin="10" Height="40" Width="150"> Button3</Button> </StackPanel> </Grid>

21 프로젝트만 압축해서 학번_이름.zip bikang@konyang.ac.kr
<StackPanel> <StackPanel Orientation=“Horizontal”> <TextBlock/> <TextBox /> </StackPanel> <TextBox/> <Button Name=btn1/> <Button name=btn2/> </Stackpanel> m2 속성 Margin Width Height m3 Button m1 m4 Margin=“m1, m2, m3, m4”

22 디자인 – MainWindow.xaml <Grid Background="Orange"> <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" > <StackPanel Orientation="Horizontal" Margin="10"> <TextBlock Width="100">ID</TextBlock> <TextBox Name="txtID" Width="150"/> </StackPanel> <TextBlock Width="100" Text="PASSWORD"/> <TextBox Name="txtPassword" Width="150"/> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="10"> <Button Width="100" Name="btnLogin" Click="btnLogin_Click">로그인</Button> <Button Width="100" Name="btnClose" Margin="50,0,0,0">종료</Button> </Grid>

23 Code behind – MainWindow.xaml.cs
public partial class MainWindow : Window { public MainWindow() InitializeComponent(); } // Login Button 이벤트 함수 private void btnLogin_Click(object sender, RoutedEventArgs e) if (txtID.Text == "의료IT" && txtPassword.Text == "1234") MessageBox.Show("성공했습니다"); else MessageBox.Show("실패했습니다"); // Close Button 이벤트 함수 private void btnClose_Click(object sender, RoutedEventArgs e) Close(); // XAML 코드에서 패스워드 입력창에 // TextBox 대신 PasswordBox 사용하면 글자를 숨겨준다 <StackPanel Orientation="Horizontal" Margin="10"> <TextBlock Width="100" Text="PASSWORD"/> <PasswordBox Name="txtPassword" Width="150"/> </StackPanel> cs 파일 // Login Button 이벤트 함수 private void btnLogin_Click(object sender, RoutedEventArgs e) { if (txtID.Text == "의료IT" && txtPassword.Password == "1234") MessageBox.Show("성공했습니다"); else MessageBox.Show("실패했습니다"); }

24 3주차 강의 3월 13일(월) WPF 계산기

25 간단한 계산기 Form WPF Title TextBox Button

26 WPF 계산기

27 WPF StackPanel Grid

28 XAML을 이용하여 Button 표시 <Grid> <Button>버튼1</Button> </Grid> <Grid>와 </Grid>사이에 콘트롤 배치 <Grid> <Button>버튼1</Button> <Button>버튼2</Button> </Grid> <Button>을 두 개 넣어도 표시는 하나만 됨 즉, 같은 위치에 2개가 들어감 쌓아놓는 패널이라는 뜻 이럴 때 <StackPanel> 을 사용함 <StackPanel> <Button>버튼1</Button> <Button>버튼2</Button> </StackPanel>

29 Button의 속성 = Height, Margin
<StackPanel> <Button Height=“100”>버튼1</Button> <Button Height=“150”>버튼2</Button> </StackPanel> Button의 크기를 키우려면 Height 속성을 준다 Button이 너무 붙어있어서 여백을 주고 싶으면 Margin 속성을 준다. 40 10 50 버튼1 20 Margin=“10” 과 같이 숫자 하나만 쓰면 사방이 같은 Margin을 갖는다. 네 방향 모두 다른 값을 줄 수 있다. Margin=“50,40,10,20” 처럼… <Button Height="100" Margin="10">버튼1</Button> <Button Height="150" Margin="10">버튼2</Button>

30 수업 중에 한 프로그램 XAML 구조 -> 올려놓은 소스를 보면서 공부할 것 <StackPanel>
<Grid> <TextBox Name=“txtResult”>0</TextBox> </Grid> <Grid.RowDefinitions> <RowDefinition/> … </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> </Grid.ColumnDefinitions> <Button Grid.Row=“0” Grid.Column=“0”>MC</Button> … 여러 개의 버튼들을 이곳에… </StackPanel> 첫번째 Grid 6줄을 정의함 두번째 Grid 5칸을 정의함 두번째 <Grid>와 </Grid> 사이에 버튼이 놓이고 버튼은 몇번째 Row, Column 에 들어가는 지를 표시한다.

31 윈도우 계산기와 비교 - 초기화면 ③ 프로그램 아이콘 ① 프로그램의 이름 ④ 메뉴 ② TextBox의 숫자가 오른쪽 아래
큰 글씨로… ⑤ 컬러추가 ① XAML 맨 윗줄에서 Title 속성 변경… <Window x:Class="wpfCalc.MainWindow" ….. Title="WPF 계산기" Height="320" Width="220"> ② 첫번째 <Grid>의 속성 변경… <TextBox Name="txtResult" Height="55" Margin="10" FontSize="20" FontWeight="Bold" HorizontalContentAlignment="Right" VerticalContentAlignment="Bottom">0</TextBox> </Grid>

32 ③ 프로그램 아이콘 바뀐 아이콘 확인! 이 아이콘은 실행파일의 아이콘이 된다
iconfinder.com 에서 Calculator로 검색하여 그 중에 마음에 드는 아이콘을 찾아 다운로드 받는다. 솔루션탐색기에서 프로젝트 이름 위에 오른쪽 마우스버튼을 누르고, 맨 아래 “속성” 메뉴를 선택 “아이콘 및 매니페스트”에서 아이콘에 다운 받아둔 그림 선택 또는 <Window x:Class="wpfCalc.MainWindow" xmlns=" xmlns:x=" Title="WPF 계산기" Height="340" Width="235" Background="#FFDDE7E3" Icon="calculator.ico">

33 ④ Menu in WPF <Menu> <MenuItem Header="_보기(V)"> <MenuItem Header="일반용" /> <MenuItem Header="공학용" IsEnabled="False" /> <MenuItem Header="프로그래머용" IsEnabled="False" /> <MenuItem Header="통계용" IsEnabled="False"/> <Separator/> <MenuItem Header="끝내기" Click="Exit_Click"/> </MenuItem> <MenuItem Header="편집(E)"> <MenuItem Header="복사(C)"/> <MenuItem Header="붙여넣기(P)" /> <Separator /> <MenuItem Header="기록" > <MenuItem Header="기록복사"/> <MenuItem Header="기록 지우기"/> <MenuItem Header="도움말(H)"> <MenuItem Header="WPF계산기 정보" Click="About_Click" /> <MenuItem Header="_Version 정보" Click="Version_Click" /> </Menu>

34 ⑤ Color <Window x:Class="wpfCalc.MainWindow" xmlns=" xmlns:x=" Title="WPF Calc v.1.10" Height="340" Width="235" Background="#FFDDE7E3“> <TextBox Name="txtResult" Height="55" Margin="10" FontSize="20" FontWeight="Normal" HorizontalContentAlignment="Right" VerticalContentAlignment="Bottom" BorderBrush="#FF93A5B1" Foreground="Black">0 <TextBox.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFD2DEE8" Offset="0.152"/> <GradientStop Color="#FFE6F5F7" Offset="0.561"/> </LinearGradientBrush> </TextBox.Background> </TextBox>

35 ⑥ Clipboard Class System.Object    -> System.Windows.Clipboard Clipboard.SetText() Method Clipboard.GetText() Method // 메뉴: 편집->복사 private void Copy_Click(object sender, RoutedEventArgs e) { Clipboard.SetText(txtResult.Text, TextDataFormat.Text); } // 메뉴: 편집->붙여넣기 private void Paste_Click(object sender, RoutedEventArgs e) txtResult.Text = Clipboard.GetText();

36 ⑦ No Resize <Window x:Class="wpfCalc.MainWindow" xmlns=" xmlns:x=" Title="WPF Calc v.1.10" Height="340" Width="235" Background="#FFDDE7E3" Icon="calculator.ico" ResizeMode="NoResize">

37 3월 13일 수업중 코딩

38 XAML 코딩 <Window x:Class="_005_WPFCalc.MainWindow" xmlns=" xmlns:x=" xmlns:d=" xmlns:mc=" xmlns:local="clr-namespace:_005_WPFCalc“ mc:Ignorable="d" Title="MainWindow" Height="350" Width="250"> <StackPanel> <Grid> <TextBox Name="txtResult“ HorizontalContentAlignment="Right" VerticalContentAlignment="Bottom" Height="55" Margin="10" FontSize="26">0 <TextBox.Background> <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> <GradientStop Color="#FFBBE4F3" Offset="0"/> <GradientStop Color="#FFF7FAFB" Offset="1"/> </LinearGradientBrush> </TextBox.Background> </TextBox> </Grid> <Grid Margin="5,0,10,0"> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> </Grid.ColumnDefinitions> <!--여기서부터 버튼을 위치시킴(^K-C)--> <Button Height="30" Margin="5,0,0,5" Grid.Row="0" Grid.Column="0">MC</Button> <Button Margin="5,0,0,5" Grid.Row="0" Grid.Column="1">MR</Button> <Button Margin="5,0,0,5" Grid.Row="0" Grid.Column="2">MS</Button> <Button Margin="5,0,0,5" Grid.Row="0" Grid.Column="3">M+</Button> <Button Margin="5,0,0,5" Grid.Row="0" Grid.Column="4">M-</Button> <!-- 두번째 Row --> <Button Height="30" Margin="5,0,0,5" Grid.Row="1" Grid.Column="0">←</Button> <Button Margin="5,0,0,5" Grid.Row="1" Grid.Column="1">CE</Button> <Button Name="btnC" Margin="5,0,0,5" Grid.Row="1" Grid.Column="2" Click="btnC_Click">C</Button> <Button Name="btnPlusMinus" Margin="5,0,0,5" Grid.Row="1" Grid.Column="3">±</Button> <Button Margin="5,0,0,5" Grid.Row="1" Grid.Column="4" Click="Button_Click_3">√</Button> <!-- 세번째 Row --> <Button Height="30" Margin="5,0,0,5" Grid.Row="2" Grid.Column="0">7</Button> <Button Margin="5,0,0,5" Grid.Row="2" Grid.Column="1">8</Button> <Button Margin="5,0,0,5" Grid.Row="2" Grid.Column="2">9</Button> <Button Margin="5,0,0,5" Grid.Row="2" Grid.Column="3">/</Button> <Button Margin="5,0,0,5" Grid.Row="2" Grid.Column="4">%</Button> <!-- 네번째 Row --> <Button Height="30" Margin="5,0,0,5" Grid.Row="3" Grid.Column="0">4</Button> <Button Margin="5,0,0,5" Grid.Row="3" Grid.Column="1">5</Button> <Button Margin="5,0,0,5" Grid.Row="3" Grid.Column="2">6</Button> <Button Margin="5,0,0,5" Grid.Row="3" Grid.Column="3">*</Button> <Button Margin="5,0,0,5" Grid.Row="3" Grid.Column="4">1/x</Button> <!-- 다섯번째 Row --> <Button Height="30" Margin="5,0,0,5" Grid.Row="4" Grid.Column="0" Click="Button_Click">1</Button> <Button Margin="5,0,0,5" Grid.Row="4" Grid.Column="1" Click="Button_Click_1">2</Button> <Button Margin="5,0,0,5" Grid.Row="4" Grid.Column="2" Click="Button_Click_2">3</Button> <Button Margin="5,0,0,5" Grid.Row="4" Grid.Column="3">-</Button> <Button Margin="5,0,0,5" Grid.Row="4" Grid.Column="4“ Grid.RowSpan="2">=</Button> <!-- 여섯번째 Row --> <Button Height="30" Margin="5,0,0,5" Grid.Row="5" Grid.Column="0“ Grid.ColumnSpan="2">0</Button> <Button Margin="5,0,0,5" Grid.Row="5" Grid.Column="2">.</Button> <Button Margin="5,0,0,5" Grid.Row="5" Grid.Column="3">+</Button> <TextBlock HorizontalAlignment="Center">CopyRight 2017 Byungik Kang </TextBlock> </StackPanel> </Window>

39 소스 코드 namespace _005_WPFCalc { /// <summary> /// MainWindow.xaml에 대한 상호 작용 논리 /// </summary> public partial class MainWindow : Window public MainWindow() InitializeComponent(); } // 1버튼이 클릭되면 private void Button_Click(object sender, RoutedEventArgs e) if (txtResult.Text == "0") txtResult.Text = "1"; else txtResult.Text += "1"; // 2번버튼 private void Button_Click_1(object sender, RoutedEventArgs e) txtResult.Text = "2"; txtResult.Text += "2"; // 3번 버튼 private void Button_Click_2(object sender, RoutedEventArgs e) txtResult.Text = "3"; txtResult.Text += "3"; // 제곱근(sqrt) private void Button_Click_3(object sender, RoutedEventArgs e) double num = double.Parse(txtResult.Text); txtResult.Text = Math.Sqrt(num).ToString(); // C 버튼 이벤트 private void btnC_Click(object sender, RoutedEventArgs e) txtResult.Text = "0";

40 집에 가서 오늘은 복습 Button에 Name 속성을 만들 것
WPF 계산기 작성 <Grid> <Grid.RowDefinitions> <RowDefinition/> 복습 Button에 Name 속성을 만들 것 YouTube 동영상 참조하여 자신의 계산기 만들 것 (블로그에 정리) 다음 주에는 조편성 3인 1조

41 4주차 수업 3월 20일(월) 조편성 WPF 계산기 완성