C# Winform WPF #1

안녕하세요~! 문쑹입니다:)

 

오늘은 C# Winform에서 디자인을 입힌 개념인 WPF을 살펴보겠습니다.

 

개발자-디자이너 워크플로우

WPF 작업순서

• 개발자와 디자이너는 자신의 개발툴을 가지고 서로간에 작업을 공유할 수 있음
• 디자이너의 작업이 개발자의 비즈니스 코드에 영향을 미치지 않을 수 있음

컨트롤 추가 방법

XAML화면에 컨트롤을 추가하는 방법

• 도구상자에서 컨트롤 드래그
• XML요소를 코딩하여 추가

<Grid>
<Buttonx:Name="BtnConnect"Content="Connect"Width="100"Height="30"/>
</Grid>

단순 컨트롤

기본 컨트롤

텍스트 및 화면 디스플레이 관련 실습을 해보겠습니다. 먼저, 프로젝트를 생성해줍니다.

프로젝트 이름을 설정한 다음 MainWindow.xaml을 클릭해주세요. 그럼 하단에 xml태그가 나오는데 Grid를 StackPanel로 변경해주세요!

아래와 같이 StackPanel안에 코드를 입력해보겠습니다.

    <StackPanel Orientation="Vertical"><!-- 디폴트가 세로임 -->
        <TextBlock Text="TextBlock" Width="100" />
        <TextBox Text="TextBox" Width="100"/>
        <ProgressBar Value="50" Width="100" Height="20"/>
        <Slider Value="5" Width="100" />
        <PasswordBox PasswordChar="●" Password="Secret" Width="100" />
    </StackPanel>

실행 화면

멀티미디어 컨트롤

이미지 및 동영상 관련

• 공통 크기 조절 ­ 컨트롤에 할당된 크기에 맞춰 조절(Stretch)
• Uniform(default)­ 측면에 투명 여백을 남겨두고 이미지의 크기 비례해서 조절
• Fill­ 이미지 비례적으로 크기 조절,Image컨트롤에 할당된 전체 공간 채움

<ImageSource="cat.jpg"Height="100"/>
<MediaElement Source="cat.wmv"Height="150" LoadedBehavior="Play"/>

그리기 컨트롤

타원,사각형 등 벡터 이미지 컨트롤의 공통 속성

• Fill­ 컨트롤 내부 칠하기 브러시
• Stroke­ 컨트롤 윤곽 그리기 브러시
• Stretch ­ 크기 조설시 컨트롤의 모양크기 조절 방식

<EllipseWidth="100"Height="50"Fill="Blue"Stroke="Black"/>
<RectangleWidth="100"Height="70"Fill="Red"/>
<PathWidth="100"Height="20"Margin="5,5,5,5"/>
<PathFill="Blue">
  <Path.Data>
  	<RectangleGeometry Rect="0,0,30,30"/>
  </Path.Data>
</Path>

컨텐츠 컨트롤

Content 속성을 가진 모든 컨트롤

<ButtonContent="NormalButton"Width="120"Height="30"/>
<ToggleButton Content="ToggleButton"Width="120"Height="30"/>
<CheckBox Content="CheckBox"/>
<RadioButton Content="RadioButton"/>

복잡한 컨텐츠를 사용하고자 하면 하위요소를 사용할 수 있음

<ButtonPadding="10"Height="50"Width="100">
	<MediaElement Source="cat.wmv"Height="30"/>
</Button>
<ButtonWidth="100">
  <CheckBox>
    <TextBlock Text="tothelaundry"
    TextWrapping="Wrap"/>
  </CheckBox>
</Button>

윈폼과는 다르게 컨트롤 외관을 쉽게 변형 가능(윈폼이 불가능한 것은 아님)

<BorderBackground="Orange" CornerRadius="10"Padding="5"Width="120">
	<ButtonContent="Button"Width="100"Height="30"/>
</Border>
<BorderBackground="Blue"CornerRadius="10,0,10,0"Padding="5"Width="120">
	<ButtonContent="OtherButton"Width="100"Height="30"/>
</Border>
<ScrollViewer Height="300"Width="400" HorizontalScrollBarVisibility ="Auto">
	<MediaElement Source="cat.wmv"Stretch="None"/>
</ScrollViewer>

ViewBox

• 모든 컨텐츠의 크기 조정가능
• 사용 가능한 너비와 높이에 맞게 화면을 조정

<Viewbox Stretch="Fill"Width="300"Height="200" ScrollViewer.VerticalScrollBarVisibility ="Visible">
	<MediaElement Source="cat.wmv"Stretch="None"/>
</Viewbox>

뷰박스 없는 그리드

<Grid Height="60" Width="100" Background="LightBlue">
	<ButtonContent="A"/>
</Grid>

뷰박스 그리드

<Grid Height="60" Width="100" Background="LightBlue">
  <Viewbox>
  	<ButtonContent="A"/>
  </Viewbox>
</Grid>

변형

<Grid Height="60" Width="100" Background="LightBlue">
  <Viewbox Stretch="Fill">
  	<ButtonContent="A"/>
  </Viewbox>
</Grid>

 

탐색

Navigation사용

• 이전 화면 되돌아가기 미치 기록에서 되돌아가기
• WPF내 NavigationWindow 기능을 이용
• 코드비하인드 및 xaml 상에서 모두 구현 가능

WPF를 가지고 간단한 프로젝트를 한 번 해보겠습니다. 최대한 쉽게 해보도록 노력할게요!

 

작은 전자상거래 애플리케이션 구현을 해보겠습니다. ­BikeShop이라는 프로젝트를 만들어서 아래와 같은 기능들을 구현해보겠습니다.

• 사용자가 제품을 검색,장바구니 추가
• 사이트 관리자가 제품을 나열,생성,수정 및 삭제 가능

Tutorial 1

새 프로젝트 구성

1. 프로젝트 이름 ­ BikeShop
2. 위치 ­ 자신의 필요한 곳
3. 솔루션 이름 ­ BikeShop
4. 프레임워크 - .NETFramework4.7.x

솔루션 탐색기

• 화면에 없으면 보기 -> 솔루션 탐색기 (Ctrl+W,S)
• 컨텍스트 메뉴(마우스 오른쪽) -> 추가 -> 새 항목

1. Ctrl+Shift+A사용 추천
2. 왼쪽 메뉴에서 WPF선택
3. 리스트에서 페이지(WPF) 선택
4. 이름 Contact.xaml 입력 후 추가 버튼 클릭

화면 구성

• TextBlock 2개,TextBox 2개로 화면 구성
• 도구상자 오픈,공용 WPF컨트롤에서 선택 드래그

• TextBlock 클릭 후
• 속성,Text -> Sender로 변경 엔터 c.
• 두번째 TextBlock -> Message로 변경
• TextBox 클릭 후
• 속성,Text삭제

• 솔루션 탐색기 MainWindow.xml파일 더블 클릭
• Xaml 코드에 추가

<Grid>
	<Frame x:Name="MainFrame" Source="/BikeShop;component/Contact.xaml" NavigationUIVisibility="Hidden"/>
</Grid>

실행화면

• 종료 후 Contact.xaml 열기

1. 첫번째 TextBox 컨트롤 우측 자동 크기 조절 아이콘 클릭
2. 두번째 TextBox 컨트롤 우측 및 하단 자동 크기 조절 아이콘 클릭

• 재실행 후 확인

 

Tutorial2에서 이어가겠습니다 :)