[C#, XAML] WPF 버튼과 반응하는 문자열 입출력 (Button, textbox, textblock) 문자열 입력버튼 누르면 화면에 보여주기

안녕하세요 블로그 주인장 양햄찌입니다.

저번에 WPF에 대해서 간단하게 프로젝트를 생성하고 실행해봤는데요

오늘은 문자열을 입력하고 버튼을 누르면 그 문자열이 출력되는 동작 기반의 아주 간단한 앱을 만들어보려고합니다.

이를 통해서 UI와 백단이 어떻게 주고 받는지 알 수 있어요. 

고고씽~~!

문자열을 입력할 TextBox만들기 

텍스트 입력을 위해 TextBox를 하나 넣어줄건대요.

바탕색이랑 텍스트박스 색이랑 같은 흰색이면 구별이 안되니까 윈도우 배경색을 약간 회색?으로 변경해볼게요 #e9e9e9 색으로 지정!

<Grid Background="#e9e9e9">
	<TextBox HorizontalAlignment="Left" Height="306" TextWrapping="Wrap" 
              Text="입력해주세요" VerticalAlignment="Top" Width="266" Margin="33,48,0,0"/>
</Grid>

도구 상자에서 텍스트 박스 눌러서 넣으면 기본적인 코드는 작성될거예요 Grid 태그 부분에 백그라운드 색을 지정해줍시다.

 

문자열을 제출할 Button만들기 

우리가 만들고 싶은건 텍스트박스에 글자를 쓰고 버튼을 누르면 그 문자열을 저장하는 거예요.

입력 박스 밑에 도구상자로부터 Button을 끌어다가 만들어줍시다.

요렇게~~

<Grid Background="#e9e9e9">
        <TextBox HorizontalAlignment="Left" Height="306" TextWrapping="Wrap" 
                 Text="입력해주세요" VerticalAlignment="Top" Width="266" Margin="33,48,0,0"/>
        <Button Content="제출" HorizontalAlignment="Left" 
        	VerticalAlignment="Top" Width="75" Margin="224,359,0,0"/>
</Grid>

Content 값을 '제출'로 변경해줬어요.

 

문자열을 출력할 TextBlock만들기 

우리가 저장하고 있던 문자열을 지지고 볶고 해서 원하는 결과를 출력해주는 창을 만들건대요.

출력상자는 edit 기능이 없어도 되니 TextBox가 아닌 좀 더 가벼운 TextBlock을 이용해줍시다. 

TextBox도구상자와 TextBlock 도구상자의 차이를 아직 모르시는 분은 전에 다뤘었던 아래 포스팅을 참고해주세요~

 

▼WPF 도구 상자 textblock과 textbox 차이 : https://jhnyang.tistory.com/379

요렇게 옆에다가 추가해줬습니다. TextBlock 안에 "결과창"라고 넣어줄까요?

<Grid Background="#e9e9e9">
        <TextBox HorizontalAlignment="Left" Height="306" TextWrapping="Wrap" 
                 Text="입력해주세요" VerticalAlignment="Top" Width="266" Margin="33,48,0,0"/>
        <Button Content="제출" HorizontalAlignment="Left" 
        	VerticalAlignment="Top" Width="75" Margin="224,359,0,0"/>
	<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="결과창" VerticalAlignment="Top" 
                Margin="356,49,0,0" Height="305" Width="287" Background="White"/>
</Grid>

 

각 컴포넌트에 이름 넣기

만약 버튼이 세 개가 있다고 했을 때 각각 버튼을 구분할 수 있어야 하죠

즉 뒷단에 동작에 대한 코드를 완성하기 위해서는 컨테이너에 이벤트가 발생했을 때 그 컨테이너를 구분할 수 있게 하기 위해서 이름이 필요합니다!

 

사진은 두 개 이지만 해당 포스팅에서는 세 개 해줘야해용

컴포넌트를 누르면 이렇게 속성이 오른편에 뜨는데, 여기 이름(Name) 칸이 있어요. 여기에 내가 이 컴포넌트에 붙여주고 싶은 이름을 적어줍시다. 속성창은 F4를 누르면 뜹니다. 

 

문자열을 입력할 컴포넌트에게는 'input_txtbox', 버튼에게는 'submit_btn'

출력을 보여줄 창에는 'output_txtblock'이라는 이름을 넣어줬어요.

<Grid Background="#e9e9e9">
	<TextBox x:Name="input_txtbox" HorizontalAlignment="Left" Height="306" 
    		TextWrapping="Wrap" Text="입력해주세요" VerticalAlignment="Top" Width="283" 
        	Margin="33,48,0,0" GotFocus="input_txtbox_GotFocus"/>
	<Button x:Name="submit_btn" Content="제출" HorizontalAlignment="Left" 
    		VerticalAlignment="Top" Width="75" Margin="241,359,0,0" Click="submit_btn_Click"/>
	<TextBlock x:Name="output_txtblock" HorizontalAlignment="Left" 
    		TextWrapping="Wrap" Text="결과창" VerticalAlignment="Top" Margin="356,49,0,0" 
        	Height="305" Width="287" Background="White"/>
</Grid>

이름을 적어준 뒤에 XAML 코드를 확인해보면. x:Name="input_txtbox" 이렇게 Name속성이 추가된 것을 확인할 수 있습니다.

[이벤트핸들링] 동작 대상 컴포넌트에 이벤트함수 추가하기

이제 동작에 관한 처리를 해볼건대요.

자 제가 버튼을 눌렀어요 그러면 입력컴포넌트에 있는 문자열을 저장해야 하니까 결국 어떤 처리과정이 일어나야 하죠!

즉 버튼을 누르다 라는 이벤트가 발생하면 그를 처리하는 함수가 필요해요.

속성에 가면 빨간색 박스처럼 번개표시 아이콘이 있는데요, 여기에 이 컴포넌트가 발생시킬 수 있는 이벤트 목록이 아주 많이 나와있습니다~! 우리는 버튼을 클릭하는거니까 버튼의 이벤트처리기로 가서 Click 항목을 찾은다음에 저기 화살표가 가리키고 있는 입력창을 더블클릭해줍시다.

더블클릭하면 순간적으로 저렇게 (Name)_(이벤트) 로 구성된 함수명이 지어져요 

물론 내가 직접 지을수도 있습니다.

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

        private void submit_btn_Click(object sender, RoutedEventArgs e)
        {

        }
    }
}

