[C# WPF] UI 만들기 #01 - 컨트롤 추가, Content, 레이아웃

1. 컨트롤 추가

🔸 컨트롤 추가 방법

• Toolbox를 열어 원하는 컨트롤 추가
• XAML 코드에서 직접 코드
• CS파일에서 추가

◾ ToolBox를 이용한 컨트롤 추가

• 도구상자에서 검색 후 드래그 혹은 더블클릭
  디자이너에 컨트롤이 추가 되면 아래 XAML에도 자동으로 코드가 생성된다.

 

2.Content

• WPF의 각 컨트롤은 내부적으로 여러 개의 하위 컨트롤로 이루어져 있다.
• 그 중 contentpresenter 는 하위에 또 다른 컨트롤을 넣을 수 있는 컨트롤이다.
  단, 하나의 컨트롤만 추가된다. 두개의 컨트롤을 추가하면 error 발생

    <Grid>
        <Button HorizontalAlignment="Left" Margin="23,37,0,0" VerticalAlignment="Top" Height="67" Width="129">
            <TextBox TextWrapping="Wrap" Text="TextBox" Width="64"/>
        </Button>
        <Button Content="Button" HorizontalAlignment="Left" Margin="126,145,0,0" VerticalAlignment="Top" Height="49" Width="159"/>
        <Button Content="Button" HorizontalAlignment="Left" Margin="236,150,0,0" VerticalAlignment="Top" RenderTransformOrigin="1.289,-0.349"/>
    </Grid>

• WPF에서는 Window도 일종의 UI컨트롤로 간주
  Window내부에서도 Contentpresenter가 포함되어 있음.
  → 그럼 Window에는 어떻게 다수의 컨트롤이 추가 되는가
  패널 컨트롤을 두고 있기 때문 (Canvas, Grid StackPanel, DockPanel 등)
  내부의 여러 컨트롤을 추가하기위해 다수의 컨트롤을 포함할 수 있는 컨트롤이 필요한데, 패널 컨트롤이 그 역할을 한다.
  그래서 Window 밑에 다수의 컨트롤을 추가하면 에러가 발생한다.

 

→ 다른이름의 패널 컨트롤도 에러 발생

 

 

3. 레이아웃

◾ 기존 UI 레이아웃

• 단순히 윈도우 창 안에 컨트롤 배치하는 것

 

◾ WPF UI 레이아웃

(1) Canvas 레이아웃

• 단순 좌표 정보만을 위해 컨트롤 배치하는 경우
• Canvas.Top과 Canvas.Left 속성을 이용해 UI를 윈도우에 배치
• 기능적인 부분 보다 무언가를 그려넣을 때 주로 이용

 

(2) Grid 레이아웃

• Grid로 정의된 영역 내부를 다수의 행, 열 격자로 나눈 다음, 그 안에 컨트롤을 배치
• Grid 사용 시 행, 열을 정의 해 주어야 한다.
• Grid.Column, Grid.Row : 컨트롤을 특정 격자에 배치
• Margin , VerticalAlignment, HorizontalAlignment : 격자 영역 내 컨트롤 위치 변경
• Grid.ColumsSpan, Grid.RowSpan : 격자를 합치고 싶은 경우

   <Grid>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <!-- Gird의 행 설정-->
        <Grid.RowDefinitions>
            <RowDefinition Height="35" />
            <RowDefinition Height="30" />
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>
        
        <!-- Gird의 열 설정-->
        <TextBox Grid.Column="0" Grid.Row="0" Margin="10,10,0,0" HorizontalAlignment="Left" Height="20" Width="80"/>
        <TextBox Grid.Column="0" Grid.Row="1" Margin="10,10,0,0" HorizontalAlignment="Right" Height="20" Width="80"/>
        <Button Grid.Column="0" Grid.Row="2" Margin="10,10,0,0" HorizontalAlignment="Center" Height="20" Width="80" Content="test"/>

    </Grid>

 

(3) StackPanel 레이아웃

• StackPanel의 Orientation 속성에 의해 자동으로 가로 또는 세로 방향으로 컨트롤들이 순서대로 쌓인다.
• 정렬이 필요할 때 작업이 까다로울 수 있으니 보조 수단으로 사용한다.

    <StackPanel>
        <TextBox TextWrapping="Wrap" Text="TextBox" Width="120"/>
        <Button Content="Button"/>
        <RadioButton Content="RadioButton"/>
        <Button Content="Button"/>
    </StackPanel>

→ 위치 지정 하지 않아도 자동으로 순차적으로 위치된다.

 

(4) DockPanel 레이아웃

• 도킹 개념을 이용한 패널 컨트롤로 상하좌우 방향으로 컨트롤을 도킹시켜 배치
• DockPanel.Dock 속성을 이용해 원하는 방향으로 도킹

    <DockPanel>
        <TextBox DockPanel.Dock="Top" Background="Red"/>
        <TextBox DockPanel.Dock="Left" Background="Blue"/>
        <TextBox DockPanel.Dock="Right" Background="pink"/>
        <TextBox DockPanel.Dock="Bottom" Background="Green"/>
        <TextBox Background="Gray"/>
    </DockPanel>

 

(5) WrapPanel 레이아웃

• 줄바꿈(Wrap) 기능을 제공한다.
• Orientation : 좌우/상하 방향의 줄바꾸기 가능
• FlowDirection : stack 되는 방향을 좌우/우좌로 변경 가능

🔸 Orientation="Horizontal" FlowDirection="LeftToRight" 일 때

    <WrapPanel Orientation="Horizontal" FlowDirection="LeftToRight">
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Center" VerticalAlignment="Bottom" Text="test1"/>
        </Border>
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Left" VerticalAlignment="Center" Text="test2"/>
        </Border>
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Center" VerticalAlignment="Stretch" Text="test3"/>
        </Border>
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Center" VerticalAlignment="Top" Text="test4"/>
        </Border>
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Text="test5"/>
        </Border>
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Right" VerticalAlignment="Stretch" Text="test6"/>
        </Border>
    </WrapPanel>

🔸 Orientation="Horizontal" FlowDirection="RightToLeft" 일 때

<WrapPanel Orientation="Horizontal" FlowDirection="RightToLeft">
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Center" VerticalAlignment="Bottom" Text="test1"/>
        </Border>
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Left" VerticalAlignment="Center" Text="test2"/>
        </Border>
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Center" VerticalAlignment="Stretch" Text="test3"/>
        </Border>
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Center" VerticalAlignment="Top" Text="test4"/>
        </Border>
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Text="test5"/>
        </Border>
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Right" VerticalAlignment="Stretch" Text="test6"/>
        </Border>
    </WrapPanel>

🔸 Orientation="Vertical" FlowDirection="RightToLeft" 일 때

   <WrapPanel Orientation="Vertical" FlowDirection="RightToLeft">
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Center" VerticalAlignment="Bottom" Text="test1"/>
        </Border>
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Left" VerticalAlignment="Center" Text="test2"/>
        </Border>
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Center" VerticalAlignment="Stretch" Text="test3"/>
        </Border>
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Center" VerticalAlignment="Top" Text="test4"/>
        </Border>
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Text="test5"/>
        </Border>
        <Border BorderThickness="1" Height="30" Width="60" BorderBrush="RosyBrown">
            <TextBox HorizontalAlignment="Right" VerticalAlignment="Stretch" Text="test6"/>
        </Border>
    </WrapPanel>