기초지식 - 3

https://hola-que-tal.tistory.com/37?category=825575 

C# Winform WPF #3

 

1. 레이아웃

    A. 화면 크기 조절이 안되는 이유 (메뉴 페이지)

        a. 애플리케이션 창 크기를 조절했을 때 컨트롤의 크기가 같이 변하지 않음

        b. 창이 컨트롤들 구성된 크기보다 작아지면 컨트롤들의 일부가 가려짐

    B. Panel을 사용하자!

 

2. 크기 할당

    A. 컨트롤의 최종 너비를 계산하기 위해 아래의 과정 진행

<!-- Canvas 태그 사용할 때 -->
<Canvas Width="50" Height="50" Background="Orange">
	<Button Content="HellWorld" Margin="5"/>
</Canvas>

<!-- Grid 태그 사용할 때 -->
<Grid Width="50" Height="50" Background="Orange">
	<Button Content="HellWorld" Margin="5"/>
</Grid>

• Canvas컨트롤의 경우,자식 컨트롤 크기를 제한하지 않음
• Grid컨트롤은 자식의 크기를 제한함

Panel컨트롤

• 하나의 컨트롤만 허용하는 여러 개의 컨트롤을 표시
• 사용 가능한 크기에 따라 컨트롤을 배치
• 애플리케이션 화면을 사용 가능한 화면 영역에 맞춰 조정할 수 있으므로 광범위한 의미로 반응형 디자인(ResponseDesign)이라고 할 수 있음

 

1. 주요 컨트롤

Canvas패널 -­ 자체 좌표를 제공하는 컨트롤 배치

<Canvas Background="Orange">
    <Button Canvas.Top="0" Canvas.Left="0" Content="A"/>
    <Button Canvas.Top="25" Canvas.Left="0" Content="B"/>
    <Button Canvas.Top="25" Canvas.Left="25" Content="C"/>
    <Button Canvas.Top="0" Canvas.Left="50" Content="D"/>
</Canvas>

• Canvas.Left ­ 왼쪽 상단 기준에서부터 x값
• Canvas.Top ­ 왼쪽 상단 기준에서부터 y값
• Width,Height도 사용 가능

StackPanel ­- 컨트롤을 하단에서 상단으로 쌓아서 각 컨트롤에 전체 너비를 할당

• Orientation제어 사용 방향변경 가능

<StackPanel Orientation="Vertical" Background="Orange">
    <Button Content="A"/>
    <Button Content="B"/>
    <Button Content="C"/>
    <Button Content="D"/>
</StackPanel>

 

DockPanel ­- 대부분의 데스크탑 앱과 같은 화면 레이아웃을 구성

• 연결 속성 추가

<DockPanel Background="Orange">
    <Button Content="Left" DockPanel.Dock="Left"/>
    <Button Content="Right" DockPanel.Dock="Right"/>
    <Button Content="Top" DockPanel.Dock="Top"/>
    <Button Content="Main"/>
</DockPanel>

 

WrapPanel ­- xaml을 수동으로 편집할 때 사용 용이

• 화면이 꽉차면 Wrap되는 패널

<WrapPanel Orientation="Horizontal">
    <Button Content="ClickTestButton01"/>
    <Button Content="ClickTestButton02"/>
    <Button Content="ClickTestButton03"/>
    <Button Content="ClickTestButton04"/>
</WrapPanel>

 

UniformGrid -­ xaml을 수동으로 편집할 때 시간을 들이지 않고 입력 UI를 배치하는 컨트롤

• 컨트롤에 필요한 행과 열을 자동으로 계산
• 단점 ­- 모든 행과 열을 동일한 너비와 넓이로 만드는 점

 

Grid­ - 레이아웃 크기를 조정할 수 있는 최상의 다기능 컨트롤

복잡한 대신 정확하게 원하는 레이아웃을 만들 수 있음