cs파일인 MainWindow.xaml.cs로 가보면, submit_btn_Click이라는 이름의 이벤트처리함수가 자동적으로 생겨난 것을 확인할 수 있습니다. 코드를 짜봅시다. 

 

private void submit_btn_Click(object sender, RoutedEventArgs e)
{
  string text = input_txtbox.Text; //입력 컴포넌트의 내용을 string text에 대입
  output_txtblock.Text = text;		// text 문자열을 출력 컴포넌트의 내용에다 대입
}

아주아주 간단하게 우리가 원하고자 하는 기능만 수행할 수 있도록 위와 같이 코드를 짜줬습니다.

 

[동작 결과]

제출 버튼 누르기 전

입력해주세요 문자열을 지우고 'ㅇ'를 연속으로 채웠습니다. 

제출 버튼 누른 후 

그리고 제출 버튼을 누르니!~! 입력 컴포넌트에 있던 문자열이 결과창 컴포넌트에 출력되었어요.

 

TextBox에도 이벤트 추가해볼까~

그런데, 저기 입력하는 부분에 매번 '입력해주세요' 삭제하고 쓰려니까 번거롭죠.

저기 마우스 클릭하는 순간 새롭게 입력할 수 있게 '입력해주세요'는 삭제되었으면 좋겠어요. 

이러한 동작 대상은 TextBox이니 이번엔 버튼말고 TextBox의 번개모양을 눌러 이벤트 처리기로 들어가줍시다.

마우스로 클릭해서 활성화 되는 이벤트는 GotFocus입니다. 마찬가지로 더블클릭하면 함수가 자동으로 작성되는데~

여따가 포커스되자마자 뭔가를 처리해주는 함수를 작성할거예요.

private void input_txtbox_GotFocus(object sender, RoutedEventArgs e)
{
	input_txtbox.Clear();
}

입력 문자열 컴포넌트를 Clear()해주는 코드를 넣어줬습니다.

 

이로써 텍스트 상자에다가 문자열을 쓰려고 누르는 순간 안에 들어있던 문자열은 깨끗하게 지워지고 새노트에 쓰게 됩니다. 오늘은 버튼의 Click과 TextBox의 gotFocus 이벤트를 작성해보면서 백단과 프론트단이 어떻게 상호작용 하는지에 대해 아주 간략히 살펴보았어요. 도움이 되셨다면 광고클릭/좋아요/댓글 중 하나는 어떠신가요? 작성자에게 큰 동기부여가 됩니다. 고럼 다음포스팅에서 또 만나요