[wpf] 화면 이동하기 -2- Window 사용법, 예제(사용자 입력 받기)

화면 이동하기는 총 네개의 게시글로 구성되어 있습니다.

 

1. Page

2. Window

3. TabControl

4. UserControl

 

---

 

이번 게시글에서는 Window를 사용하여 화면을 이동해보겠습니다.

 

Window는 화면을 이동하는게 아니라 화면을 새로 띄워주는 개념입니다.

 

사용자의 입력을 받을때 활용되는 경우가 많습니다.

 

시작하겠습니다.

 

파일은 MainWindow, InputWindow로 구성됩니다.

 

 

 

1. MainWindow.xaml

<Window x:Class="WindowTest.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:WindowTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0">
            <Border BorderThickness="1" Width="200" Height="80" BorderBrush="Black">
                <TextBlock Name="myTextBlock" TextAlignment="Center" VerticalAlignment="Center"></TextBlock>
            </Border>
        </Grid>
        <Grid Grid.Column="1">
            <Button Content="버튼" Width="200" Height="80" Click="Button_Click"></Button>
        </Grid>
    </Grid>
</Window>

화면을 좌우로 분할해 왼쪽에는 textblock을 오른쪽에는 버튼을 만들어주었습니다.

 

 

2. MainWindow.cs

namespace WindowTest
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            InputWindow IW = new InputWindow();
            if (IW.ShowDialog() == true)
            {
                myTextBlock.Text = IW.myTextBox.Text;
            }
        }
    }
}

InputWindow는 아래에서 만들어준 Window클래스의 이름입니다.

 

윈도우 객체를 만들어주고

 

Show() 혹은 ShowDialog()를 입력하면 새로운 창이 띄워집니다.

 

ShowDialog()는 모달이라고도 하며 새창이 열리면 이전창을 사용하지 못하게되는 형태로 새창을 열어줍니다.

 

Show()는 모달리스라고 하며 새창을 열고도 이전화면이 동작하는 형태를 말합니다.

 

사용자의 입력을 받는경우는 ShowDialog()를 사용하여 사용자가 입력을 다 하고 확인버튼이 누를때까지 이전화면을

 

중단시키는 경우가 많습니다.

 

메인윈도우 스레드는 ShowDialog()라는 메서드에서 블락되어 해당 메서드의 결과가 나올때까지 대기합니다.

 

사용자가 새창에서 확인버튼을 누르면 해당메서드는 True로 반환되어 if문이 실행되게 됩니다.

 

if문 내부에서는 TextBlock의 text를 사용자의입력값으로 바꾸어 주게 됩니다.

 

3. InputWindow.xaml

<Window x:Class="WindowTest.InputWindow"
        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:WindowTest"
        mc:Ignorable="d"
        Title="InputWindow" Height="180" Width="400">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <TextBox Height="50" Width="120" Name="myTextBox"></TextBox>
        </Grid>

        <Grid Grid.Row="1">
            <Button Height="30" Width="80" Content="확인" Click="Button_Click"></Button>
        </Grid>

    </Grid>
</Window>

화면은 위아래로 분할하여 위쪽에는 사용자의 입력을 받기위한 TextBlock을, 아래쪽에는 입력을 다 했을때 누르라고 확인버튼을 만들었습니다. 

 

새창의 크기는 Window태그의 Width와 Height을 이용해 조절합니다.

 

 

4. InputWindow.cs

namespace WindowTest
{
    /// <summary>
    /// InputWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class InputWindow : Window
    {
        public InputWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {

            this.DialogResult = true;
        }
    }
}

 

사용자가 확인버튼을 눌렀을떄 this.DialogResult를 true로 만들어줍니다.

 

DialogResult의 값이 들어가는 순간 화면은 종료되며 해당값은 ShowDialog()으로 리턴됩니다.

 

5. 결과

 

1. 첫화면

 

2. 버튼을 클릭했을때의 화면

 

3. TextBox에 "안녕하세요"를 입력하고 확인버튼을 눌렀을때의 화면