<Grid Height="100">
  <Grid.ColumnDefinitions>
    <ColumnDefinition />
    <ColumnDefinition />
  </Grid.ColumnDefinitions>
    
  <Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition />
  </Grid.RowDefinitions>
    
    <Button Grid.Row="0" Grid.Column="0" Content="ButtonA"/>
    <Button Grid.Row="1" Grid.Column="0" Content="ButtonB"/>
    <Button Grid.Row="1" Grid.Column="1" Content="ButtonC"/>
    <Button Grid.Row="0" Grid.Column="1" Content="ButtonD"/>
</Grid>

레이아웃 규칙

• 컨트롤은 자신이 속한 전체 칸을 채움
• 각 칸에 속한 컨트롤이 각 칸의 상단에 표시
• 컨트롤을 Grid.RowSpan 및 Grid.ColumnSpan 연결 속성을 사용 몇 개의 열이나 행을 채울 수 있음

Width/Height규칙

• 고정 숫자 :픽셀의 수 할당
• Auto:자체 컨텐츠에 대한 크기로 적용
• 별 또는 별이 붙은 숫자 :남은 너비/높이에 비례한 크기 지정

<Grid.ColumnDefinitions >
  <ColumnDefinition Width="80"/>
  <ColumnDefinition Width="*"/>
  <ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>

 

목록 컨트롤

데이터 요소 컬렉션에 바인딩 되는 기본 컨트롤

• 선택 컨트롤 -­ ListBox

<ListBox Height="100">
  <Label Content="Element1"/>
  <Label Content="Element2"/>
  <GroupBox Header="Element3">
  	Withsomecontentit'sfunnier
  </GroupBox>
</ListBox>

 

• 선택 컨트롤 - ComboBox

<ComboBox Height="60">
  <Label Content="Element1"/>
  <Label Content="Element2"/>
  <GroupBox Header="Element3">
  	Withsomecontentit'sfunnier
  </GroupBox>
</ComboBox>

Tutorial 3

토론 페이지 생성

• Discussion.xaml 페이지 추가
• 파일 오픈 후 코딩 추가

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="*"/>
  <ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
  <RowDefinition Height="*"/>
  <RowDefinition Height="50"/>
</Grid.RowDefinitions>

<ListBox Grid.ColumnSpan="2" Margin="5"/>
<TextBox Grid.Row="1" Grid.Column="0" Margin="5" Text="Typeyourmessagehere"/>
<Button Grid.Row="1" Grid.Column="1" Margin="5" Content="SEND"/>

실행화면

• Menu.xaml 오픈
• xaml 코드 수정

<Grid.RowDefinitions>
  <RowDefinition Height="50"/>
  <RowDefinition Height="150"/>
  <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="*"/>
  <ColumnDefinition Width="*"/>
  <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<Button Content="Products" Grid.Row="1" Grid.Column="0" FontSize="16" Margin="10"/>
<Button Content="Livesupport" Grid.Row="1" Grid.Column="1" FontSize="16" Margin="10"/>
<Button Content="Emailsupport" Grid.Row="1" Grid.Column="2" FontSize="16" Margin="10"
	Click="Button_Click"/>
<TextBlock Grid.Row="2" Grid.ColumnSpan="3" Margin="30" TextAlignment="Center" TextWrapping="Wrap"
Text="AdventureWorks" FontSize="36"/>

 

실행화면

• Menu.xaml 수정
• 각 버튼 x:Name지정

    - Product -> BtnProduct

    - Livesupport -> BtnLiveSupport

    - Emailsupport -> BtnEmailSupport

 

• 이전 Emailsupport버튼 클릭 이벤트 수정

    1) 기존 Button_Click 삭제 후 더블클릭

    2) Button_Click 내 코드,BtnEmailSupport_Click 으로 잘라내기, 붙여넣기 후

    3) Button_Click 메서드 삭제

실행화면

• Menu.xaml 수정
• Livesupport버튼 선택 후 이벤트 Click확인 및 텍스트박스 더블클릭

private void BtnLiveSupport_Click(object sender,RoutedEventArgs e)
{
  NavigationService.Navigate
  (
  	 new Uri("/Discussion.xaml",UriKind.RelativeOrAbsolute)
  );
}

실행화면