윈도우 앱 화면 구현하기

설계는 지난 포스트에서 완료하였고 이번 게시물부터는 실제 코드 구현을 해보도록 한다

반복해서 말하듯이 Winforms 프로그래밍 개발에 익숙하지 않으므로 학습을 하면서 개발을 하고 있는 중이다

 

처음 구현할 내용은 다음과 같다

첫 단계

- 메인 창은 왼쪽과 오른쪽으로 나눠진다

- 왼쪽에서는 사진 목록을 추가할 버튼을 만든다

- 그 아래에 사진 목록이 표시되도록 한다

- 오른쪽에는 시작 버튼을 만든다

 

Winforms 개발을 하기에 앞서 WPF에 대해서 검토를 하고 진행해야할 것 같다

WPF는 Windows Presentation Foundation의 약자로 Winforms 이후에 나온 GUI로 최근의 각종 기준들에 부합하고 더 많은 유연성을 제공한다고 한다

 

그래서 지난번에 만들었던 프로젝트 파일은 폐기하고 새로 프로젝트를 만들며 WPF 프로젝트를 만들었다

WPF 프로젝트 첫 화면

위와 같이 WPF 프로젝트를 만들면 솔루션 탐색기에 Forms 파일 대신 App.xaml , MainWindow.xaml 파일이 있는 것을 확인할 수 있다

 

첫 창의 이름부터 바꾸기 위해서 하단의 XAML 영역에서 Title을 변경할 수 있다

 

다음은 창을 좌우의 영역으로 나눌 것인데 XAML을 확인해보면 전체 영역은 비어있는 Grid로 이루어져있는 것을 알 수 있다

해당 Grid를 나누기 위해서 위에 창이 그려져있는 Design 영역에서 창 상단 부분을 누르니 줄이 그어지는 것을 볼 수 있는데 그와 동시에 XAML에는 ColumnDefinition이 나타난다

자세한 분할 값은 Width 값을 XAML에서 수정하여 설정할 수 있었고 원하는 화면 모양에 따라 비율로도 설정할 수 있다

나눠진 Grid에 각각 TextBox를 넣으면 다음과 같이 보여진다

WPF 창 나누기

<Window x:Class="Croquis_Image_Viewer_WPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Croquis_Image_Viewer_WPF"
        mc:Ignorable="d"
        Title="Croquis Image Viewer" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="600*"/>
            <ColumnDefinition Width="200*"/>
        </Grid.ColumnDefinitions>
        <TextBlock  Text="Hello Croquis" Grid.Column="0"></TextBlock>
        <TextBlock  Text="Hello Control Panel" Grid.Column="1"></TextBlock>
    </Grid>
</Window>

이제 지난번에 계획했던 대로 양쪽 Column에 버튼을 추가하고 첫단계를 마무리한다

<Window x:Class="Croquis_Image_Viewer_WPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Croquis_Image_Viewer_WPF"
        mc:Ignorable="d"
        Title="Croquis Image Viewer" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="600*"/>
            <ColumnDefinition Width="200*"/>
        </Grid.ColumnDefinitions>
        <TextBlock  Text="Hello Croquis" Grid.Column="0"></TextBlock>
        <TextBlock  Text="Hello Control Panel" Grid.Column="1"></TextBlock>
        <Button Name="ImageAdditionButton" Grid.Column="0">Add Image</Button>
        <Button Name="StartCrouquisButton" Grid.Column="1">Start</Button>
    </Grid>
</Window>

위와 같이 Button 두개를 추가했는데 텍스트 아래에 추가되는 것이 아니라 각 Column의 전체를 버튼이 다 차지해 버리는 상황이 벌어졌다

WPF 버튼 추가

버튼을 추가한 코드를 옮겨보면서 확인한 결과 기존에 있던 텍스트 내용은 버튼 뒤에 가려져 있으며 그 위를 버튼이 덮어버린 상황인 것을 확인했다

내가 원하는 상황은 왼쪽 Column 내부에는 하나의 정사각형 Grid가 잘게 나뉘어진 모습이고 첫번째 Grid에 추가 버튼이 있으며 오른쪽 Column 내부에는 가운데 정렬된 Start 버튼 하나가 있는 것이다

 

그러기 위해서 필요한 정보로는 각 Column에 가운데 정렬되어 있으면서 위아래좌우 Margin이 있는 상태로 Element를 추가할 수 있는 방법을 알아야 된다

일단 Margin이 안나오는 이유가 Button의 크기가 정해져있지 않기 때문이기 때문에 Button의 Width, Height를 편집하면 자동으로 가운데 정렬된 버튼을 볼 수 있다

<Window x:Class="Croquis_Image_Viewer_WPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Croquis_Image_Viewer_WPF"
        mc:Ignorable="d"
        Title="Croquis Image Viewer" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="600*"/>
            <ColumnDefinition Width="200*"/>
        </Grid.ColumnDefinitions>
        <TextBlock  Text="Hello Croquis" Grid.Column="0"></TextBlock>
        <TextBlock  Text="Hello Control Panel" Grid.Column="1"></TextBlock>
        <Grid Name="ImageGrid" Grid.Column="0" Width="500" Height="400" ShowGridLines="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100"></ColumnDefinition>
                <ColumnDefinition Width="100"></ColumnDefinition>
                <ColumnDefinition Width="100"></ColumnDefinition>
                <ColumnDefinition Width="100"></ColumnDefinition>
                <ColumnDefinition Width="100"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="100"></RowDefinition>
                <RowDefinition Height="100"></RowDefinition>
                <RowDefinition Height="100"></RowDefinition>
                <RowDefinition Height="100"></RowDefinition>
            </Grid.RowDefinitions>
            <Button Name="ImageAdditionButton" Grid.Column="0" Width="100" Height="100">Add Image</Button>
        </Grid>
        <Button Name="StartCrouquisButton" Grid.Column="1" Width="100" Height="20">Start</Button>
    </Grid>
</Window>

위와 같이 Grid를 추가하고 Button 추가 코드를 이동시키면 다음과 같이 원하는 모습을 볼 수 있다

Grid를 추가한 후 Button

디자인 측면에서 봤을 때는 완전 망한 것처럼 볼 수 있지만 계획 했던 첫단계 상황을 만들었다

사진 목록을 먼저 만든 후에 Grid 형식으로 만들려고 했는데 한번에 했으니 그냥 냅두도록 한다